Merge branch 'release-8-0' into mobile-truncate-story-name

storybookjs · Oct 10, 2023 · a60575a · a60575a
2 parents 6edffa5 + 8abf917
commit a60575a
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 75 deletions.
diff --git a/code/ui/blocks/src/controls/Boolean.tsx b/code/ui/blocks/src/controls/Boolean.tsx
@@ -4,7 +4,7 @@ import React, { useCallback } from 'react';
 import { opacify, transparentize } from 'polished';
 import { styled } from '@storybook/theming';
 
-import { Form } from '@storybook/components';
+import { Button } from '@storybook/components';
 import { getControlId, getControlSetterButtonId } from './helpers';
 
 import type { ControlProps, BooleanValue, BooleanConfig } from './types';
@@ -102,9 +102,14 @@ export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange, onBlur
   const onSetFalse = useCallback(() => onChange(false), [onChange]);
   if (value === undefined) {
     return (
-      <Form.Button id={getControlSetterButtonId(name)} onClick={onSetFalse}>
+      <Button
+        variant="outline"
+        size="medium"
+        id={getControlSetterButtonId(name)}
+        onClick={onSetFalse}
+      >
         Set boolean
-      </Form.Button>
+      </Button>
     );
   }
   const controlId = getControlId(name);

diff --git a/code/ui/blocks/src/controls/Number.tsx b/code/ui/blocks/src/controls/Number.tsx
@@ -1,7 +1,7 @@
 import type { FC, ChangeEvent } from 'react';
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { styled } from '@storybook/theming';
-import { Form } from '@storybook/components';
+import { Button, Form } from '@storybook/components';
 import { getControlId, getControlSetterButtonId } from './helpers';
 
 import type { ControlProps, NumberValue, NumberConfig } from './types';
@@ -68,9 +68,14 @@ export const NumberControl: FC<NumberProps> = ({
 
   if (!forceVisible && value === undefined) {
     return (
-      <Form.Button id={getControlSetterButtonId(name)} onClick={onForceVisible}>
+      <Button
+        variant="outline"
+        size="medium"
+        id={getControlSetterButtonId(name)}
+        onClick={onForceVisible}
+      >
         Set number
-      </Form.Button>
+      </Button>
     );
   }
 

diff --git a/code/ui/blocks/src/controls/Object.tsx b/code/ui/blocks/src/controls/Object.tsx
@@ -3,7 +3,7 @@ import cloneDeep from 'lodash/cloneDeep.js';
 import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react';
 import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import { styled, useTheme, type Theme } from '@storybook/theming';
-import { Form, Icons, type IconsProps, IconButton } from '@storybook/components';
+import { Form, Icons, type IconsProps, IconButton, Button } from '@storybook/components';
 import { JsonTree, getObjectType } from './react-editable-json-tree';
 import { getControlId, getControlSetterButtonId } from './helpers';
 import type { ControlProps, ObjectValue, ObjectConfig } from './types';
@@ -120,7 +120,7 @@ const Wrapper = styled.div(({ theme }) => ({
   },
 }));
 
-const Button = styled.button<{ primary?: boolean }>(({ theme, primary }) => ({
+const ButtonInline = styled.button<{ primary?: boolean }>(({ theme, primary }) => ({
   border: 0,
   height: 20,
   margin: 1,
@@ -265,9 +265,9 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
 
   if (!hasData) {
     return (
-      <Form.Button id={getControlSetterButtonId(name)} onClick={onForceVisible}>
+      <Button id={getControlSetterButtonId(name)} onClick={onForceVisible}>
         Set object
-      </Form.Button>
+      </Button>
     );
   }
 
@@ -303,12 +303,12 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
           rootName={name}
           onFullyUpdate={onChange}
           getStyle={getCustomStyleFunction(theme)}
-          cancelButtonElement={<Button type="button">Cancel</Button>}
-          editButtonElement={<Button type="submit">Save</Button>}
+          cancelButtonElement={<ButtonInline type="button">Cancel</ButtonInline>}
+          editButtonElement={<ButtonInline type="submit">Save</ButtonInline>}
           addButtonElement={
-            <Button type="submit" primary>
+            <ButtonInline type="submit" primary>
               Save
-            </Button>
+            </ButtonInline>
           }
           plusMenuElement={<ActionIcon icon="add" />}
           minusMenuElement={<ActionIcon icon="subtract" />}

diff --git a/code/ui/blocks/src/controls/Text.tsx b/code/ui/blocks/src/controls/Text.tsx
@@ -1,7 +1,7 @@
 import type { FC, ChangeEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 import { styled } from '@storybook/theming';
-import { Form } from '@storybook/components';
+import { Button, Form } from '@storybook/components';
 import { getControlId, getControlSetterButtonId } from './helpers';
 
 import type { ControlProps, TextValue, TextConfig } from './types';
@@ -37,9 +37,9 @@ export const TextControl: FC<TextProps> = ({
   }, [setForceVisible]);
   if (value === undefined) {
     return (
-      <Form.Button id={getControlSetterButtonId(name)} onClick={onForceVisible}>
+      <Button id={getControlSetterButtonId(name)} onClick={onForceVisible}>
         Set string
-      </Form.Button>
+      </Button>
     );
   }
 

diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx
@@ -71,15 +71,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       return () => clearTimeout(timer);
     }, [isAnimating]);
 
-    // Match the old API with the new API
-    // TODO: Remove this after 9.0
+    // Match the old API with the new API.
+    // TODO: Remove this after 9.0.
     if (props.primary) {
       localVariant = 'solid';
       localSize = 'medium';
     }
 
-    // Match the old API with the new API
-    // TODO: Remove this after 9.0
+    // Match the old API with the new API.
+    // TODO: Remove this after 9.0.
     if (props.secondary || props.tertiary || props.gray || props.outline || props.inForm) {
       localVariant = 'outline';
       localSize = 'medium';

diff --git a/code/ui/components/src/components/form/form.stories.tsx b/code/ui/components/src/components/form/form.stories.tsx
@@ -84,15 +84,6 @@ export const Select = {
   },
 };
 
-export const Button = {
-  render: (args: any) => (
-    <Flexed>
-      <InputComponents.Button {...args}>Form Button</InputComponents.Button>
-    </Flexed>
-  ),
-  argTypes: sharedArgTypes,
-};
-
 export const Textarea = {
   render: (args: any) => (
     <Flexed>

diff --git a/code/ui/components/src/components/form/index.tsx b/code/ui/components/src/components/form/index.tsx
@@ -1,6 +1,7 @@
 import { styled } from '@storybook/theming';
 import { Field } from './field/field';
-import { Input, Select, Textarea, Button } from './input/input';
+import { Input, Select, Textarea } from './input/input';
+import { Button } from '../Button/Button';
 
 export const Form = Object.assign(
   styled.form({

diff --git a/code/ui/components/src/components/form/input/input.tsx b/code/ui/components/src/components/form/input/input.tsx
@@ -1,13 +1,11 @@
-import type { FC, HTMLProps, SelectHTMLAttributes } from 'react';
+import type { HTMLProps, SelectHTMLAttributes } from 'react';
 import React, { forwardRef } from 'react';
 import type { Theme, CSSObject } from '@storybook/theming';
 import { styled } from '@storybook/theming';
 
 import type { TextareaAutosizeProps } from 'react-textarea-autosize';
 import TextareaAutoResize from 'react-textarea-autosize';
 
-import { Button as StyledButton } from '../../Button/Button';
-
 const styleResets: CSSObject = {
   // resets
   appearance: 'none',
@@ -205,41 +203,3 @@ export const Textarea = Object.assign(
     displayName: 'Textarea',
   }
 );
-
-const ButtonStyled = styled(
-  forwardRef<
-    any,
-    {
-      size?: Sizes;
-      align?: Alignments;
-      valid?: ValidationStates;
-      height?: number;
-    }
-  >(function ButtonStyled({ size, valid, align, ...props }, ref) {
-    return <StyledButton {...props} ref={ref} />;
-  })
-)<{
-  size?: Sizes;
-  align?: Alignments;
-  valid?: ValidationStates;
-  height?: number;
-}>(sizes, validation, {
-  // Custom styling for color widget nested in buttons
-  userSelect: 'none',
-  overflow: 'visible',
-  zIndex: 2,
-
-  // overrides the default hover from Button
-  '&:hover': {
-    transform: 'none',
-  },
-});
-
-export const Button: FC<any> = Object.assign(
-  forwardRef<{}, {}>(function Button(props, ref) {
-    return <ButtonStyled {...props} {...{ tertiary: true, small: true, inForm: true }} ref={ref} />;
-  }),
-  {
-    displayName: 'Button',
-  }
-);
diff --git a/code/ui/manager/src/settings/shortcuts.tsx b/code/ui/manager/src/settings/shortcuts.tsx
@@ -7,7 +7,7 @@ import {
   shortcutToHumanString,
   shortcutMatchesShortcut,
 } from '@storybook/manager-api';
-import { Form, Icons } from '@storybook/components';
+import { Button, Form, Icons } from '@storybook/components';
 import SettingsFooter from './SettingsFooter';
 
 const Header = styled.header(({ theme }) => ({
@@ -307,9 +307,14 @@ class ShortcutsScreen extends Component<ShortcutsScreenProps, ShortcutsScreenSta
         <Header>Keyboard shortcuts</Header>
 
         {layout}
-        <Form.Button tertiary small id="restoreDefaultsHotkeys" onClick={this.restoreDefaults}>
+        <Button
+          variant="outline"
+          size="small"
+          id="restoreDefaultsHotkeys"
+          onClick={this.restoreDefaults}
+        >
           Restore defaults
-        </Form.Button>
+        </Button>
 
         <SettingsFooter />
       </Container>