Skip to content

PLASMA-7765: add negative view #3138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TitanKuzmich wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

PLASMA-7765: add negative view #3138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/plasma-new-hope/src/components/Dropdown/Dropdown.tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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',
Expand Down
5 changes: 5 additions & 0 deletions packages/plasma-new-hope/src/components/Dropdown/Dropdown.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,11 @@ export type ItemOption = {
* Скрытие элемента, а также всех его дочерних элементов.
*/
hidden?: boolean;
/**
* Вид элемента выпадающего списка.
* @default default
*/
view?: 'default' | 'negative';
};

export type DropdownProps<T extends ItemOption = ItemOption> = {
Expand Down
4 changes: 4 additions & 0 deletions packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)``;
Expand Down
19 changes: 17 additions & 2 deletions packages/plasma-new-hope/src/components/Dropdown/ui/Inner/ui/Item/Item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,18 @@ export const Item: FC<DropdownItemProps> = ({
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<HTMLLIElement | null>(null);

Expand All @@ -51,6 +62,10 @@ export const Item: FC<DropdownItemProps> = ({
? classes.dropdownItemIsFocused
: undefined;
const activeClass = value === path?.[currentLevel + 1] ? classes.dropdownItemIsActive : undefined;
const dropdownViewClass = {
default: '',
negative: classes.dropdownItemNegative,
};

useEffect(() => {
if (focusedClass && ref?.current) {
Expand Down Expand Up @@ -106,7 +121,7 @@ export const Item: FC<DropdownItemProps> = ({
{renderItem ? (
<RenderItemWrapper>{renderItem(item)}</RenderItemWrapper>
) : (
<CellWrapper>
<CellWrapper className={cls(dropdownViewClass[view])}>
<StyledCell
contentLeft={contentLeft}
contentRight={contentRight}
Expand Down
3 changes: 3 additions & 0 deletions packages/sdds-finai/src/components/Dropdown/Dropdown.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
bodyXS,
surfaceTransparentSecondary,
surfaceTransparentTertiary,
textNegative,
} from '@salutejs/sdds-themes/tokens/sdds_finai';

export const config = {
Expand Down Expand Up @@ -130,6 +131,8 @@ export const config = {
default: css`
${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};
${tokens.dividerColor}: ${surfaceTransparentTertiary};

${tokens.cellTitleColorNegative}: ${textNegative};
`,
},
},
Expand Down
1 change: 1 addition & 0 deletions utils/plasma-sb-utils/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ type CreateStoriesProps = {
Button: React.ComponentType<any>;
};
disablePropsList?: string[];
additionalArgTypes?: {};
defaultArgs?: {};
};

Expand Down
3 changes: 3 additions & 0 deletions utils/plasma-sb-utils/src/components/Dropdown/fixtures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export const items = [
label: 'Европа',
dividerBefore: true,
dividerAfter: true,
view: 'negative',
items: [
{
value: 'france',
Expand Down Expand Up @@ -106,10 +107,12 @@ export const items = [
{
value: 'spain',
label: 'Испания',
view: 'negative',
items: [
{
value: 'madrid',
label: 'Мадрид',
view: 'negative',
},
{
value: 'barcelona',
Expand Down
Loading