feat(Button): add prop width (#346)

Release-As: 2.19.0

Author: Juli Ovechkina

src/components/Button/Button.scss

@@ -53,4 +53,12 @@ $block: '.#{$ns}button-block';
             --btn-image-margin: 25px;
         }
     }
+
+    &_width {
+        &_max {
+            #{$block}__text {
+                width: 100%;
+            }
+        }
+    }
 }

src/components/Button/Button.tsx

@@ -37,6 +37,7 @@ const Button = (props: ButtonProps) => {
         img,
         onClick: onClickOrigin,
         text,
+        width,
         ...rest
     } = props;
     const defaultImgPosition = 'left';
@@ -53,14 +54,16 @@ const Button = (props: ButtonProps) => {
         [handleMetrika, metrikaGoals, pixelEvents, handleAnalytics, analyticsEvents, onClickOrigin],
     );
 
+    const buttonModifiers = {size, theme, width};
+
     const buttonImg =
         img instanceof Object
             ? {url: img.url, position: img.position || defaultImgPosition, alt: img.alt}
             : {url: img, position: defaultImgPosition};
 
     const buttonClass = img
-        ? b({position: buttonImg.position, size, theme}, className)
-        : b({size, theme}, className);
+        ? b({position: buttonImg.position, ...buttonModifiers}, className)
+        : b({...buttonModifiers}, className);
 
     const buttonProps = {
         ...rest,
@@ -91,6 +94,7 @@ const Button = (props: ButtonProps) => {
             view={toCommonView(buttonTheme as OldButtonTheme)}
             size={toCommonSize(size as OldButtonSize)}
             href={url ? setUrlTld(url, tld) : undefined}
+            width={width}
             {...buttonProps}
         >
             {icon && buttonImg.position === 'left' ? icon : null}

src/components/Button/__stories__/Button.stories.tsx

@@ -63,8 +63,21 @@ const ThemesSizesTemplate: Story<ButtonProps> = (args) => (
     </Fragment>
 );
 
+const WidthTemplate: Story<ButtonProps> = (args) => (
+    <Row>
+        <Col>
+            <Button {...args} width="auto" />
+        </Col>
+        <Col>
+            <Button {...args} width="max" />
+        </Col>
+    </Row>
+);
+
 export const Default = DefaultTemplate.bind({});
 export const ThemesSizes = ThemesSizesTemplate.bind({});
+export const Width = WidthTemplate.bind({});
 
 Default.args = data.default.content as ButtonProps;
 ThemesSizes.args = data.themesSizes.content as ButtonProps;
+Width.args = data.themesSizes.content as ButtonProps;

src/models/constructor-items/common.ts

@@ -1,6 +1,6 @@
 import {CSSProperties, ReactNode} from 'react';
 
-import {ButtonSize, ButtonView} from '@gravity-ui/uikit';
+import {ButtonView, ButtonProps as UikitButtonProps} from '@gravity-ui/uikit';
 
 import {ThemeSupporting} from '../../utils/theme';
 import {AnalyticsEventsBase, ClassNameProps, PixelEventType} from '../common';
@@ -177,11 +177,10 @@ export type ButtonTheme =
     | 'scale'
     | 'monochrome';
 
-export interface ButtonProps extends AnalyticsEventsBase {
+export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
     text: string;
     url: string;
     primary?: boolean;
-    size?: ButtonSize;
     theme?: ButtonTheme;
     img?: ButtonImageProps | string;
     metrikaGoals?: MetrikaGoal;
@@ -262,6 +261,7 @@ export type Coordinate = number[];
 export interface MapBaseProps {
     zoom?: number;
 }
+
 export interface GMapProps extends MapBaseProps {
     address: string;
 }