diff --git a/packages/sdds-serv/src/components/Button/Button.config.ts b/packages/sdds-serv/src/components/Button/Button.config.ts
index ba0b6a6fad..2199331f90 100644
--- a/packages/sdds-serv/src/components/Button/Button.config.ts
+++ b/packages/sdds-serv/src/components/Button/Button.config.ts
@@ -10,6 +10,7 @@ export const config = {
view: {
default: css`
${buttonTokens.buttonColor}: var(--inverse-text-primary);
+ ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
${buttonTokens.buttonColorHover}: var(--inverse-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
@@ -18,6 +19,7 @@ export const config = {
`,
accent: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
+ ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-accent);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
@@ -26,6 +28,7 @@ export const config = {
`,
secondary: css`
${buttonTokens.buttonColor}: var(--text-primary);
+ ${buttonTokens.buttonValueColor}: var(--text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary);
${buttonTokens.buttonColorHover}: var(--text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
@@ -34,6 +37,7 @@ export const config = {
`,
clear: css`
${buttonTokens.buttonColor}: var(--text-primary);
+ ${buttonTokens.buttonValueColor}: var(--text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-clear);
${buttonTokens.buttonColorHover}: var(--text-primary-hover);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-clear);
@@ -42,6 +46,7 @@ export const config = {
`,
success: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
+ ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-positive);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
@@ -50,6 +55,7 @@ export const config = {
`,
warning: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
+ ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-warning);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
@@ -58,6 +64,7 @@ export const config = {
`,
critical: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
+ ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--surface-negative);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
@@ -66,6 +73,7 @@ export const config = {
`,
dark: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
+ ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
@@ -74,6 +82,7 @@ export const config = {
`,
black: css`
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
+ ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default);
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover);
@@ -82,6 +91,7 @@ export const config = {
`,
white: css`
${buttonTokens.buttonColor}: var(--on-light-text-primary);
+ ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary);
${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
${buttonTokens.buttonColorHover}: var(--on-light-text-primary);
${buttonTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
@@ -102,8 +112,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
- ${buttonTokens.buttonSpinnerSize}: 22px;
+ ${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.5rem 0 -0.125rem;
+ ${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.5rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
lr: css`
${buttonTokens.buttonHeight}: 3.5rem;
@@ -115,8 +129,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
- ${buttonTokens.buttonSpinnerSize}: 22px;
+ ${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.5rem 0 0;
+ ${buttonTokens.buttonRightContentMargin}: 0 0 0 0.5rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
m: css`
${buttonTokens.buttonHeight}: 3rem;
@@ -130,8 +148,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
- ${buttonTokens.buttonSpinnerSize}: 22px;
+ ${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.375rem 0 -0.125rem;
+ ${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.375rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
mr: css`
${buttonTokens.buttonHeight}: 3rem;
@@ -143,8 +165,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
- ${buttonTokens.buttonSpinnerSize}: 22px;
+ ${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.375rem 0 0;
+ ${buttonTokens.buttonRightContentMargin}: 0 0 0 0.375rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
s: css`
${buttonTokens.buttonHeight}: 2.5rem;
@@ -158,8 +184,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
- ${buttonTokens.buttonSpinnerSize}: 22px;
+ ${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 -0.125rem;
+ ${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.25rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
sr: css`
${buttonTokens.buttonHeight}: 2.5rem;
@@ -171,8 +201,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
- ${buttonTokens.buttonSpinnerSize}: 22px;
+ ${buttonTokens.buttonSpinnerSize}: 1.375rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 0;
+ ${buttonTokens.buttonRightContentMargin}: 0 0 0 0.25rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
xs: css`
${buttonTokens.buttonHeight}: 2rem;
@@ -186,8 +220,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
- ${buttonTokens.buttonSpinnerSize}: 16px;
+ ${buttonTokens.buttonSpinnerSize}: 1rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 -0.125rem;
+ ${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.25rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
xsr: css`
${buttonTokens.buttonHeight}: 2rem;
@@ -199,8 +237,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
- ${buttonTokens.buttonSpinnerSize}: 16px;
+ ${buttonTokens.buttonSpinnerSize}: 1rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 0;
+ ${buttonTokens.buttonRightContentMargin}: 0 0 0 0.25rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
xxs: css`
${buttonTokens.buttonHeight}: 1.5rem;
@@ -214,8 +256,12 @@ export const config = {
${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
- ${buttonTokens.buttonSpinnerSize}: 12px;
+ ${buttonTokens.buttonSpinnerSize}: 0.75rem;
${buttonTokens.buttonSpinnerColor}: inherit;
+
+ ${buttonTokens.buttonLeftContentMargin}: 0 0.25rem 0 -0.125rem;
+ ${buttonTokens.buttonRightContentMargin}: 0 -0.125rem 0 0.25rem;
+ ${buttonTokens.buttonValueMargin}: 0 0 0 0.25rem;
`,
},
disabled: {
diff --git a/packages/sdds-serv/src/components/Button/Button.stories.tsx b/packages/sdds-serv/src/components/Button/Button.stories.tsx
index 946a03e3d0..e2276079fc 100644
--- a/packages/sdds-serv/src/components/Button/Button.stories.tsx
+++ b/packages/sdds-serv/src/components/Button/Button.stories.tsx
@@ -2,18 +2,20 @@ import React, { useCallback, useState, useRef } from 'react';
import type { ComponentProps } from 'react';
import { action } from '@storybook/addon-actions';
import type { StoryObj, Meta } from '@storybook/react';
+import { IconMic } from '@salutejs/plasma-icons';
-import { IconPlaceholder, disableProps, InSpacingDecorator } from '../../helpers';
+import { InSpacingDecorator, disableProps } from '../../helpers';
import { Button } from '.';
import type { ButtonProps as Base } from '.';
type ButtonProps = ComponentProps;
-const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white'];
+const views = ['default', 'accent', 'success', 'warning', 'critical', 'dark', 'light'];
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
-const stretching = ['auto', 'filled', 'fixed'];
-const pins = [
+const stretchingValues = ['auto', 'filled', 'fixed'];
+const pinValues = [
+ '',
'square-square',
'square-clear',
'clear-square',
@@ -21,10 +23,8 @@ const pins = [
'clear-circle',
'circle-clear',
'circle-circle',
- '',
];
-
-const contentTypes = ['Text', 'Text+Left', 'Text+Right', 'Left'];
+const contentPlacinValues = ['default', 'relaxed'];
const onClick = action('onClick');
const onFocus = action('onFocus');
@@ -34,93 +34,113 @@ const meta: Meta = {
title: 'Controls/Button',
decorators: [InSpacingDecorator],
component: Button,
+ args: {
+ view: 'default',
+ size: 'm',
+ contentPlacing: 'default',
+ stretching: 'auto',
+ text: 'Hello',
+ value: 'Value',
+ disabled: false,
+ focused: true,
+ square: false,
+ isLoading: false,
+ },
argTypes: {
- contentType: {
- options: contentTypes,
+ view: {
+ options: views,
control: {
type: 'select',
},
},
- text: {
- control: {
- type: 'text',
- },
- },
size: {
options: sizes,
control: {
- type: 'inline-radio',
+ type: 'select',
},
},
- pin: {
- options: pins,
+ contentPlacing: {
+ options: contentPlacinValues,
control: {
type: 'select',
},
},
stretching: {
- options: stretching,
+ options: stretchingValues,
control: {
type: 'select',
},
},
- view: {
- options: views,
+ pin: {
+ options: pinValues,
control: {
type: 'select',
},
+ table: { defaultValue: { summary: 'bottom' } },
},
- ...disableProps(['theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']),
+ ...disableProps([
+ 'theme',
+ 'loader',
+ 'onClick',
+ 'onFocus',
+ 'onBlur',
+ 'outlined',
+ 'contentLeft',
+ 'contentRight',
+ 'shiftLeft',
+ 'shiftRight',
+ 'stretch',
+ 'as',
+ 'forwardedAs',
+ ]),
},
};
export default meta;
-type StoryButtonProps = ButtonProps & { contentType: string; isLoading?: boolean };
-
-const iconSize = {
- l: 's',
- m: 's',
- s: 's',
- xs: 'xs',
- xxs: 'xs',
+type StoryPropsDefault = ComponentProps & {
+ enableContentLeft: boolean;
+ enableContentRight: boolean;
};
-export const Default: StoryObj = {
- args: {
- view: 'default',
- size: 'l',
- disabled: false,
- text: 'Label',
- contentType: 'Text',
- isLoading: false,
- focused: true,
- square: false,
- stretching: 'auto',
- onClick,
- onFocus,
- onBlur,
- },
- render: ({ contentType, text, ...rest }) => (
+const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
+ const iconSize = size === 'xs' || size === 'xxs' ? 'xs' : 's';
+
+ return (
- )
- }
- contentRight={contentType === 'Text+Right' && }
+ contentLeft={enableContentLeft ? : undefined}
+ contentRight={enableContentRight ? : undefined}
+ size={size}
+ onClick={onClick}
+ onFocus={onFocus}
+ onBlur={onBlur}
{...rest}
/>
- ),
+ );
+};
+
+export const Default: StoryObj = {
+ args: {
+ enableContentLeft: false,
+ enableContentRight: false,
+ },
+ render: (args) => ,
};
-const StoryLoading = ({ contentType, text, isLoading, onClick: _onClick, ...rest }: StoryButtonProps) => {
+const StoryLoading = ({
+ enableContentLeft,
+ enableContentRight,
+ size,
+ isLoading,
+ onClick: _onClick,
+ ...rest
+}: StoryPropsDefault) => {
const [loading, setLoading] = useState(isLoading);
const [count, setCount] = useState(0);
const intervalId = useRef();
+ const iconSize = size === 'xs' || size === 'xxs' ? 'xs' : 's';
+
const onClickHandle = useCallback(
(event) => {
event.persist();
@@ -148,24 +168,24 @@ const StoryLoading = ({ contentType, text, isLoading, onClick: _onClick, ...rest
- )
- }
- contentRight={contentType === 'Text+Right' && }
+ contentLeft={enableContentLeft ? : undefined}
+ contentRight={enableContentRight ? : undefined}
isLoading={loading}
+ size={size}
loader={Loading - {count}
}
{...rest}
/>
);
};
-export const Loading: StoryObj = {
+export const Loading: StoryObj = {
args: {
...Default.args,
text: 'Start loading',
+ value: '',
+ },
+ argTypes: {
+ ...disableProps(['text', 'value']),
},
render: (args) => ,
};