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

Fix UI components (#2771)

Browse Source 
* fixes radio button's label (issue #2566)

* fixes entity title double text input's width (issue #2562)

* fixed checkmark placement on color scheme card

* fix failing CI Docs

* fixes computed node dimensions and color scheme card

* fix color scheme card background

* fix color scheme card background

* updated color scheme card docs

* Fix

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Nimra Ahmed
2023-11-30 16:13:05 +05:00
committed by GitHub
parent 976f86093c
commit 0008c4b9d5
9 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/contributor/frontend/ui-components/input/color-scheme.mdx
View File

@ -42,7 +42,7 @@ Represents different color schemes and is specially tailored for light and dark
<tr>
<td>variant</td>
<td>string</td>
<td>The color scheme variant. Options include `dark`, `light`, and `system`</td>
<td>The color scheme variant. Options include `Dark`, `Light`, and `System`</td>
<td>light</td>
</tr>

4
docs/docs/contributor/frontend/ui-components/input/text-input.mdx
View File

@ -8,7 +8,7 @@ sidebar_custom_props:
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import autoSizeTextInputCode from '!!raw-loader!@site/src/ui/input/components/autoSizeTextInputCode.js'
import autosizeTextInputCode from '!!raw-loader!@site/src/ui/input/components/autosizeTextInputCode.js'
import entityTitleDoubleTextInputCode from '!!raw-loader!@site/src/ui/input/components/entityTitleDoubleTextInputCode.js'
@ -21,7 +21,7 @@ Text input component that automatically adjusts its height based on the content.
<SandpackEditor
availableComponentPaths={['@/ui/input/components/AutosizeTextInput']}
componentCode={autoSizeTextInputCode}
componentCode={autosizeTextInputCode}
/>
</TabItem>

23
docs/src/ui/generated/index.d.ts vendored
View File

@ -182,7 +182,6 @@ declare const lightTheme: {
blueAccent20: string;
blueAccent15: string;
blueAccent10: string;
yellow: string;
green: string;
turquoise: string;
sky: string;
@ -191,6 +190,7 @@ declare const lightTheme: {
pink: string;
red: string;
orange: string;
yellow: string;
gray: string;
};
grayScale: {
@ -325,6 +325,7 @@ type ChipProps = {
declare const Chip: ({ size, label, disabled, clickable, variant, leftComponent, rightComponent, accent, maxWidth, className, onClick, }: ChipProps) => react_jsx_runtime.JSX.Element;
type IconComponent = FunctionComponent<{
className?: string;
color?: string;
size?: number;
stroke?: number;
@ -336,7 +337,7 @@ type EntityChipProps = {
linkToEntity?: string;
entityId: string;
name: string;
pictureUrl?: string;
avatarUrl?: string;
avatarType?: AvatarType;
variant?: EntityChipVariant;
LeftIcon?: IconComponent;
@ -345,7 +346,7 @@ declare enum EntityChipVariant {
Regular = "regular",
Transparent = "transparent"
}
declare const EntityChip: ({ linkToEntity, entityId, name, pictureUrl, avatarType, variant, LeftIcon, }: EntityChipProps) => react_jsx_runtime.JSX.Element;
declare const EntityChip: ({ linkToEntity, entityId, name, avatarUrl, avatarType, variant, LeftIcon, }: EntityChipProps) => react_jsx_runtime.JSX.Element;
type IconAddressBookProps = TablerIconsProps;
declare const IconAddressBook: (props: IconAddressBookProps) => JSX.Element;
@ -353,7 +354,6 @@ declare const IconAddressBook: (props: IconAddressBookProps) => JSX.Element;
declare const SoonPill: () => react_jsx_runtime.JSX.Element;
declare const mainColors: {
yellow: string;
green: string;
turquoise: string;
sky: string;
@ -362,6 +362,7 @@ declare const mainColors: {
pink: string;
red: string;
orange: string;
yellow: string;
gray: string;
};
type ThemeColor = keyof typeof mainColors;
@ -538,24 +539,18 @@ type RoundedIconButtonProps = {
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
declare const RoundedIconButton: ({ Icon, onClick, disabled, }: RoundedIconButtonProps) => react_jsx_runtime.JSX.Element;
declare enum ColorScheme$1 {
Dark = "Dark",
Light = "Light",
System = "System"
}
type ColorScheme = 'Dark' | 'Light' | 'System';
type ColorSchemeSegmentProps = {
variant: `${Lowercase<ColorScheme$1.Dark | ColorScheme$1.Light>}`;
variant: ColorScheme;
controls: AnimationControls;
} & React__default.ComponentPropsWithoutRef<'div'>;
type ColorSchemeCardProps = {
variant: `${Lowercase<ColorScheme$1>}`;
variant: ColorScheme;
selected?: boolean;
} & React__default.ComponentPropsWithoutRef<'div'>;
declare const ColorSchemeCard: ({ variant, selected, onClick, }: ColorSchemeCardProps) => react_jsx_runtime.JSX.Element;
type ColorScheme = 'Dark' | 'Light' | 'System';
type ColorSchemePickerProps = {
value: ColorScheme;
onChange: (value: ColorScheme) => void;
@ -681,4 +676,4 @@ declare module '@emotion/react' {
}
}
export { AnimatedCheckmark, AnimatedCheckmarkProps, AppTooltip, AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, ButtonAccent, ButtonGroup, ButtonGroupProps, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, ColorSchemeCardProps, ColorSchemePicker, ColorSchemePickerProps, ColorSchemeSegmentProps, EntityChip, EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, FloatingButtonGroupProps, FloatingButtonPosition, FloatingButtonProps, FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, FloatingIconButtonGroupProps, FloatingIconButtonPosition, FloatingIconButtonProps, FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, LightButtonAccent, LightButtonProps, LightIconButton, LightIconButtonAccent, LightIconButtonProps, LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, ProgressBarControls, ProgressBarProps, Radio, RadioGroup, RadioProps, RadioSize, RoundedIconButton, SoonPill, Tag, TagColor, TagProps, TooltipPosition, castToTagColor, darkTheme, lightTheme };
export { AnimatedCheckmark, type AnimatedCheckmarkProps, AppTooltip, type AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, type ButtonAccent, ButtonGroup, type ButtonGroupProps, type ButtonPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, type CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, type ColorSchemeCardProps, ColorSchemePicker, type ColorSchemePickerProps, type ColorSchemeSegmentProps, EntityChip, type EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, type EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, type FloatingButtonGroupProps, type FloatingButtonPosition, type FloatingButtonProps, type FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, type FloatingIconButtonGroupProps, type FloatingIconButtonPosition, type FloatingIconButtonProps, type FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, type LightButtonAccent, type LightButtonProps, LightIconButton, type LightIconButtonAccent, type LightIconButtonProps, type LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, type ProgressBarControls, type ProgressBarProps, Radio, RadioGroup, type RadioProps, RadioSize, RoundedIconButton, SoonPill, Tag, type TagColor, type TagProps, TooltipPosition, castToTagColor, darkTheme, lightTheme };

2
docs/src/ui/generated/index.js
View File

File diff suppressed because one or more lines are too long

2
docs/src/ui/input/color-scheme/colorSchemeCardCode.js
View File

@ -3,7 +3,7 @@ import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeC
export const MyComponent = () => {
return (
<ColorSchemeCard
variant="dark"
variant="Dark"
selected={true}
/>
);

8
docs/src/ui/input/components/entityTitleDoubleTextInputCode.js
View File

@ -4,8 +4,12 @@ import { EntityTitleDoubleTextInput } from "@/ui/input/components/EntityTitleDou
export const MyComponent = () => {
const [firstValue, setFirstValue] = useState("First Value");
const [secondValue, setSecondValue] = useState("This is a long long test text");
const [firstValue, setFirstValue] = useState(
"First Value"
);
const [secondValue, setSecondValue] = useState(
"Second Value"
);
const handleInputChange = (newFirstValue, newSecondValue) => {
setFirstValue(newFirstValue);

11
front/src/modules/ui/input/color-scheme/components/ColorSchemeCard.tsx
View File

@ -8,21 +8,19 @@ import {
} from 'framer-motion';
import { Checkmark } from '@/ui/display/checkmark/components/Checkmark';
import DarkNoise from '@/ui/theme/assets/dark-noise.jpg';
import LightNoise from '@/ui/theme/assets/light-noise.png';
import { ColorScheme } from '@/workspace-member/types/WorkspaceMember';
const StyledColorSchemeBackground = styled.div<
Pick<ColorSchemeCardProps, 'variant'>
>`
align-items: flex-end;
background: ${({ variant }) => {
background: ${({ variant, theme }) => {
switch (variant) {
case 'Dark':
return `url(${DarkNoise.toString()});`;
return theme.grayScale.gray75;
case 'Light':
default:
return `url(${LightNoise.toString()});`;
return theme.grayScale.gray15;
}
}};
border: ${({ variant, theme }) => {
@ -119,15 +117,16 @@ const ColorSchemeSegment = ({
const StyledContainer = styled.div`
position: relative;
width: 120px;
`;
const StyledMixedColorSchemeSegment = styled.div`
border-radius: ${({ theme }) => theme.border.radius.md};
cursor: pointer;
display: flex;
display: flex;
height: 80px;
overflow: hidden;
position: relative;
width: 120px;
`;

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

@ -26,7 +26,7 @@ const StyledContainer = styled.div<{ labelPosition?: LabelPosition }>`
flex-direction: row;
`};
align-items: center;
display: flex;
display: inline-flex;
`;
type RadioInputProps = {

26
front/src/modules/ui/utilities/dimensions/components/ComputeNodeDimensions.tsx
View File

@ -1,4 +1,4 @@
import { ReactNode, useEffect, useRef, useState } from 'react';
import { ReactNode, useLayoutEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
type ComputeNodeDimensionsProps = {
@ -27,18 +27,26 @@ export const ComputeNodeDimensions = ({
| undefined
>(undefined);
useEffect(() => {
nodeWrapperRef.current &&
setNodeDimensions({
width: nodeWrapperRef.current.offsetWidth,
height: nodeWrapperRef.current.offsetHeight,
});
}, [node]);
useLayoutEffect(() => {
if (!nodeWrapperRef.current) {
return;
}
const resizeObserver = new ResizeObserver(() => {
if (nodeWrapperRef.current) {
setNodeDimensions({
width: nodeWrapperRef.current.offsetWidth,
height: nodeWrapperRef.current.offsetHeight,
});
}
});
resizeObserver.observe(nodeWrapperRef.current);
return () => resizeObserver.disconnect();
}, [nodeWrapperRef]);
return (
<>
<StyledNodeWrapper ref={nodeWrapperRef}>{node}</StyledNodeWrapper>
{children(nodeDimensions)}
{nodeDimensions && children(nodeDimensions)}
</>
);
};