ArgsTable: Updated Boolean control

addons/controls/src/components/ControlsPanel.tsx

@@ -1,32 +1,14 @@
 import React, { FC } from 'react';
-import { styled } from '@storybook/theming';
-import { ArgsTable, Link } from '@storybook/components';
+import { ArgsTable, NoControlsWarning } from '@storybook/components';
 import { useArgs, useArgTypes, useParameter } from '@storybook/api';
+
 import { PARAM_KEY } from '../constants';
 
 interface ControlsParameters {
   expanded?: boolean;
   hideNoControlsWarning?: boolean;
 }
 
-const NoControlsWrapper = styled.div(({ theme }) => ({
-  background: theme.background.warning,
-  padding: 20,
-}));
-
-const NoControlsWarning = () => (
-  <NoControlsWrapper>
-    This story is not configured to handle controls.&nbsp;
-    <Link
-      href="https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories"
-      target="_blank"
-      cancel={false}
-    >
-      Learn how to add controls »
-    </Link>
-  </NoControlsWrapper>
-);
-
 export const ControlsPanel: FC = () => {
   const [args, updateArgs] = useArgs();
   const rows = useArgTypes();

addons/controls/src/components/NoControlsWarning.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { Link } from '@storybook/components';
+
+const NoControlsWrapper = styled.div(({ theme }) => ({
+  background: theme.background.warning,
+  padding: '10px 15px',
+  lineHeight: '20px',
+  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
+}));
+
+export const NoControlsWarning = () => (
+  <NoControlsWrapper>
+    This story is not configured to handle controls.&nbsp;
+    <Link
+      href="https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories"
+      target="_blank"
+      cancel={false}
+    >
+      Learn how to add controls »
+    </Link>
+  </NoControlsWrapper>
+);

lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
+import { styled } from '@storybook/theming';
 import { ArgsTable, ArgsTableError } from './ArgsTable';
+import { NoControlsWarning } from './NoControlsWarning';
 import * as ArgRow from './ArgRow.stories';
 
 export default {
@@ -36,11 +38,29 @@ Compact.args = {
   compact: true,
 };
 
-export const inAddonPanel = Story.bind({});
-inAddonPanel.args = {
+const AddonPanelLayout = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
+  background: theme.background.content,
+}));
+
+export const InAddonPanel = Story.bind({});
+InAddonPanel.args = {
   ...Normal.args,
   inAddonPanel: true,
 };
+InAddonPanel.decorators = [(storyFn) => <AddonPanelLayout>{storyFn()}</AddonPanelLayout>];
+
+export const InAddonPanelWithWarning = (args) => (
+  <>
+    <NoControlsWarning />
+    <ArgsTable {...args} />
+  </>
+);
+InAddonPanelWithWarning.args = {
+  ...InAddonPanel.args,
+  updateArgs: null,
+};
+InAddonPanelWithWarning.decorators = InAddonPanel.decorators;
 
 export const Sections = Story.bind({});
 Sections.args = {

lib/components/src/blocks/ArgsTable/ArgsTable.tsx

@@ -189,16 +189,16 @@ const groupRows = (rows: ArgType) => {
     if (category) {
       const section = sections.sections[category] || { ungrouped: [], subsections: {} };
       if (!subcategory) {
-        section.ungrouped.push(row);
+        section.ungrouped.push({ key, ...row });
       } else {
         const subsection = section.subsections[subcategory] || [];
-        subsection.push(row);
+        subsection.push({ key, ...row });
         section.subsections[subcategory] = subsection;
       }
       sections.sections[category] = section;
     } else if (subcategory) {
       const subsection = sections.ungroupedSubsections[subcategory] || [];
-      subsection.push(row);
+      subsection.push({ key, ...row });
       sections.ungroupedSubsections[subcategory] = subsection;
     } else {
       sections.ungrouped.push({ key, ...row });
@@ -227,7 +227,6 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   const { rows, args, updateArgs, compact, inAddonPanel } = props as ArgsTableRowProps;
 
   const groups = groupRows(rows);
-  console.log(groups);
 
   if (
     groups.ungrouped.length === 0 &&

lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { Link } from '../../typography/link/link';
+
+const NoControlsWrapper = styled.div(({ theme }) => ({
+  background: theme.background.warning,
+  padding: '10px 15px',
+  lineHeight: '20px',
+  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
+}));
+
+export const NoControlsWarning = () => (
+  <NoControlsWrapper>
+    This story is not configured to handle controls.&nbsp;
+    <Link
+      href="https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories"
+      target="_blank"
+      cancel={false}
+    >
+      Learn how to add controls »
+    </Link>
+  </NoControlsWrapper>
+);

lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx

@@ -31,7 +31,9 @@ Collapsed.args = { ...Section.args, initialExpanded: false };
 export const Nested = () => (
   <SectionRow {...Section.args}>
     <SectionRow {...Subsection.args}>
-      <div>Some content</div>
+      <tr>
+        <td>Some content</td>
+      </tr>
     </SectionRow>
   </SectionRow>
 );

lib/components/src/blocks/ArgsTable/index.ts

@@ -1,3 +1,4 @@
 export * from './types';
 export * from './ArgsTable';
 export * from './TabbedArgsTable';
+export * from './NoControlsWarning';

lib/components/src/controls/Boolean.tsx

@@ -1,29 +1,96 @@
 import React, { FC } from 'react';
 
 import { styled } from '@storybook/theming';
+import { opacify, transparentize } from 'polished';
+
 import { ControlProps, BooleanValue, BooleanConfig } from './types';
 
-const Input = styled.input({
-  display: 'table-cell',
-  boxSizing: 'border-box',
-  verticalAlign: 'top',
-  height: 21,
-  outline: 'none',
-  border: '1px solid #ececec',
-  fontSize: '12px',
-  color: '#555',
-});
+const Label = styled.label(({ theme }) => ({
+  lineHeight: '20px',
+  alignItems: 'center',
+  marginBottom: 8,
+  display: 'inline-block',
+  position: 'relative',
+
+  input: {
+    appearance: 'none',
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    margin: 0,
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    cursor: 'pointer',
+
+    '&:focus': {
+      outline: 'none',
+
+      '& ~ span': {
+        boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`,
+      },
+    },
+  },
+
+  span: {
+    minWidth: 60,
+    textAlign: 'center',
+    fontSize: theme.typography.size.s1,
+    fontWeight: theme.typography.weight.bold,
+    lineHeight: '1',
+    cursor: 'pointer',
+    display: 'inline-block',
+    padding: '8px 16px',
+    transition: 'all 150ms ease-out',
+    userSelect: 'none',
+    borderRadius: '3em',
+
+    boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 1px inset`,
+    color: transparentize(0.4, theme.color.defaultText),
+    background: 'transparent',
+
+    '&:hover': {
+      boxShadow: `${opacify(0.3, theme.appBorderColor)} 0 0 0 1px inset`,
+    },
+
+    '&:active': {
+      boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 2px inset`,
+      color: opacify(1, theme.appBorderColor),
+    },
+
+    '&:first-of-type': {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+    '&:last-of-type': {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
+  },
+
+  'input:checked ~ span:first-of-type, input:not(:checked) ~ span:last-of-type': {
+    background: `${opacify(0.05, theme.appBorderColor)}`,
+    boxShadow: `transparent 0 0 0 1px inset`,
+    color: theme.color.darkest,
+  },
+}));
 
 const format = (value: BooleanValue): string | null => (value ? String(value) : null);
 const parse = (value: string | null) => value === 'true';
 
 export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
 export const BooleanControl: FC<BooleanProps> = ({ name, value, onChange }) => (
-  <Input
-    id={name}
-    name={name}
-    type="checkbox"
-    onChange={(e) => onChange(name, e.target.checked)}
-    checked={value}
-  />
+  <Label htmlFor={name}>
+    <input
+      id={name}
+      name={name}
+      type="checkbox"
+      onChange={(e) => onChange(name, e.target.checked)}
+      checked={value}
+    />
+    <span>True</span>
+    <span>False</span>
+  </Label>
 );