fix(plasma-new-hope, sdds-insol): icon tokens updated

salute-developers · Dec 27, 2024 · 352af87 · 352af87
1 parent f6196be
commit 352af87
Show file tree

Hide file tree

Showing 14 changed files with 132 additions and 23 deletions.
diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.styles.ts
@@ -53,7 +53,16 @@ export const IconArrowWrapper = styled.div<{ disabled: boolean }>`
     }
 `;
 
-export const StyledArrow = styled(IconDisclosureDownCentered)``;
+// TODO: Удалить после поддержки JS переменных в конфиге компонент
+export const sizeMap: Record<string, string> = {
+    xs: '1rem',
+    s: '1.5rem',
+};
+
+export const StyledArrow = styled(IconDisclosureDownCentered)`
+    width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+    height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+`;
 
 export const base = css``;
 

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tokens.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/Combobox.tokens.ts
@@ -221,6 +221,8 @@ export const tokens = {
 
     disclosureIconColor: '--plasma-combobox-disclosure-icon-color',
     disclosureIconColorHover: '--plasma-combobox-disclosure-icon-color-hover',
+    disclosureIconSize: '--plasma-select-disclosure-icon-size',
+    disclosureIconMargin: '--plasma-select-disclosure-icon-margin',
 };
 
 export const constants = {

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.styles.ts
@@ -7,6 +7,7 @@ import { checkboxConfig, checkboxTokens } from '../../../../../../Checkbox';
 import { indicatorConfig, indicatorTokens } from '../../../../../../Indicator';
 import { cellConfig, cellTokens } from '../../../../../../Cell';
 import type { ComboboxProps } from '../../../../Combobox.types';
+import { IconDisclosureRightCentered, IconDone } from '../../../../../../_Icon';
 
 const mergedCheckboxConfig = mergeConfig(checkboxConfig);
 const Checkbox = component(mergedCheckboxConfig);
@@ -50,6 +51,22 @@ export const StyledIndicator = styled(Indicator)`
     ${indicatorTokens.color}: var(${tokens.checkboxFillColor});
 `;
 
+// TODO: Удалить после поддержки JS переменных в конфиге компонент
+export const sizeMap: Record<string, string> = {
+    xs: '1rem',
+    s: '1.5rem',
+};
+
+export const StyledArrow = styled(IconDisclosureRightCentered)`
+    width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+    height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+`;
+
+export const StyledIconDone = styled(IconDone)`
+    width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+    height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+`;
+
 export const StyledContentLeft = styled.div`
     display: inline-flex;
 `;
@@ -61,6 +78,7 @@ export const StyledContentRight = styled.div`
 
 export const DisclosureIconWrapper = styled.div`
     line-height: 0;
+    margin: var(${tokens.disclosureIconMargin});
     color: var(${tokens.disclosureIconColor});
 
     &:hover {

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Inner/ui/Item/Item.tsx
@@ -3,7 +3,6 @@ import React, { useRef, FC, useContext } from 'react';
 import { sizeToIconSize, getItemId } from '../../../../utils';
 import { classes } from '../../../../Combobox.tokens';
 import { cx, isEmpty } from '../../../../../../../utils';
-import { IconDisclosureRightCentered, IconDone } from '../../../../../../_Icon';
 import { Context } from '../../../../Combobox.context';
 import { useDidMountEffect } from '../../../../../../../hooks';
 
@@ -18,6 +17,8 @@ import {
     StyledIndicator,
     StyledCheckboxWrapper,
     StyledCell,
+    StyledIconDone,
+    StyledArrow,
 } from './Item.styles';
 
 export const Item: FC<ItemProps> = ({
@@ -110,7 +111,7 @@ export const Item: FC<ItemProps> = ({
                 {!multiple && checked.get(item.value) === 'dot' && <StyledIndicator size="s" view="default" />}
 
                 {!multiple && checked.get(item.value) === 'done' && (
-                    <IconDone size={sizeToIconSize(size, variant)} color="inherit" />
+                    <StyledIconDone size={sizeToIconSize(size, variant)} color="inherit" />
                 )}
             </IconWrapper>
 
@@ -132,7 +133,7 @@ export const Item: FC<ItemProps> = ({
 
             {!isEmpty(item.items) && (
                 <DisclosureIconWrapper>
-                    <IconDisclosureRightCentered size={sizeToIconSize(size, variant)} color="inherit" />
+                    <StyledArrow size={sizeToIconSize(size, variant)} color="inherit" />
                 </DisclosureIconWrapper>
             )}
         </Wrapper>

diff --git a/packages/plasma-new-hope/src/components/Select/Select.tokens.ts b/packages/plasma-new-hope/src/components/Select/Select.tokens.ts
@@ -202,6 +202,8 @@ export const tokens = {
 
     disclosureIconColor: '--plasma-select-disclosure-icon-color',
     disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover',
+    disclosureIconSize: '--plasma-select-disclosure-icon-size',
+    disclosureIconMargin: '--plasma-select-disclosure-icon-margin',
 };
 
 export const constants = {

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts
@@ -7,6 +7,7 @@ import { checkboxConfig, checkboxTokens } from '../../../../../Checkbox';
 import { cellConfig, cellTokens } from '../../../../../Cell';
 import { indicatorConfig, indicatorTokens } from '../../../../../Indicator';
 import type { SelectProps } from '../../../../Select.types';
+import { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon';
 
 const mergedCheckboxConfig = mergeConfig(checkboxConfig);
 const Checkbox = component(mergedCheckboxConfig);
@@ -70,7 +71,24 @@ export const StyledIndicator = styled(Indicator)`
     ${indicatorTokens.color}: var(${tokens.checkboxFillColor});
 `;
 
+// TODO: Удалить после поддержки JS переменных в конфиге компонент
+export const sizeMap: Record<string, string> = {
+    xs: '1rem',
+    s: '1.5rem',
+};
+
+export const StyledArrow = styled(IconDisclosureRightCentered)`
+    width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+    height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+`;
+
+export const StyledIconDone = styled(IconDone)`
+    width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+    height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+`;
+
 export const DisclosureIconWrapper = styled.div`
+    margin: var(${tokens.disclosureIconMargin});
     line-height: 0;
     color: var(${tokens.disclosureIconColor});
 

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx
@@ -3,7 +3,6 @@ import React, { useRef, FC, useContext } from 'react';
 import { sizeToIconSize, getItemId } from '../../../../utils';
 import { classes } from '../../../../Select.tokens';
 import { cx, isEmpty } from '../../../../../../utils';
-import { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon';
 import { Context } from '../../../../Select.context';
 import { useDidMountEffect } from '../../../../../../hooks';
 
@@ -18,6 +17,8 @@ import {
     StyledText,
     Wrapper,
     StyledCheckboxWrapper,
+    StyledArrow,
+    StyledIconDone,
 } from './Item.styles';
 
 export const Item: FC<ItemProps> = ({
@@ -111,7 +112,7 @@ export const Item: FC<ItemProps> = ({
                 {!multiselect && checked.get(item.value) === 'dot' && <StyledIndicator size="s" view="default" />}
 
                 {!multiselect && checked.get(item.value) === 'done' && (
-                    <IconDone size={sizeToIconSize(size, variant)} color="inherit" />
+                    <StyledIconDone size={sizeToIconSize(size, variant)} color="inherit" />
                 )}
             </IconWrapper>
 
@@ -132,7 +133,7 @@ export const Item: FC<ItemProps> = ({
 
             {!isEmpty(item.items) && (
                 <DisclosureIconWrapper>
-                    <IconDisclosureRightCentered size={sizeToIconSize(size, variant)} color="inherit" />
+                    <StyledArrow size={sizeToIconSize(size, variant)} color="inherit" />
                 </DisclosureIconWrapper>
             )}
         </Wrapper>

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Button/Button.styles.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Button/Button.styles.tsx
@@ -45,10 +45,19 @@ export const IconArrowWrapper = styled.div`
     }
 `;
 
+// TODO: Удалить после поддержки JS переменных в конфиге компонент
+export const sizeMap: Record<string, string> = {
+    xs: '1rem',
+    s: '1.5rem',
+};
+
 export const StyledArrow = styled(IconDisclosureDownCentered)`
     transition: color 0.3s ease-in, transform 0.15s ease-in;
     pointer-events: none;
     user-select: none;
+
+    width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+    height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
 `;
 
 export const ButtonWrapper = styled.div`

diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.styles.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/ui/Textfield/Textfield.styles.tsx
@@ -169,4 +169,13 @@ export const IconArrowWrapper = styled.div<{ disabled: boolean }>`
     }
 `;
 
-export const StyledArrow = styled(IconDisclosureDownCentered)``;
+// TODO: Удалить после поддержки JS переменных в конфиге компонент
+export const sizeMap: Record<string, string> = {
+    xs: '1rem',
+    s: '1.5rem',
+};
+
+export const StyledArrow = styled(IconDisclosureDownCentered)`
+    width: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+    height: ${({ size = 'xs' }) => `var(${tokens.disclosureIconSize}, ${sizeMap[size]})`};
+`;
diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownCentered.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownCentered.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 
 import { DisclosureDownCentered } from '../Icon.assets/DisclosureDownCentered';
 import { IconRoot, IconProps } from '../IconRoot';
 
-export const IconDisclosureDownCentered: React.FC<IconProps> = ({ size = 'xs', color, className }) => {
-    return <IconRoot className={className} size={size} color={color} icon={DisclosureDownCentered} />;
+export const IconDisclosureDownCentered: React.FC<IconProps & HTMLAttributes<HTMLDivElement>> = ({
+    size = 'xs',
+    color,
+    className,
+    ...rest
+}) => {
+    return <IconRoot className={className} size={size} color={color} icon={DisclosureDownCentered} {...rest} />;
 };
diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureRightCentered.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureRightCentered.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 
 import { DisclosureRightCentered } from '../Icon.assets/DisclosureRightCentered';
 import { IconRoot, IconProps } from '../IconRoot';
 
-export const IconDisclosureRightCentered: React.FC<IconProps> = ({ size = 's', color, className }) => {
-    return <IconRoot className={className} size={size} color={color} icon={DisclosureRightCentered} />;
+export const IconDisclosureRightCentered: React.FC<IconProps & HTMLAttributes<HTMLDivElement>> = ({
+    size = 's',
+    color,
+    className,
+    ...rest
+}) => {
+    return <IconRoot className={className} size={size} color={color} icon={DisclosureRightCentered} {...rest} />;
 };
diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDone.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDone.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 
 import { Done } from '../Icon.assets/Done';
 import { IconRoot, IconProps } from '../IconRoot';
 
-export const IconDone: React.FC<IconProps> = ({ size = 's', color, className }) => {
-    return <IconRoot className={className} size={size} color={color} icon={Done} />;
+export const IconDone: React.FC<IconProps & HTMLAttributes<HTMLDivElement>> = ({
+    size = 's',
+    color,
+    className,
+    ...rest
+}) => {
+    return <IconRoot className={className} size={size} color={color} icon={Done} {...rest} />;
 };
diff --git a/packages/sdds-insol/src/components/Combobox/Combobox.config.ts b/packages/sdds-insol/src/components/Combobox/Combobox.config.ts
@@ -311,6 +311,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
 
                 ${tokens.indicatorSize}: 0.375rem;
+
+                ${tokens.disclosureIconSize}: 1.5rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.625rem;
             `,
             m: css`
                 ${tokens.textFieldHeight}: 3rem;
@@ -393,8 +396,8 @@ export const config = {
                 ${tokens.itemPaddingTight}: 0.5rem 0.875rem;
                 ${tokens.itemBorderRadius}: 0.625rem;
                 ${tokens.itemIconMargin}: 0 0.625rem 0 0;
-                ${tokens.itemIconSize}: 1.5rem;
-                ${tokens.itemIconSizeTight}: 1.5rem;
+                ${tokens.itemIconSize}: 1.25rem;
+                ${tokens.itemIconSizeTight}: 1.25rem;
 
                 ${tokens.cellPadding}: 0rem;
                 ${tokens.cellPaddingLeftContent}: 0rem;
@@ -425,6 +428,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
 
                 ${tokens.indicatorSize}: 0.375rem;
+
+                ${tokens.disclosureIconSize}: 1.25rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.625rem;
             `,
             s: css`
                 ${tokens.textFieldHeight}: 2.5rem;
@@ -506,7 +512,7 @@ export const config = {
                 ${tokens.itemPadding}: 0.5rem 0.625rem;
                 ${tokens.itemPaddingTight}: 0.5rem 0.625rem;
                 ${tokens.itemBorderRadius}: 0.5rem;
-                ${tokens.itemIconSize}: 1.5rem;
+                ${tokens.itemIconSize}: 1rem;
                 ${tokens.itemIconSizeTight}: 1rem;
                 ${tokens.itemIconMargin}: 0 0.5rem 0 0;
 
@@ -539,6 +545,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
 
                 ${tokens.indicatorSize}: 0.375rem;
+
+                ${tokens.disclosureIconSize}: 1rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.5rem;
             `,
             xs: css`
                 ${tokens.textFieldHeight}: 2rem;
@@ -653,6 +662,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
 
                 ${tokens.indicatorSize}: 0.375rem;
+
+                ${tokens.disclosureIconSize}: 1rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.375rem;
             `,
         },
         labelPlacement: {

diff --git a/packages/sdds-insol/src/components/Select/Select.config.ts b/packages/sdds-insol/src/components/Select/Select.config.ts
@@ -381,6 +381,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
 
                 ${tokens.indicatorSize}: 0.375rem;
+
+                ${tokens.disclosureIconSize}: 1.5rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.625rem;
             `,
             m: css`
                 ${tokens.textFieldHeight}: 3rem;
@@ -466,8 +469,8 @@ export const config = {
                 ${tokens.itemPaddingTight}: 0.5rem 0.875rem;
                 ${tokens.itemBorderRadius}: 0.625rem;
                 ${tokens.itemIconMargin}: 0 0.625rem 0 0;
-                ${tokens.itemIconSize}: 1.5rem;
-                ${tokens.itemIconSizeTight}: 1.5rem;
+                ${tokens.itemIconSize}: 1.25rem;
+                ${tokens.itemIconSizeTight}: 1.25rem;
 
                 ${tokens.cellPadding}: 0rem;
                 ${tokens.cellPaddingLeftContent}: 0rem;
@@ -498,6 +501,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
 
                 ${tokens.indicatorSize}: 0.375rem;
+
+                ${tokens.disclosureIconSize}: 1.25rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.625rem;
             `,
             s: css`
                 ${tokens.textFieldHeight}: 2.5rem;
@@ -582,7 +588,7 @@ export const config = {
                 ${tokens.itemPadding}: 0.5rem 0.625rem;
                 ${tokens.itemPaddingTight}: 0.5rem 0.625rem;
                 ${tokens.itemBorderRadius}: 0.5rem;
-                ${tokens.itemIconSize}: 1.5rem;
+                ${tokens.itemIconSize}: 1rem;
                 ${tokens.itemIconSizeTight}: 1rem;
                 ${tokens.itemIconMargin}: 0 0.5rem 0 0;
 
@@ -615,6 +621,10 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
 
                 ${tokens.indicatorSize}: 0.375rem;
+
+                ${tokens.disclosureIconSize}: 1rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.625rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.5rem;
             `,
             xs: css`
                 ${tokens.textFieldHeight}: 2rem;
@@ -732,6 +742,9 @@ export const config = {
                 ${tokens.checkboxTriggerBorderColor}: var(--text-secondary);
 
                 ${tokens.indicatorSize}: 0.375rem;
+
+                ${tokens.disclosureIconSize}: 1rem;
+                ${tokens.disclosureIconMargin}: 0 0 0 0.375rem;
             `,
         },
         labelPlacement: {