admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UI Component docs (Display & Feedback components) (#2453)

Browse Source 
* ui docs

* UI docs for display components

* docs for display and feedback components

* minor edits

* minor changes

* cleaned up code

* Move telemetry

* Revised Feedback/Display UI docs & added input UI docs

* Docs for Input components

* updated icons

* docs for input/components

* minor edits based on feedback

* add css to ui components

* Fixed spacing issue in button groups

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Nimra Ahmed
2023-11-23 02:35:34 +05:00
committed by GitHub
parent ec3cfe6fdb
commit b1d748f8bd
66 changed files with 3394 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/display/pill/components/SoonPill.tsx
View File

@ -5,7 +5,7 @@ const StyledSoonPill = styled.span`
background: ${({ theme }) => theme.background.transparent.light};
border-radius: 50px;
color: ${({ theme }) => theme.font.color.light};
display: flex;
display: inline-block;
font-size: ${({ theme }) => theme.font.size.xs};
font-style: normal;
font-weight: ${({ theme }) => theme.font.weight.medium};

2
front/src/modules/ui/display/tag/components/Tag.tsx
View File

@ -27,7 +27,7 @@ const StyledTag = styled.h3<{
background: ${({ color, theme }) => theme.tag.background[color]};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ color, theme }) => theme.tag.text[color]};
display: flex;
display: inline-block;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md};
font-style: normal;

2
front/src/modules/ui/input/button/components/FloatingButtonGroup.tsx
View File

@ -8,7 +8,7 @@ const StyledFloatingButtonGroupContainer = styled.div`
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) =>
`0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`};
display: flex;
display: inline-flex;
`;
export type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {

2
front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx
View File

@ -15,7 +15,7 @@ const StyledFloatingIconButtonGroupContainer = styled.div`
border-radius: ${({ theme }) => theme.border.radius.sm};
box-shadow: ${({ theme }) =>
`0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`};
display: flex;
display: inline-flex;
gap: 2px;
padding: 2px;
`;