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;
`;

28
front/tsup.ui.index.tsx
View File

@ -12,5 +12,31 @@ declare module '@emotion/react' {
export * from './src/modules/ui/display/checkmark/components/Checkmark';
export * from './src/modules/ui/display/checkmark/components/AnimatedCheckmark'
export * from './src/modules/ui/display/chip/components/Chip'
export * from './src/modules/ui/display/chip/components/EntityChip'
export * from './src/modules/ui/display/icon/components/IconAddressBook'
export * from './src/modules/ui/display/pill/components/SoonPill'
export * from './src/modules/ui/display/tag/components/Tag'
export * from './src/modules/ui/display/tooltip/AppTooltip'
export * from './src/modules/ui/display/tooltip/OverflowingTextWithTooltip'
export * from './src/modules/ui/feedback/progress-bar/components/ProgressBar'
export * from './src/modules/ui/feedback/progress-bar/components/CircularProgressBar'
export * from './src/modules/ui/input/button/components/Button'
export * from './src/modules/ui/input/button/components/ButtonGroup'
export * from './src/modules/ui/input/button/components/FloatingButton'
export * from './src/modules/ui/input/button/components/FloatingButtonGroup'
export * from './src/modules/ui/input/button/components/FloatingIconButton'
export * from './src/modules/ui/input/button/components/FloatingIconButtonGroup'
export * from './src/modules/ui/input/button/components/LightButton'
export * from './src/modules/ui/input/button/components/LightIconButton'
export * from './src/modules/ui/input/button/components/MainButton'
export * from './src/modules/ui/input/button/components/RoundedIconButton'
export * from './src/modules/ui/input/color-scheme/components/ColorSchemeCard'
export * from './src/modules/ui/input/color-scheme/components/ColorSchemePicker'
export * from './src/modules/ui/input/components/AutosizeTextInput'
export * from './src/modules/ui/input/components/Checkbox'
export * from './src/modules/ui/input/components/EntityTitleDoubleTextInput'
export * from './src/modules/ui/input/components/IconPicker'
export * from './src/modules/ui/input/components/ImageInput'
export * from './src/modules/ui/input/components/Radio'
export * from './src/modules/ui/input/components/RadioGroup'
export * from './src/modules/ui/input/button/components/Button';
export * from './src/modules/ui/display/icon/components/IconAddressBook';