feat(plasma-new-hope): add button group component

packages/caldera-online/api/caldera-online.api.md

@@ -21,6 +21,7 @@ import { bodyXXS } from '@salutejs/plasma-new-hope';
 import { bodyXXSBold } from '@salutejs/plasma-new-hope';
 import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types';
 import { ButtonHTMLAttributes } from 'react';
+import { ButtonProps as ButtonProps_2 } from '@salutejs/plasma-new-hope/styled-components';
 import { CustomDropdownProps } from '@salutejs/plasma-new-hope/types/components/Dropdown/Dropdown.types';
 import { CustomToastProps } from '@salutejs/plasma-new-hope/types/components/Toast/Toast.types';
 import { DropdownPlacement } from '@salutejs/plasma-new-hope/styled-components';
@@ -155,8 +156,8 @@ export { bodyXXSBold }
 // @public
 export const Button: FunctionComponent<PropsType<    {
 view: {
-default: string;
 primary: string;
+accent: string;
 secondary: string;
 clear: string;
 success: string;
@@ -180,19 +181,12 @@ true: string;
 focused: {
 true: string;
 };
-}> & ButtonHTMLAttributes<HTMLButtonElement> & {
-text?: string | undefined;
-contentLeft?: ReactNode;
-contentRight?: ReactNode;
-isLoading?: boolean | undefined;
-loader?: ReactNode;
-stretch?: boolean | undefined;
-square?: boolean | undefined;
-focused?: boolean | undefined;
-pin?: "square-square" | "square-clear" | "clear-square" | "clear-clear" | "clear-circle" | "circle-clear" | "circle-circle" | undefined;
-view?: string | undefined;
-size?: string | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+stretching: {
+auto: string;
+filled: string;
+fixed: string;
+};
+}> & ButtonProps_2<HTMLElement> & RefAttributes<HTMLButtonElement>>;
 
 // Warning: (ae-forgotten-export) The symbol "ButtonComponent" needs to be exported by the entry point index.d.ts
 //
@@ -479,7 +473,9 @@ view?: string | undefined;
 } & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
 width: number;
 height: number;
-size?: undefined;
+size?: undefined; /**
+* @deprecated
+*/
 view?: string | undefined;
 } & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
 width: string;

packages/caldera-online/src/components/Button/Button.config.ts

@@ -2,13 +2,13 @@ import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components';
 
 export const config = {
     defaults: {
-        view: 'default',
+        view: 'primary',
         focused: 'true',
         size: 'm',
     },
     variations: {
         view: {
-            default: css`
+            primary: css`
                 ${buttonTokens.buttonColor}: var(--inverse-text-primary);
                 ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
                 ${buttonTokens.buttonColorHover}: var(--inverse-text-primary);
@@ -24,7 +24,7 @@ export const config = {
                     var(--surface-solid-default) 80%
                 );
             `,
-            primary: css`
+            accent: css`
                 ${buttonTokens.buttonColor}: var(--on-dark-text-primary);
                 ${buttonTokens.buttonBackgroundColor}: var(--surface-accent);
                 ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary);
@@ -96,103 +96,148 @@ export const config = {
         size: {
             l: css`
                 ${buttonTokens.buttonHeight}: 3.5rem;
+                ${buttonTokens.buttonWidth}: 12.5rem;
                 ${buttonTokens.buttonPadding}: 1.5rem;
                 ${buttonTokens.buttonRadius}: 0.875rem;
-
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${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}: 22px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
             lr: css`
                 ${buttonTokens.buttonHeight}: 3.5rem;
-
+                ${buttonTokens.buttonWidth}: 12.5rem;
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${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}: 22px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
             m: css`
                 ${buttonTokens.buttonHeight}: 3rem;
+                ${buttonTokens.buttonWidth}: 11.25rem;
                 ${buttonTokens.buttonPadding}: 1.25rem;
                 ${buttonTokens.buttonRadius}: 0.75rem;
-
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
                 ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
                 ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
                 ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 22px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
             mr: css`
                 ${buttonTokens.buttonHeight}: 3rem;
-
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonWidth}: 11.25rem;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
                 ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
                 ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
                 ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
                 ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
                 ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 22px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
             s: css`
                 ${buttonTokens.buttonHeight}: 2.5rem;
+                ${buttonTokens.buttonWidth}: 11.25rem;
                 ${buttonTokens.buttonPadding}: 1rem;
                 ${buttonTokens.buttonRadius}: 0.625rem;
-
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
                 ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
                 ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
                 ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 22px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
             sr: css`
                 ${buttonTokens.buttonHeight}: 2.5rem;
-
+                ${buttonTokens.buttonWidth}: 11.25rem;
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
                 ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
                 ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
                 ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
                 ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
                 ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 22px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
             xs: css`
                 ${buttonTokens.buttonHeight}: 2rem;
+                ${buttonTokens.buttonWidth}: 10rem;
                 ${buttonTokens.buttonPadding}: 0.75rem;
                 ${buttonTokens.buttonRadius}: 0.5rem;
-
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
                 ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 16px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
             xsr: css`
                 ${buttonTokens.buttonHeight}: 2rem;
-
+                ${buttonTokens.buttonWidth}: 10rem;
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
                 ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 16px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
             xxs: css`
                 ${buttonTokens.buttonHeight}: 1.5rem;
+                ${buttonTokens.buttonWidth}: 8.75rem;
                 ${buttonTokens.buttonPadding}: 0.625rem;
                 ${buttonTokens.buttonRadius}: 0.375rem;
-
+                ${buttonTokens.buttonScaleActive}: 0.98;
+                ${buttonTokens.buttonScaleHover}: 1.02;
                 ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
                 ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
                 ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
                 ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
                 ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
                 ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+
+                ${buttonTokens.buttonSpinnerSize}: 12px;
+                ${buttonTokens.buttonSpinnerColor}: inherit;
             `,
         },
         disabled: {
@@ -205,5 +250,10 @@ export const config = {
                 ${buttonTokens.buttonFocusColor}: var(--surface-accent);
             `,
         },
+        stretching: {
+            auto: css``,
+            filled: css``,
+            fixed: css``,
+        },
     },
 };

packages/caldera-online/src/components/Button/Button.stories.tsx

@@ -10,8 +10,9 @@ import type { ButtonProps as Base } from '.';
 
 type ButtonProps = ComponentProps<Base>;
 
-const views = ['default', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear'];
+const views = ['accent', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear'];
 const sizes = ['l', 'm', 's', 'xs', 'xxs'];
+const stretching = ['auto', 'filled', 'fixed'];
 const pins = [
     'square-square',
     'square-clear',
@@ -57,6 +58,12 @@ const meta: Meta<ButtonProps> = {
                 type: 'select',
             },
         },
+        stretching: {
+            options: stretching,
+            control: {
+                type: 'select',
+            },
+        },
         view: {
             options: views,
             control: {
@@ -81,15 +88,15 @@ const iconSize = {
 
 export const Default: StoryObj<StoryButtonProps> = {
     args: {
-        view: 'default',
+        view: 'primary',
         size: 'l',
         disabled: false,
         text: 'Label',
         contentType: 'Text',
         isLoading: false,
         focused: true,
         square: false,
-        stretch: false,
+        stretching: 'auto',
         onClick,
         onFocus,
         onBlur,

packages/caldera/api/caldera.api.md

@@ -21,6 +21,7 @@ import { bodyXXS } from '@salutejs/plasma-new-hope';
 import { bodyXXSBold } from '@salutejs/plasma-new-hope';
 import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types';
 import { ButtonHTMLAttributes } from 'react';
+import { ButtonProps as ButtonProps_2 } from '@salutejs/plasma-new-hope/styled-components';
 import { CustomDropdownProps } from '@salutejs/plasma-new-hope/types/components/Dropdown/Dropdown.types';
 import { CustomToastProps } from '@salutejs/plasma-new-hope/types/components/Toast/Toast.types';
 import { DropdownPlacement } from '@salutejs/plasma-new-hope/styled-components';
@@ -155,8 +156,8 @@ export { bodyXXSBold }
 // @public
 export const Button: FunctionComponent<PropsType<    {
 view: {
-default: string;
 primary: string;
+accent: string;
 secondary: string;
 clear: string;
 success: string;
@@ -180,19 +181,12 @@ true: string;
 focused: {
 true: string;
 };
-}> & ButtonHTMLAttributes<HTMLButtonElement> & {
-text?: string | undefined;
-contentLeft?: ReactNode;
-contentRight?: ReactNode;
-isLoading?: boolean | undefined;
-loader?: ReactNode;
-stretch?: boolean | undefined;
-square?: boolean | undefined;
-focused?: boolean | undefined;
-pin?: "square-square" | "square-clear" | "clear-square" | "clear-clear" | "clear-circle" | "circle-clear" | "circle-circle" | undefined;
-view?: string | undefined;
-size?: string | undefined;
-} & RefAttributes<HTMLButtonElement>>;
+stretching: {
+auto: string;
+filled: string;
+fixed: string;
+};
+}> & ButtonProps_2<HTMLElement> & RefAttributes<HTMLButtonElement>>;
 
 // Warning: (ae-forgotten-export) The symbol "ButtonComponent" needs to be exported by the entry point index.d.ts
 //
@@ -479,7 +473,9 @@ view?: string | undefined;
 } & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
 width: number;
 height: number;
-size?: undefined;
+size?: undefined; /**
+* @deprecated
+*/
 view?: string | undefined;
 } & RefAttributes<HTMLDivElement>) | (HTMLAttributes<HTMLDivElement> & {
 width: string;