Skip to content

Commit

Permalink
fix(sdds-cs): fix dropdown sizes and token values
Browse files Browse the repository at this point in the history
  • Loading branch information
@denivladislav
denivladislav committed Jan 21, 2025
1 parent 3b48337 commit 4ce6892
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 124 deletions.
135 changes: 14 additions & 121 deletions packages/sdds-cs/src/components/Dropdown/Dropdown.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,63 +3,29 @@ import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-
export const config = {
defaults: {
view: 'default',
size: 'm',
size: 's',
},
variations: {
size: {
l: css`
${tokens.padding}: 0.125rem;
${tokens.width}: 17.5rem;
${tokens.borderRadius}: 0.875rem;
s: css`
${tokens.padding}: 0rem;
${tokens.width}: 12.5rem;
${tokens.borderRadius}: 0.625rem;
${tokens.borderWidth}: 0.125rem;
${tokens.itemHeight}: 1.5rem;
${tokens.itemPadding}: 1rem 1.125rem;
${tokens.itemPaddingTight}: 0.75rem 1.125rem;
${tokens.dividerMarginTop}: 0.5rem;
${tokens.dividerMarginRight}: 1.125rem;
${tokens.dividerMarginBottom}: 0.5rem;
${tokens.dividerMarginLeft}: 1.125rem;
${tokens.dividerMarginTopTight}: 0.375rem;
${tokens.dividerMarginBottomTight}: 0.375rem;
${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family);
${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size);
${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style);
${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight);
${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height);
${tokens.cellPadding}: 0rem;
${tokens.cellPaddingLeftContent}: 0rem;
${tokens.cellPaddingContent}: 0rem;
${tokens.cellPaddingRightContent}: 0rem;
${tokens.cellTextboxGap}: 0.125rem;
${tokens.cellGap}: 0.375rem;
${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family);
${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size);
${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style);
${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight);
${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height);
`,
m: css`
${tokens.padding}: 0.125rem;
${tokens.width}: 15rem;
${tokens.borderRadius}: 0.75rem;
${tokens.borderWidth}: 0.125rem;
${tokens.itemMargin}: 0rem;
${tokens.itemPadding}: 0.5rem 0.75rem;
${tokens.itemPaddingTight}: 0.25rem 0.75rem;
${tokens.itemHeight}: 1.5rem;
${tokens.itemPadding}: 0.75rem 0.875rem;
${tokens.itemPaddingTight}: 0.5rem 0.875rem;
${tokens.itemBorderRadius}: 0.5rem;
${tokens.dividerMarginTop}: 0.375rem;
${tokens.dividerMarginRight}: 0.875rem;
${tokens.dividerMarginRight}: 0.75rem;
${tokens.dividerMarginBottom}: 0.375rem;
${tokens.dividerMarginLeft}: 0.875rem;
${tokens.dividerMarginTopTight}: 0.375rem;
${tokens.dividerMarginBottomTight}: 0.375rem;
${tokens.dividerMarginLeft}: 0.75rem;
${tokens.dividerMarginTopTight}: 0.25rem;
${tokens.dividerMarginBottomTight}: 0.25rem;
${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family);
${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size);
Expand All @@ -81,80 +47,6 @@ export const config = {
${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
`,
s: css`
${tokens.padding}: 0.125rem;
${tokens.width}: 12.5rem;
${tokens.borderRadius}: 0.625rem;
${tokens.borderWidth}: 0.125rem;
${tokens.itemHeight}: 1.5rem;
${tokens.itemPadding}: 0.5rem 0.75rem;
${tokens.itemPaddingTight}: 0.25rem 0.75rem;
${tokens.dividerMarginTop}: 0.375rem;
${tokens.dividerMarginRight}: 0.75rem;
${tokens.dividerMarginBottom}: 0.375rem;
${tokens.dividerMarginLeft}: 0.75rem;
${tokens.dividerMarginTopTight}: 0.25rem;
${tokens.dividerMarginBottomTight}: 0.25rem;
${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family);
${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size);
${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style);
${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight);
${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height);
${tokens.cellPadding}: 0rem;
${tokens.cellPaddingLeftContent}: 0rem;
${tokens.cellPaddingContent}: 0rem;
${tokens.cellPaddingRightContent}: 0rem;
${tokens.cellTextboxGap}: 0.125rem;
${tokens.cellGap}: 0.375rem;
${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family);
${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size);
${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style);
${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight);
${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height);
`,
xs: css`
${tokens.padding}: 0.125rem;
${tokens.width}: 10rem;
${tokens.borderRadius}: 0.5rem;
${tokens.borderWidth}: 0.125rem;
${tokens.itemHeight}: 1rem;
${tokens.itemPadding}: 0.5rem;
${tokens.itemPaddingTight}: 0.25rem 0.5rem;
${tokens.dividerMarginTop}: 0.25rem;
${tokens.dividerMarginRight}: 0.5rem;
${tokens.dividerMarginBottom}: 0.25rem;
${tokens.dividerMarginLeft}: 0.5rem;
${tokens.dividerMarginTopTight}: 0.125rem;
${tokens.dividerMarginBottomTight}: 0.125rem;
${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size);
${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style);
${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight);
${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height);
${tokens.cellPadding}: 0rem;
${tokens.cellPaddingLeftContent}: 0rem;
${tokens.cellPaddingContent}: 0rem;
${tokens.cellPaddingRightContent}: 0rem;
${tokens.cellTextboxGap}: 0.125rem;
${tokens.cellGap}: 0.25rem;
${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family);
${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size);
${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style);
${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height);
`,
},
view: {
default: css`
Expand All @@ -170,6 +62,7 @@ export const config = {
${tokens.itemColor}: var(--text-primary);
${tokens.disclosureIconColor}: var(--text-accent);
${tokens.dividerColor}: var(--surface-solid-primary);
${tokens.disclosureIconColor}: var(--text-accent);
`,
},
},
Expand Down
5 changes: 2 additions & 3 deletions packages/sdds-cs/src/components/Dropdown/Dropdown.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ type DropdownProps = ComponentProps<typeof Dropdown>;

const placements: DropdownProps['placement'][] = ['auto', 'top', 'right', 'bottom', 'left'];
const triggers: DropdownProps['trigger'][] = ['click', 'hover'];
const size = ['xs', 's', 'm', 'l'];
const size = ['s'];
const variant = ['normal', 'tight'];

const meta: Meta<DropdownProps> = {
Expand Down Expand Up @@ -58,7 +58,7 @@ const meta: Meta<DropdownProps> = {
},
},
args: {
size: 'm',
size: 's',
variant: 'normal',
placement: 'bottom-start',
trigger: 'click',
Expand All @@ -72,7 +72,6 @@ const meta: Meta<DropdownProps> = {
parameters: {
controls: {
include: [
'size',
'variant',
'placement',
'trigger',
Expand Down

0 comments on commit 4ce6892

Please sign in to comment.