diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tokens.ts b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tokens.ts index 2a64f697470..26de92c7cd9 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tokens.ts +++ b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tokens.ts @@ -4,6 +4,7 @@ export const classes = { dropdownItemIsDisabled: 'dropdown-item-is-disabled', dropdownItemIsActive: 'dropdown-item-is-active', dropdownItemIsSelected: 'dropdown-item-is-selected', + dropdownItemNegative: 'dropdown-item-negative', }; export const tokens = { @@ -76,6 +77,8 @@ export const tokens = { cellTitleLetterSpacing: '--plasma-dropdown-cell-title-letter-spacing', cellTitleLineHeight: '--plasma-dropdown-cell-title-line-height', + cellTitleColorNegative: '--plasma-dropdown-cell-title-color-negative', + // TODO: Remove below tokens as soon as they are no longer needed footerBackground: '--plasma-dropdown-footer-background', footerWidth: '--plasma-dropdown-footer-width', diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts index 0192022aa1d..d3cb0b99c4e 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts +++ b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts @@ -64,6 +64,11 @@ export type ItemOption = { * Скрытие элемента, а также всех его дочерних элементов. */ hidden?: boolean; + /** + * Вид элемента выпадающего списка. + * @default default + */ + view?: 'default' | 'negative'; }; export type DropdownProps = { diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.styles.ts b/packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.styles.ts index e1a9a9f617f..992f495e866 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.styles.ts +++ b/packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.styles.ts @@ -26,6 +26,10 @@ export const CellWrapper = styled.div` ${cellTokens.cellTitleLetterSpacing}: var(${tokens.cellTitleLetterSpacing}); ${cellTokens.cellTitleLineHeight}: var(${tokens.cellTitleLineHeight}); width: 100%; + + &.${classes.dropdownItemNegative} { + ${cellTokens.cellTitleColor}: var(${tokens.cellTitleColorNegative}); + } `; export const StyledCell = styled(Cell)``; diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.tsx index 555eb2452f5..ae747f0d551 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.tsx +++ b/packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.tsx @@ -26,7 +26,18 @@ export const Item: FC = ({ ariaLevel, ariaLabel, }) => { - const { value, label, disabled, contentLeft, contentRight, dividerBefore, dividerAfter, className, ...rest } = item; + const { + value, + label, + disabled, + contentLeft, + contentRight, + dividerBefore, + dividerAfter, + className, + view = 'default', + ...rest + } = item; const ref = useRef(null); @@ -51,6 +62,10 @@ export const Item: FC = ({ ? classes.dropdownItemIsFocused : undefined; const activeClass = value === path?.[currentLevel + 1] ? classes.dropdownItemIsActive : undefined; + const dropdownViewClass = { + default: '', + negative: classes.dropdownItemNegative, + }; useEffect(() => { if (focusedClass && ref?.current) { @@ -106,7 +121,7 @@ export const Item: FC = ({ {renderItem ? ( {renderItem(item)} ) : ( - + ; }; disablePropsList?: string[]; + additionalArgTypes?: {}; defaultArgs?: {}; }; diff --git a/utils/plasma-sb-utils/src/components/Dropdown/fixtures.ts b/utils/plasma-sb-utils/src/components/Dropdown/fixtures.ts index 3d2808f1ca9..8fb8a495ea4 100644 --- a/utils/plasma-sb-utils/src/components/Dropdown/fixtures.ts +++ b/utils/plasma-sb-utils/src/components/Dropdown/fixtures.ts @@ -60,6 +60,7 @@ export const items = [ label: 'Европа', dividerBefore: true, dividerAfter: true, + view: 'negative', items: [ { value: 'france', @@ -106,10 +107,12 @@ export const items = [ { value: 'spain', label: 'Испания', + view: 'negative', items: [ { value: 'madrid', label: 'Мадрид', + view: 'negative', }, { value: 'barcelona',