feat(core-components-button): added nowrap (#365)

* feat(core-components-button): added nowrap * fix(core-components-button): text for docs * fix(core-components-button): changed docs Co-authored-by: Evgeny Sergeev <SiebenSieben@gmail.com> Co-authored-by: Alexander Yatsenko <reme3d2y@gmail.com>
core-ds · Nov 23, 2020 · 99a87eb · 99a87eb
1 parent 79d6750
commit 99a87eb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 0 deletions.
diff --git a/packages/button/src/Component.stories.mdx b/packages/button/src/Component.stories.mdx
@@ -29,6 +29,7 @@ export const SIZES = ['xs', 's', 'm', 'l'];
         loading={boolean('loading')}
         disabled={boolean('disabled', false)}
         block={boolean('block', false)}
+        nowrap={boolean('nowrap', false)}
         onClick={action('click')}
     >
         {text('label', 'Оплатить')}
@@ -273,3 +274,29 @@ import { Button } from '@alfalab/core-components-button';
         );
     })}
 </Preview>
+
+## Перенос текста
+
+С помощью пропса `nowrap` можно запретить переносить текст кнопки
+<Preview>
+    <div style={{ width: '240px' }}>
+        <Row align="middle">
+            <Col>
+                <Button rightAddons={<Icon/>} view="primary" nowrap={true}>
+                    Кнопка без переноса текста
+                </Button>
+            </Col>
+            <Col>
+                <Button leftAddons={<Icon/>} />
+            </Col>
+            <Col>
+                <Button rightAddons={<Icon/>} view="outlined"/>
+            </Col>
+            <Col>
+                <Button view="ghost">
+                    Кнопка с переносом текста
+                </Button>
+            </Col>
+        </Row>
+    </div>
+</Preview>
diff --git a/packages/button/src/Component.test.tsx b/packages/button/src/Component.test.tsx
@@ -76,6 +76,12 @@ describe('Button', () => {
 
             expect(container.firstElementChild).toHaveClass('iconOnly');
         });
+
+        it('should set `nowrap` class', () => {
+            const { container } = render(<Button nowrap={true} />);
+
+            expect(container.firstElementChild).toHaveClass('nowrap');
+        });
     });
 
     describe('Callbacks tests', () => {

diff --git a/packages/button/src/Component.tsx b/packages/button/src/Component.tsx
@@ -52,6 +52,11 @@ export type ComponentProps = {
      * Показать лоадер
      */
     loading?: boolean;
+
+    /**
+     * Не переносить текст кнопки на новую строку
+     */
+    nowrap?: boolean;
 };
 
 type AnchorButtonProps = ComponentProps & AnchorHTMLAttributes<HTMLAnchorElement>;
@@ -71,6 +76,7 @@ export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, Bu
             dataTestId,
             href,
             loading = false,
+            nowrap = false,
             ...restProps
         },
         ref,
@@ -88,6 +94,7 @@ export const Button = React.forwardRef<HTMLAnchorElement | HTMLButtonElement, Bu
                     [styles.focused]: focused,
                     [styles.block]: block,
                     [styles.iconOnly]: !children,
+                    [styles.nowrap]: nowrap,
                     [styles.loading]: loading,
                 },
                 className,
@@ -143,4 +150,5 @@ Button.defaultProps = {
     size: 'm',
     block: false,
     loading: false,
+    nowrap: false,
 };
diff --git a/packages/button/src/index.module.css b/packages/button/src/index.module.css
@@ -303,6 +303,12 @@ a.loading {
     width: 100%;
 }
 
+/* Nowrap */
+
+.nowrap {
+    white-space: nowrap;
+}
+
 /* IE min-height fix */
 
 .component:after {