From 0fd8c11eb10df64df596becc87fa663e78ddf739 Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 22 Jun 2020 19:14:01 -0400 Subject: [PATCH 01/10] make boolean control more descriptive --- lib/components/src/controls/Boolean.tsx | 91 ++++++++++++++++++++----- 1 file changed, 74 insertions(+), 17 deletions(-) diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx index 7cc22467c3b..3c3a4c225e8 100644 --- a/lib/components/src/controls/Boolean.tsx +++ b/lib/components/src/controls/Boolean.tsx @@ -1,29 +1,86 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; +import { darken, lighten, rgba, 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', + }, + + span: { + 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: opacify(0.7, 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 & BooleanConfig; export const BooleanControl: FC = ({ name, value, onChange }) => ( - onChange(name, e.target.checked)} - checked={value} - /> + ); From df1bf21d8c64c898383188a7cf964b9d452f62d1 Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 22 Jun 2020 19:33:33 -0400 Subject: [PATCH 02/10] improve Boolean layout so that the buttons have similar widths --- lib/components/src/controls/Boolean.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx index 3c3a4c225e8..521a69201d8 100644 --- a/lib/components/src/controls/Boolean.tsx +++ b/lib/components/src/controls/Boolean.tsx @@ -27,6 +27,8 @@ const Label = styled.label(({ theme }) => ({ }, span: { + minWidth: 60, + textAlign: 'center', fontSize: theme.typography.size.s1, fontWeight: theme.typography.weight.bold, lineHeight: '1', From 34964488b054d33347dfda0a73a1bbf44594877a Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 22 Jun 2020 19:34:29 -0400 Subject: [PATCH 03/10] resize error message in Controls addon in the addon panel --- addons/controls/src/components/ControlsPanel.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/addons/controls/src/components/ControlsPanel.tsx b/addons/controls/src/components/ControlsPanel.tsx index 91d273bb22a..294ac454e9c 100644 --- a/addons/controls/src/components/ControlsPanel.tsx +++ b/addons/controls/src/components/ControlsPanel.tsx @@ -11,7 +11,9 @@ interface ControlsParameters { const NoControlsWrapper = styled.div(({ theme }) => ({ background: theme.background.warning, - padding: 20, + padding: '10px 15px', + lineHeight: '20px', + boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, })); const NoControlsWarning = () => ( From 9f8fa39e28dd0a636a64f44308912b76a64ed73a Mon Sep 17 00:00:00 2001 From: domyen Date: Mon, 22 Jun 2020 19:52:09 -0400 Subject: [PATCH 04/10] Improve Boolean control focus state --- lib/components/src/controls/Boolean.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx index 521a69201d8..e4d7276928e 100644 --- a/lib/components/src/controls/Boolean.tsx +++ b/lib/components/src/controls/Boolean.tsx @@ -24,6 +24,14 @@ const Label = styled.label(({ theme }) => ({ border: 'none', background: 'transparent', cursor: 'pointer', + + '&:focus': { + outline: 'none', + + '& ~ span': { + boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`, + }, + }, }, span: { From 6460520f5291a7f83ec426195fb0ae03b2b99307 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 23 Jun 2020 08:39:46 +0800 Subject: [PATCH 05/10] ArgsTable: Refactor no controls warning & add stories --- .../controls/src/components/ControlsPanel.tsx | 24 ++----------------- .../src/components/NoControlsWarning.tsx | 23 ++++++++++++++++++ .../blocks/ArgsTable/ArgsTable.stories.tsx | 16 +++++++++++-- .../blocks/ArgsTable/NoControlsWarning.tsx | 23 ++++++++++++++++++ 4 files changed, 62 insertions(+), 24 deletions(-) create mode 100644 addons/controls/src/components/NoControlsWarning.tsx create mode 100644 lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx diff --git a/addons/controls/src/components/ControlsPanel.tsx b/addons/controls/src/components/ControlsPanel.tsx index 294ac454e9c..8863ebe7da7 100644 --- a/addons/controls/src/components/ControlsPanel.tsx +++ b/addons/controls/src/components/ControlsPanel.tsx @@ -1,7 +1,7 @@ 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 { @@ -9,26 +9,6 @@ interface ControlsParameters { hideNoControlsWarning?: boolean; } -const NoControlsWrapper = styled.div(({ theme }) => ({ - background: theme.background.warning, - padding: '10px 15px', - lineHeight: '20px', - boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, -})); - -const NoControlsWarning = () => ( - - This story is not configured to handle controls.  - - Learn how to add controls » - - -); - export const ControlsPanel: FC = () => { const [args, updateArgs] = useArgs(); const rows = useArgTypes(); diff --git a/addons/controls/src/components/NoControlsWarning.tsx b/addons/controls/src/components/NoControlsWarning.tsx new file mode 100644 index 00000000000..5e4038f1a02 --- /dev/null +++ b/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 = () => ( + + This story is not configured to handle controls.  + + Learn how to add controls » + + +); diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx index d733060152b..3446994f1f8 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { ArgsTable, ArgsTableError } from './ArgsTable'; +import { NoControlsWarning } from './NoControlsWarning'; import * as ArgRow from './ArgRow.stories'; export default { @@ -36,12 +37,23 @@ Compact.args = { compact: true, }; -export const inAddonPanel = Story.bind({}); -inAddonPanel.args = { +export const InAddonPanel = Story.bind({}); +InAddonPanel.args = { ...Normal.args, inAddonPanel: true, }; +export const InAddonPanelWithWarning = (args) => ( + <> + + + +); +InAddonPanelWithWarning.args = { + ...InAddonPanel.args, + updateArgs: null, +}; + export const Sections = Story.bind({}); Sections.args = { rows: { diff --git a/lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx b/lib/components/src/blocks/ArgsTable/NoControlsWarning.tsx new file mode 100644 index 00000000000..c4b2e16998d --- /dev/null +++ b/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 = () => ( + + This story is not configured to handle controls.  + + Learn how to add controls » + + +); From a10e86489cd5eef9f9b680d72cf0644aa0c02b03 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 23 Jun 2020 09:36:46 +0800 Subject: [PATCH 06/10] ArgsTable: Fix missing export --- lib/components/src/blocks/ArgsTable/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/components/src/blocks/ArgsTable/index.ts b/lib/components/src/blocks/ArgsTable/index.ts index 3be4e9b364c..0a001b28030 100644 --- a/lib/components/src/blocks/ArgsTable/index.ts +++ b/lib/components/src/blocks/ArgsTable/index.ts @@ -1,3 +1,4 @@ export * from './types'; export * from './ArgsTable'; export * from './TabbedArgsTable'; +export * from './NoControlsWarning'; From 51b15819e2ba21f33e2f32afe7eb8b1efb3783d2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 23 Jun 2020 11:06:10 +0800 Subject: [PATCH 07/10] ArgsTable: Fix story styling & misc warnings --- lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx | 8 ++++++++ lib/components/src/blocks/ArgsTable/ArgsTable.tsx | 7 +++---- .../src/blocks/ArgsTable/SectionRow.stories.tsx | 4 +++- 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx index 3446994f1f8..9c061c37884 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/ArgsTable.stories.tsx @@ -1,5 +1,6 @@ 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'; @@ -37,11 +38,17 @@ Compact.args = { compact: true, }; +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) => {storyFn()}]; export const InAddonPanelWithWarning = (args) => ( <> @@ -53,6 +60,7 @@ InAddonPanelWithWarning.args = { ...InAddonPanel.args, updateArgs: null, }; +InAddonPanelWithWarning.decorators = InAddonPanel.decorators; export const Sections = Story.bind({}); Sections.args = { diff --git a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx b/lib/components/src/blocks/ArgsTable/ArgsTable.tsx index 951f10c791b..61ec4f4b778 100644 --- a/lib/components/src/blocks/ArgsTable/ArgsTable.tsx +++ b/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 = (props) => { const { rows, args, updateArgs, compact, inAddonPanel } = props as ArgsTableRowProps; const groups = groupRows(rows); - console.log(groups); if ( groups.ungrouped.length === 0 && diff --git a/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx b/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx index b2f966735eb..8e5eee827ea 100644 --- a/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx +++ b/lib/components/src/blocks/ArgsTable/SectionRow.stories.tsx @@ -31,7 +31,9 @@ Collapsed.args = { ...Section.args, initialExpanded: false }; export const Nested = () => ( -
Some content
+ + Some content + ); From cd88b919de51b0845546bfe033809cb35eb9ffe6 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 23 Jun 2020 14:34:11 +0800 Subject: [PATCH 08/10] ArgsTable: Subdue deselected text in Boolean control --- lib/components/src/controls/Boolean.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx index e4d7276928e..46c84489aec 100644 --- a/lib/components/src/controls/Boolean.tsx +++ b/lib/components/src/controls/Boolean.tsx @@ -48,7 +48,7 @@ const Label = styled.label(({ theme }) => ({ borderRadius: '3em', boxShadow: `${opacify(0.05, theme.appBorderColor)} 0 0 0 1px inset`, - color: opacify(0.7, theme.color.defaultText), + color: transparentize(0.4, theme.color.defaultText), background: 'transparent', '&:hover': { From b7fe4878c90ed2ad55d49038ed89039efd648819 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 23 Jun 2020 15:01:20 +0800 Subject: [PATCH 09/10] Fix deepscan --- lib/components/src/controls/Boolean.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/src/controls/Boolean.tsx b/lib/components/src/controls/Boolean.tsx index 46c84489aec..cd33d862194 100644 --- a/lib/components/src/controls/Boolean.tsx +++ b/lib/components/src/controls/Boolean.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; import { styled } from '@storybook/theming'; -import { darken, lighten, rgba, opacify, transparentize } from 'polished'; +import { opacify, transparentize } from 'polished'; import { ControlProps, BooleanValue, BooleanConfig } from './types'; From 57b0d5b8686d062f0256a0462d1e69c8adf871b0 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 23 Jun 2020 15:03:48 +0800 Subject: [PATCH 10/10] Doc blocks: Fix Description story --- lib/components/src/blocks/Description.stories.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx index 8d9bf916aba..641aee8e40c 100644 --- a/lib/components/src/blocks/Description.stories.tsx +++ b/lib/components/src/blocks/Description.stories.tsx @@ -10,15 +10,14 @@ export default { const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`; -export const Text = (args) => { - console.log({ args }); - return ; -}; +const Story = (args) => ; + +export const Text = Story.bind({}); Text.args = { markdown: textCaption, }; -export const Markdown = (args) => ; +export const Markdown = Story.bind({}); Markdown.args = { markdown: markdownCaption, };