fix(sdds-insol): tokens for Autocomplete, Select, Combobox updated

salute-developers · Dec 26, 2024 · 4ecc711 · 4ecc711
1 parent 3e7435c
commit 4ecc711
Show file tree

Hide file tree

Showing 40 changed files with 632 additions and 405 deletions.
diff --git a/...ents/Select/Select.component-test.tsx/plasma-b2c Select -- basic logic.snap.png b/...ents/Select/Select.component-test.tsx/plasma-b2c Select -- basic logic.snap.png
diff --git a/...mponents/Select/Select.component-test.tsx/plasma-b2c Select -- default.snap.png b/...mponents/Select/Select.component-test.tsx/plasma-b2c Select -- default.snap.png
diff --git a/...ct/Select.component-test.tsx/plasma-b2c Select -- prop chipView accent.snap.png b/...ct/Select.component-test.tsx/plasma-b2c Select -- prop chipView accent.snap.png
diff --git a/...Select.component-test.tsx/plasma-b2c Select -- prop chipView secondary.snap.png b/...Select.component-test.tsx/plasma-b2c Select -- prop chipView secondary.snap.png
diff --git a/...Select/Select.component-test.tsx/plasma-b2c Select -- prop contentLeft.snap.png b/...Select/Select.component-test.tsx/plasma-b2c Select -- prop contentLeft.snap.png
diff --git a/...ect/Select.component-test.tsx/plasma-b2c Select -- prop isTargetAmount.snap.png b/...ect/Select.component-test.tsx/plasma-b2c Select -- prop isTargetAmount.snap.png
diff --git a/...ect/Select.component-test.tsx/plasma-b2c Select -- prop labelPlacement.snap.png b/...ect/Select.component-test.tsx/plasma-b2c Select -- prop labelPlacement.snap.png
diff --git a/...Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png b/...Select/Select.component-test.tsx/plasma-b2c Select -- prop renderValue.snap.png
diff --git a/...ents/Select/Select.component-test.tsx/plasma-b2c Select -- prop size l.snap.png b/...ents/Select/Select.component-test.tsx/plasma-b2c Select -- prop size l.snap.png
diff --git a/...ents/Select/Select.component-test.tsx/plasma-b2c Select -- prop size m.snap.png b/...ents/Select/Select.component-test.tsx/plasma-b2c Select -- prop size m.snap.png
diff --git a/...ents/Select/Select.component-test.tsx/plasma-b2c Select -- prop size s.snap.png b/...ents/Select/Select.component-test.tsx/plasma-b2c Select -- prop size s.snap.png
diff --git a/...nts/Select/Select.component-test.tsx/plasma-b2c Select -- prop size xs.snap.png b/...nts/Select/Select.component-test.tsx/plasma-b2c Select -- prop size xs.snap.png
diff --git a/...ents/Select/Select.component-test.tsx/plasma-web Select -- basic logic.snap.png b/...ents/Select/Select.component-test.tsx/plasma-web Select -- basic logic.snap.png
diff --git a/...mponents/Select/Select.component-test.tsx/plasma-web Select -- default.snap.png b/...mponents/Select/Select.component-test.tsx/plasma-web Select -- default.snap.png
diff --git a/...ct/Select.component-test.tsx/plasma-web Select -- prop chipView accent.snap.png b/...ct/Select.component-test.tsx/plasma-web Select -- prop chipView accent.snap.png
diff --git a/...Select.component-test.tsx/plasma-web Select -- prop chipView secondary.snap.png b/...Select.component-test.tsx/plasma-web Select -- prop chipView secondary.snap.png
diff --git a/...Select/Select.component-test.tsx/plasma-web Select -- prop contentLeft.snap.png b/...Select/Select.component-test.tsx/plasma-web Select -- prop contentLeft.snap.png
diff --git a/...ect/Select.component-test.tsx/plasma-web Select -- prop isTargetAmount.snap.png b/...ect/Select.component-test.tsx/plasma-web Select -- prop isTargetAmount.snap.png
diff --git a/...ect/Select.component-test.tsx/plasma-web Select -- prop labelPlacement.snap.png b/...ect/Select.component-test.tsx/plasma-web Select -- prop labelPlacement.snap.png
diff --git a/...Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png b/...Select/Select.component-test.tsx/plasma-web Select -- prop renderValue.snap.png
diff --git a/...ents/Select/Select.component-test.tsx/plasma-web Select -- prop size l.snap.png b/...ents/Select/Select.component-test.tsx/plasma-web Select -- prop size l.snap.png
diff --git a/...ents/Select/Select.component-test.tsx/plasma-web Select -- prop size m.snap.png b/...ents/Select/Select.component-test.tsx/plasma-web Select -- prop size m.snap.png
diff --git a/...ents/Select/Select.component-test.tsx/plasma-web Select -- prop size s.snap.png b/...ents/Select/Select.component-test.tsx/plasma-web Select -- prop size s.snap.png
diff --git a/...nts/Select/Select.component-test.tsx/plasma-web Select -- prop size xs.snap.png b/...nts/Select/Select.component-test.tsx/plasma-web Select -- prop size xs.snap.png
diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.styles.ts b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.styles.ts
@@ -36,7 +36,7 @@ export const Ul = styled.ul<{
     overflow-y: scroll;
     border: var(${tokens.dropdownBorderWidth}) solid var(${tokens.dropdownBorderColor});
 
-    margin: 0;
+    margin: var(${tokens.margin}) 0 0 0;
     padding: var(${tokens.padding});
 `;
 

diff --git a/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts b/packages/plasma-new-hope/src/components/Autocomplete/Autocomplete.tokens.ts
@@ -110,11 +110,14 @@ export const tokens = {
         '--plasma-autocomplete-textfield-clear-indicator-label-placement-inner-right',
     textFieldClearIndicatorHintInnerRight: '--plasma-autocomplete-textfield-clear-indicator-hint-placement-inner-right',
 
+    textFieldBoxShadow: '--plasma-autocomplete-textfield-box-shadow',
+
     // Токены для дропдауна
     background: '--plasma-autocomplete-background',
     boxShadow: '--plasma-autocomplete-box-shadow',
     borderRadius: '--plasma-autocomplete-border-radius',
     padding: '--plasma-autocomplete-padding',
+    margin: '--plasma-autocomplete-margin',
 
     dropdownBorderColor: '--plasma-select-dropdown-border-color',
     dropdownBorderWidth: '--plasma-select-dropdown-border-width',

diff --git a/packages/plasma-new-hope/src/components/Autocomplete/ui/TextField/TextField.styles.ts b/packages/plasma-new-hope/src/components/Autocomplete/ui/TextField/TextField.styles.ts
@@ -91,4 +91,5 @@ export const StyledTextField = styled(TextField)`
     ${textFieldTokens.clearIndicatorLabelPlacementInner}: var(${autocompleteTokens.textFieldClearIndicatorLabelPlacementInner});
     ${textFieldTokens.clearIndicatorLabelPlacementInnerRight}: var(${autocompleteTokens.textFieldClearIndicatorLabelPlacementInnerRight});
     ${textFieldTokens.clearIndicatorHintInnerRight}: var(${autocompleteTokens.textFieldClearIndicatorHintInnerRight});
+    ${textFieldTokens.boxShadow}: var(${autocompleteTokens.textFieldBoxShadow});
 `;
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
@@ -28,7 +28,8 @@ export const Ul = styled.ul<{
     overflow: ${({ listOverflow }) => listOverflow || 'initial'};
 
     border: var(${tokens.dropdownBorderWidth}) solid var(${tokens.dropdownBorderColor});
-    margin: ${({ isInnerUl }) => (isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 0` : 0)};
+    margin: ${({ isInnerUl }) =>
+        isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 0` : `var(${tokens.margin}) 0 0 0`};
     padding: var(${tokens.padding}) 0;
 
     .${classes.emptyStateWrapper} {

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
@@ -15,6 +15,7 @@ export const classes = {
 export const tokens = {
     borderRadius: '--plasma-combobox-border-radius',
     padding: '--plasma-combobox-padding',
+    margin: '--plasma-combobox-margin',
     focusOffset: '--plasma-combobox-focus-offset',
 
     fontFamily: '--plasma-combobox-font-family',
@@ -191,6 +192,8 @@ export const tokens = {
 
     textFieldFocusColor: '--plasma-combobox-new-textfield-focus-color',
 
+    textFieldBoxShadow: '--plasma-select-textfield-box-shadow',
+
     textFieldIndicatorColor: '--plasma-combobox-new-textfield-indicator-color',
     textFieldIndicatorSizeInner: '--plasma-combobox-new-textfield-indicator-size-inner',
     textFieldIndicatorSizeOuter: '--plasma-combobox-new-textfield-indicator-size-outer',

diff --git a/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts b/packages/plasma-new-hope/src/components/Combobox/ComboboxNew/ui/Target/Target.styles.ts
@@ -149,4 +149,5 @@ export const StyledTextField = styled(TextField)`
     ${textFieldTokens.clearIndicatorLabelPlacementInner}: var(${comboboxTokens.textFieldClearIndicatorLabelPlacementInner});
     ${textFieldTokens.clearIndicatorLabelPlacementInnerRight}: var(${comboboxTokens.textFieldClearIndicatorLabelPlacementInnerRight});
     ${textFieldTokens.clearIndicatorHintInnerRight}: var(${comboboxTokens.textFieldClearIndicatorHintInnerRight});
+    ${textFieldTokens.boxShadow}: var(${comboboxTokens.textFieldBoxShadow});
 `;
diff --git a/packages/plasma-new-hope/src/components/Select/Select.styles.ts b/packages/plasma-new-hope/src/components/Select/Select.styles.ts
@@ -22,7 +22,8 @@ export const Ul = styled.ul<{
     max-height: ${({ listHeight }) => (listHeight ? getCorrectHeight(listHeight) : 'auto')};
     overflow: ${({ listOverflow }) => listOverflow || 'initial'};
 
-    margin: ${({ isInnerUl }) => (isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 0` : 0)};
+    margin: ${({ isInnerUl }) =>
+        isInnerUl ? `calc(var(${tokens.padding}) * -1) 0 0 0` : `var(${tokens.margin}) 0 0 0`};
     padding: calc(var(${tokens.padding}) + var(${tokens.dropdownBorderWidth}, 0rem)) 0;
 `;
 

diff --git a/packages/plasma-new-hope/src/components/Select/Select.tokens.ts b/packages/plasma-new-hope/src/components/Select/Select.tokens.ts
@@ -12,6 +12,7 @@ export const classes = {
 
 export const tokens = {
     borderRadius: '--plasma-select-border-radius',
+    margin: '--plasma-select-margin',
     padding: '--plasma-select-padding',
 
     fontFamily: '--plasma-select-font-family',
@@ -197,6 +198,8 @@ export const tokens = {
 
     textFieldFocusColor: '--plasma-select-textfield-focus-color',
 
+    textFieldBoxShadow: '--plasma-select-textfield-box-shadow',
+
     disclosureIconColor: '--plasma-select-disclosure-icon-color',
     disclosureIconColorHover: '--plasma-select-disclosure-icon-color-hover',
 };

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
@@ -24,7 +24,7 @@ export const StyledButton = styled(Button)<{ renderTarget: boolean }>`
     ${buttonTokens.buttonFontFamily}: var(${tokens.fontFamily});
     ${buttonTokens.buttonFontSize}: var(${tokens.fontSize});
     ${buttonTokens.buttonFontStyle}: var(${tokens.fontStyle});
-    ${buttonTokens.buttonFontWeight}: 600;
+    ${buttonTokens.buttonFontWeight}: var(${tokens.fontWeight});
     ${buttonTokens.buttonLetterSpacing}: var(${tokens.fontLetterSpacing});
     ${buttonTokens.buttonLineHeight}: var(${tokens.fontLineHeight});
     ${buttonTokens.buttonDisabledOpacity}: ${constants.opacity};

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
@@ -145,6 +145,8 @@ export const StyledTextField = styled(TextField)<{ opened: boolean }>`
 
     ${textFieldTokens.focusColor}: var(${tokens.textFieldFocusColor});
 
+    ${textFieldTokens.boxShadow}: var(${tokens.textFieldBoxShadow});
+
     /* TODO: #1544 */
     & div.input-wrapper:focus-within {
         background-color: var(${tokens.textFieldBackgroundColorFocus});