diff --git a/.gitignore b/.gitignore index 1e3e7ec808..36790f1402 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ node_modules/ .idea/ +.nx/ tsconfig.tsbuildinfo tsconfig.es.tsbuildinfo cypress/snapshots/**/__diff_output__ diff --git a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png index f05d001c87..4726ee781b 100644 Binary files a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png and b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png index 359a1adc1f..8238831436 100644 Binary files a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png and b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png differ diff --git a/packages/plasma-asdk/api/plasma-asdk.api.md b/packages/plasma-asdk/api/plasma-asdk.api.md index 3c0e581c66..773712f045 100644 --- a/packages/plasma-asdk/api/plasma-asdk.api.md +++ b/packages/plasma-asdk/api/plasma-asdk.api.md @@ -127,6 +127,8 @@ black: PolymorphicClassName; white: PolymorphicClassName; }; size: { +xl: PolymorphicClassName; +xlr: PolymorphicClassName; l: PolymorphicClassName; lr: PolymorphicClassName; m: PolymorphicClassName; diff --git a/packages/plasma-asdk/src/components/Button/Button.config.ts b/packages/plasma-asdk/src/components/Button/Button.config.ts index 19a0c5d6e4..ec70266540 100644 --- a/packages/plasma-asdk/src/components/Button/Button.config.ts +++ b/packages/plasma-asdk/src/components/Button/Button.config.ts @@ -124,6 +124,42 @@ export const config = { `, }, size: { + xl: css` + ${buttonTokens.buttonHeight}: 4rem; + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonPadding}: 1.75rem; + ${buttonTokens.buttonRadius}: 1rem; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 1.5rem; + ${buttonTokens.buttonSpinnerColor}: inherit; + + ${buttonTokens.buttonLeftContentMargin}: 0 0.625rem 0 -0.125rem; + ${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.625rem; + ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem; + `, + xlr: css` + ${buttonTokens.buttonHeight}: 4rem; + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 1.5rem; + ${buttonTokens.buttonSpinnerColor}: inherit; + + ${buttonTokens.buttonLeftContentMargin}: 0 0.625rem 0 0; + ${buttonTokens.buttonRightContentMargin}: 0 0 0 0.625rem; + ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem; + `, l: css` ${buttonTokens.buttonHeight}: 3.5rem; ${buttonTokens.buttonWidth}: 12.5rem; diff --git a/packages/plasma-asdk/src/components/Button/Button.stories.tsx b/packages/plasma-asdk/src/components/Button/Button.stories.tsx index 2cbb9b63ca..76226604a1 100644 --- a/packages/plasma-asdk/src/components/Button/Button.stories.tsx +++ b/packages/plasma-asdk/src/components/Button/Button.stories.tsx @@ -10,7 +10,7 @@ import { Button } from '.'; type ButtonProps = ComponentProps; const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white']; -const sizes = ['l', 'm', 's', 'xs', 'xxs']; +const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs']; const stretchingValues = ['auto', 'filled', 'fixed']; const pinValues = [ '', @@ -95,6 +95,8 @@ const meta: Meta = { 'stretch', 'as', 'forwardedAs', + 'pin', + 'focused', ]), }, }; @@ -111,8 +113,10 @@ const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: return ( ); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.ts index 92b128239e..2855d4ff4d 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.ts @@ -111,6 +111,33 @@ export const config = { `, }, size: { + xl: css` + ${buttonGroupTokens.buttonDefaultRadius}: 1rem; + ${buttonGroupTokens.buttonSegmentedRadius}: 0.5rem; + ${buttonGroupTokens.buttonSideRadius}: 1rem; + + ${buttonGroupTokens.buttonHeight}: 4rem; + ${buttonGroupTokens.buttonPadding}: 1.75rem; + ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + `, + xlr: css` + ${buttonGroupTokens.buttonDefaultRadius}: 1rem; + ${buttonGroupTokens.buttonSegmentedRadius}: 0.5rem; + ${buttonGroupTokens.buttonSideRadius}: 1rem; + + ${buttonGroupTokens.buttonHeight}: 4rem; + ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; ${buttonGroupTokens.buttonSegmentedRadius}: 0.375rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx index 72ebc25059..2e21826d68 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx @@ -12,7 +12,7 @@ type StoryProps = ComponentProps & { itemsCount?: number }; type Story = StoryObj; const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear']; -const sizes = ['l', 'm', 's', 'xs', 'xxs']; +const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs']; const orientationValues = ['horizontal', 'vertical']; const gapValues = ['none', 'dense', 'wide']; const shapeValues = ['segmented', 'default']; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.config.ts index 48ba78dd04..0a085bee45 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.config.ts @@ -102,6 +102,34 @@ export const config = { `, }, size: { + xl: css` + ${iconButtonTokens.iconButtonHeight}: 4rem; + ${iconButtonTokens.iconButtonWidth}: 4rem; + ${iconButtonTokens.iconButtonPadding}: 1.75rem; + ${iconButtonTokens.iconButtonRadius}: 1rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, + xlr: css` + ${iconButtonTokens.iconButtonHeight}: 4rem; + ${iconButtonTokens.iconButtonWidth}: 4rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, l: css` ${iconButtonTokens.iconButtonHeight}: 3.5rem; ${iconButtonTokens.iconButtonWidth}: 3.5rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx index eafa3fc415..92e4cb4363 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx @@ -41,8 +41,10 @@ const getSizeForIcon = (size) => { const map = { mr: 's', lr: 's', + xlr: 's', m: 's', l: 's', + xl: 's', sr: 's', xsr: 'xs', }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.config.ts index d2ab45a1dd..eef387b72e 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.config.ts @@ -112,6 +112,42 @@ export const config = { `, }, size: { + xl: css` + ${buttonTokens.buttonHeight}: 4rem; + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonPadding}: 1.75rem; + ${buttonTokens.buttonRadius}: 1rem; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 1.5rem; + ${buttonTokens.buttonSpinnerColor}: inherit; + + ${buttonTokens.buttonLeftContentMargin}: 0 0.625rem 0 -0.125rem; + ${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.625rem; + ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem; + `, + xlr: css` + ${buttonTokens.buttonHeight}: 4rem; + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 1.5rem; + ${buttonTokens.buttonSpinnerColor}: inherit; + + ${buttonTokens.buttonLeftContentMargin}: 0 0.625rem 0 0; + ${buttonTokens.buttonRightContentMargin}: 0 0 0 0.625rem; + ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem; + `, l: css` ${buttonTokens.buttonHeight}: 3.5rem; ${buttonTokens.buttonWidth}: 12.5rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx index 37f76c5812..858cc0a3e6 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx @@ -9,7 +9,7 @@ import { WithTheme } from '../../../_helpers'; import { Button } from './Button'; const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light']; -const sizes = ['l', 'm', 's', 'xs', 'xxs']; +const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs']; const stretchingValues = ['auto', 'filled', 'fixed']; const pinValues = [ '', @@ -22,6 +22,15 @@ const pinValues = [ 'circle-circle', ]; const contentPlacinValues = ['default', 'relaxed']; +const sizeMap = { + xxs: '0.75rem', // 12px + xs: '1rem', // 16px + s: '1.5rem', // 24px + m: '1.5rem', // 36px + l: '1.5rem', // 44px + xl: '1.5rem', // 56px + xxl: '1.5rem', // 100px +}; const meta: Meta = { title: 'web/Data Entry/Button', @@ -86,8 +95,16 @@ const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: return ( ); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.ts index 92b128239e..2855d4ff4d 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.ts @@ -111,6 +111,33 @@ export const config = { `, }, size: { + xl: css` + ${buttonGroupTokens.buttonDefaultRadius}: 1rem; + ${buttonGroupTokens.buttonSegmentedRadius}: 0.5rem; + ${buttonGroupTokens.buttonSideRadius}: 1rem; + + ${buttonGroupTokens.buttonHeight}: 4rem; + ${buttonGroupTokens.buttonPadding}: 1.75rem; + ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + `, + xlr: css` + ${buttonGroupTokens.buttonDefaultRadius}: 1rem; + ${buttonGroupTokens.buttonSegmentedRadius}: 0.5rem; + ${buttonGroupTokens.buttonSideRadius}: 1rem; + + ${buttonGroupTokens.buttonHeight}: 4rem; + ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; ${buttonGroupTokens.buttonSegmentedRadius}: 0.375rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx index 5a8d6036c0..b22a0d5c90 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx @@ -12,7 +12,7 @@ type StoryProps = ComponentProps & { itemsCount?: number }; type Story = StoryObj; const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear']; -const sizes = ['l', 'm', 's', 'xs', 'xxs']; +const sizes = ['xl', 'l', 'm', 's', 'xs', 'xxs']; const orientationValues = ['horizontal', 'vertical']; const gapValues = ['none', 'dense', 'wide']; const shapeValues = ['segmented', 'default']; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.config.ts index 48ba78dd04..0a085bee45 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.config.ts @@ -102,6 +102,34 @@ export const config = { `, }, size: { + xl: css` + ${iconButtonTokens.iconButtonHeight}: 4rem; + ${iconButtonTokens.iconButtonWidth}: 4rem; + ${iconButtonTokens.iconButtonPadding}: 1.75rem; + ${iconButtonTokens.iconButtonRadius}: 1rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, + xlr: css` + ${iconButtonTokens.iconButtonHeight}: 4rem; + ${iconButtonTokens.iconButtonWidth}: 4rem; + ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); + ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); + ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); + ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; + ${iconButtonTokens.iconButtonSpinnerColor}: inherit; + `, l: css` ${iconButtonTokens.iconButtonHeight}: 3.5rem; ${iconButtonTokens.iconButtonWidth}: 3.5rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.stories.tsx index ff80ebb99f..22b4cb3495 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/IconButton/IconButton.stories.tsx @@ -41,8 +41,10 @@ const getSizeForIcon = (size) => { const map = { mr: 's', lr: 's', + xlr: 's', m: 's', l: 's', + xl: 's', sr: 's', xsr: 'xs', }; diff --git a/packages/plasma-ui/src/components/Button/Button.stories.tsx b/packages/plasma-ui/src/components/Button/Button.stories.tsx index 4b1ab3f2d7..fb8e078aae 100644 --- a/packages/plasma-ui/src/components/Button/Button.stories.tsx +++ b/packages/plasma-ui/src/components/Button/Button.stories.tsx @@ -60,6 +60,8 @@ const meta: Meta = { 'onFocus', 'onBlur', 'blur', + 'pin', + 'focused', ]), }, }; diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index e52997e887..ce4bfd42ca 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -1210,6 +1210,8 @@ black: PolymorphicClassName; white: PolymorphicClassName; }; size: { +xl: PolymorphicClassName; +xlr: PolymorphicClassName; l: PolymorphicClassName; lr: PolymorphicClassName; m: PolymorphicClassName; @@ -1307,6 +1309,8 @@ black: PolymorphicClassName; white: PolymorphicClassName; }; size: { +xl: PolymorphicClassName; +xlr: PolymorphicClassName; l: PolymorphicClassName; lr: PolymorphicClassName; m: PolymorphicClassName; @@ -2153,6 +2157,8 @@ black: PolymorphicClassName; white: PolymorphicClassName; }; size: { +xl: PolymorphicClassName; +xlr: PolymorphicClassName; l: PolymorphicClassName; lr: PolymorphicClassName; m: PolymorphicClassName; diff --git a/packages/plasma-web/src/components/Button/Button.component-test.tsx b/packages/plasma-web/src/components/Button/Button.component-test.tsx index a218666821..167784792b 100644 --- a/packages/plasma-web/src/components/Button/Button.component-test.tsx +++ b/packages/plasma-web/src/components/Button/Button.component-test.tsx @@ -87,6 +87,8 @@ describe('plasma-web: Button', () => { it('with Loader', () => { mount( + diff --git a/website/plasma-ui-docs/docs/components/Button.mdx b/website/plasma-ui-docs/docs/components/Button.mdx index 830312c728..514580f318 100644 --- a/website/plasma-ui-docs/docs/components/Button.mdx +++ b/website/plasma-ui-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description, StorybookLink } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button diff --git a/website/plasma-web-docs/docs/components/Button.mdx b/website/plasma-web-docs/docs/components/Button.mdx index 451a3a2eb2..ce7e378706 100644 --- a/website/plasma-web-docs/docs/components/Button.mdx +++ b/website/plasma-web-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description, StorybookLink } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -66,6 +65,7 @@ import { Button } from '@salutejs/plasma-web'; export function App() { return (
+ diff --git a/website/sdds-cs-docs/docs/components/Button.mdx b/website/sdds-cs-docs/docs/components/Button.mdx index 48f6a8bb64..fe669e4a0f 100644 --- a/website/sdds-cs-docs/docs/components/Button.mdx +++ b/website/sdds-cs-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -97,7 +96,7 @@ export function App() { Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`. Возможные значения свойства `contentPlacing`: + `default` – контент центрируется; -+ `relaxed` – контент распологается по краям. ++ `relaxed` – контент располагается по краям. ```tsx live import React from 'react'; diff --git a/website/sdds-dfa-docs/docs/components/Button.mdx b/website/sdds-dfa-docs/docs/components/Button.mdx index 09a07174dc..177c2ca639 100644 --- a/website/sdds-dfa-docs/docs/components/Button.mdx +++ b/website/sdds-dfa-docs/docs/components/Button.mdx @@ -8,7 +8,6 @@ import { PropsTable, Description } from '@site/src/components'; # Button Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку. -## Button @@ -65,6 +64,7 @@ import { Button } from '@salutejs/sdds-dfa'; export function App() { return (
+