From c4ee5ed4a18b2ce6610b3a749c1cd57955698cd6 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 17 Oct 2022 15:17:22 +1000 Subject: [PATCH 1/6] BorderBoxControl: Refactor storybook to TypeScript --- .../border-box-control/component.tsx | 59 ++++++++++- .../stories/{index.js => index.tsx} | 98 ++++++++++--------- 2 files changed, 104 insertions(+), 53 deletions(-) rename packages/components/src/border-box-control/stories/{index.js => index.tsx} (52%) diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx index c25e572f40e89c..4918abafebfce3 100644 --- a/packages/components/src/border-box-control/border-box-control/component.tsx +++ b/packages/components/src/border-box-control/border-box-control/component.tsx @@ -37,8 +37,8 @@ const BorderLabel = ( props: LabelProps ) => { ); }; -const BorderBoxControl = ( - props: WordPressComponentProps< BorderBoxControlProps, 'div' >, +const UnconnectedBorderBoxControl = ( + props: WordPressComponentProps< BorderBoxControlProps, 'div', false >, forwardedRef: React.ForwardedRef< any > ) => { const { @@ -153,9 +153,58 @@ const BorderBoxControl = ( ); }; -const ConnectedBorderBoxControl = contextConnect( - BorderBoxControl, +/** + * The `BorderBoxControl` effectively has two view states. The first, a "linked" + * view, allows configuration of a flat border via a single `BorderControl`. + * The second, a "split" view, contains a `BorderControl` for each side + * as well as a visualizer for the currently selected borders. Each view also + * contains a button to toggle between the two. + * + * When switching from the "split" view to "linked", if the individual side + * borders are not consistent, the "linked" view will display any border + * properties selections that are consistent while showing a mixed state for + * those that aren't. For example, if all borders had the same color and style + * but different widths, then the border dropdown in the "linked" view's + * `BorderControl` would show that consistent color and style but the "linked" + * view's width input would show "Mixed" placeholder text. + * + * ```jsx + * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components'; + * import { __ } from '@wordpress/i18n'; + * + * const colors = [ + * { name: 'Blue 20', color: '#72aee6' }, + * // ... + * ]; + * + * const MyBorderBoxControl = () => { + * const defaultBorder = { + * color: '#72aee6', + * style: 'dashed', + * width: '1px', + * }; + * const [ borders, setBorders ] = useState( { + * top: defaultBorder, + * right: defaultBorder, + * bottom: defaultBorder, + * left: defaultBorder, + * } ); + * const onChange = ( newBorders ) => setBorders( newBorders ); + * + * return ( + * + * ); + * }; + * ``` + */ +export const BorderBoxControl = contextConnect( + UnconnectedBorderBoxControl, 'BorderBoxControl' ); -export default ConnectedBorderBoxControl; +export default BorderBoxControl; diff --git a/packages/components/src/border-box-control/stories/index.js b/packages/components/src/border-box-control/stories/index.tsx similarity index 52% rename from packages/components/src/border-box-control/stories/index.js rename to packages/components/src/border-box-control/stories/index.tsx index 158f07f16fbea9..1717db32811a45 100644 --- a/packages/components/src/border-box-control/stories/index.js +++ b/packages/components/src/border-box-control/stories/index.tsx @@ -1,12 +1,13 @@ /** * External dependencies */ -import styled from '@emotion/styled'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentProps } from 'react'; /** * WordPress dependencies */ -import { useEffect, useState } from '@wordpress/element'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -16,6 +17,22 @@ import Popover from '../../popover'; import { BorderBoxControl } from '../'; import { Provider as SlotFillProvider } from '../../slot-fill'; +import type { AnyBorder } from '../types'; + +const meta: ComponentMeta< typeof BorderBoxControl > = { + title: 'Components (Experimental)/BorderBoxControl', + component: BorderBoxControl, + argTypes: { + onChange: { action: 'onChange' }, + value: { control: { type: null } }, + }, + parameters: { + controls: { expanded: true }, + docs: { source: { state: 'open' } }, + }, +}; +export default meta; + // Available border colors. const colors = [ { name: 'Gray 0', color: '#f6f7f7' }, @@ -35,72 +52,57 @@ const colors = [ { name: 'Yellow 40', color: '#bd8600' }, ]; -export default { - title: 'Components (Experimental)/BorderBoxControl', - component: BorderBoxControl, - parameters: { - knobs: { disable: false }, - }, -}; +const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => { + const { onChange, ...otherProps } = props; + const [ borders, setBorders ] = useState< AnyBorder >(); -const _default = ( props ) => { - const { defaultBorder } = props; - const [ borders, setBorders ] = useState( defaultBorder ); - - useEffect( () => setBorders( defaultBorder ), [ defaultBorder ] ); + const onChangeMerged: ComponentProps< + typeof BorderBoxControl + >[ 'onChange' ] = ( newBorders ) => { + setBorders( newBorders ); + onChange( newBorders ); + }; return ( - +
setBorders( newBorders ) } + { ...otherProps } + onChange={ onChangeMerged } value={ borders } - { ...props } /> - - - +
+
+

The BorderBoxControl is intended to be used within a component that will provide reset controls. The button below is only for convenience. - - + { /* @ts-expect-error Ignore until Popover is converted to TS */ } ); }; - -export const Default = _default.bind( {} ); +export const Default = Template.bind( {} ); Default.args = { + colors, + label: 'Borders', disableCustomColors: false, enableAlpha: true, enableStyle: true, - defaultBorder: { - color: '#72aee6', - style: 'dashed', - width: '1px', - }, size: 'default', popoverPlacement: 'right-start', }; - -const WrapperView = styled.div` - max-width: 248px; - padding: 16px; -`; - -const Separator = styled.hr` - margin-top: 100px; - border-color: #ddd; - border-style: solid; - border-bottom: none; -`; - -const HelpText = styled.p` - color: #aaa; - font-size: 0.9em; -`; From 8e0bda234d3e1760e45cff71a7ab9485bd666e2c Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Mon, 17 Oct 2022 15:29:27 +1000 Subject: [PATCH 2/6] Add changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index abdb1dc8110570..e1f944005aca22 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -24,6 +24,7 @@ - `SlotFill`: updated to satisfy `react/exhaustive-deps` eslint rule ([#44403](https://github.com/WordPress/gutenberg/pull/44403)) - `Context`: updated to ignore `react/exhaustive-deps` eslint rule ([#45044](https://github.com/WordPress/gutenberg/pull/45044)) - `Button`: Refactor Storybook to controls and align docs ([#44105](https://github.com/WordPress/gutenberg/pull/44105)). +- `BorderBoxControl`: Convert stories to TypeScript and use Controls ([#45002](https://github.com/WordPress/gutenberg/pull/45002)). ## 21.3.0 (2022-10-19) From e8ed6d4efb4bc9711bbdffa63c338ff8c269aa04 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 19 Oct 2022 17:07:23 +1000 Subject: [PATCH 3/6] Shorten available colors array Also fixes the duplicate colors that were in the BorderControl's shortened color array. --- .../src/border-box-control/stories/index.tsx | 9 --------- .../components/src/border-control/stories/index.tsx | 12 ++++++------ 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/components/src/border-box-control/stories/index.tsx b/packages/components/src/border-box-control/stories/index.tsx index 1717db32811a45..3850739b646136 100644 --- a/packages/components/src/border-box-control/stories/index.tsx +++ b/packages/components/src/border-box-control/stories/index.tsx @@ -35,19 +35,10 @@ export default meta; // Available border colors. const colors = [ - { name: 'Gray 0', color: '#f6f7f7' }, - { name: 'Gray 5', color: '#dcdcde' }, - { name: 'Gray 20', color: '#a7aaad' }, - { name: 'Gray 70', color: '#3c434a' }, - { name: 'Gray 100', color: '#101517' }, { name: 'Blue 20', color: '#72aee6' }, { name: 'Blue 40', color: '#3582c4' }, - { name: 'Blue 70', color: '#0a4b78' }, { name: 'Red 40', color: '#e65054' }, { name: 'Red 70', color: '#8a2424' }, - { name: 'Green 10', color: '#68de7c' }, - { name: 'Green 40', color: '#00a32a' }, - { name: 'Green 60', color: '#007017' }, { name: 'Yellow 10', color: '#f2d675' }, { name: 'Yellow 40', color: '#bd8600' }, ]; diff --git a/packages/components/src/border-control/stories/index.tsx b/packages/components/src/border-control/stories/index.tsx index 59aa440591b7f3..4d340d5fd088f3 100644 --- a/packages/components/src/border-control/stories/index.tsx +++ b/packages/components/src/border-control/stories/index.tsx @@ -36,12 +36,12 @@ export default meta; // Available border colors. const colors = [ - { name: 'Blue', color: '#72aee6' }, - { name: 'Red', color: '#e65054' }, - { name: 'Yellow', color: '#f2d675' }, - { name: 'Blue', color: '#72aee6' }, - { name: 'Red', color: '#e65054' }, - { name: 'Yellow', color: '#f2d675' }, + { name: 'Blue 20', color: '#72aee6' }, + { name: 'Blue 40', color: '#3582c4' }, + { name: 'Red 40', color: '#e65054' }, + { name: 'Red 70', color: '#8a2424' }, + { name: 'Yellow 10', color: '#f2d675' }, + { name: 'Yellow 40', color: '#bd8600' }, ]; // Multiple origin colors. From e9c47419acdb423122566b1b4eaaab64be62ad28 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 19 Oct 2022 17:08:42 +1000 Subject: [PATCH 4/6] Improve accuracy of ts expect error comment --- packages/components/src/border-box-control/stories/index.tsx | 2 +- packages/components/src/border-control/stories/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/border-box-control/stories/index.tsx b/packages/components/src/border-box-control/stories/index.tsx index 3850739b646136..4474e0f0021def 100644 --- a/packages/components/src/border-box-control/stories/index.tsx +++ b/packages/components/src/border-box-control/stories/index.tsx @@ -82,7 +82,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => { > Reset - { /* @ts-expect-error Ignore until Popover is converted to TS */ } + { /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ } ); diff --git a/packages/components/src/border-control/stories/index.tsx b/packages/components/src/border-control/stories/index.tsx index 4d340d5fd088f3..33f28cb9bd4351 100644 --- a/packages/components/src/border-control/stories/index.tsx +++ b/packages/components/src/border-control/stories/index.tsx @@ -91,7 +91,7 @@ const Template: ComponentStory< typeof BorderControl > = ( { { ...props } /> - { /* @ts-expect-error Ignore until Popover is converted to TS */ } + { /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ } ); From 483d7ebe3b5c89bb2c4cf2ec7843d802a37a29d7 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 19 Oct 2022 17:10:39 +1000 Subject: [PATCH 5/6] Clean up border values type in story --- packages/components/src/border-box-control/stories/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/border-box-control/stories/index.tsx b/packages/components/src/border-box-control/stories/index.tsx index 4474e0f0021def..9d9f4e75d32156 100644 --- a/packages/components/src/border-box-control/stories/index.tsx +++ b/packages/components/src/border-box-control/stories/index.tsx @@ -17,8 +17,6 @@ import Popover from '../../popover'; import { BorderBoxControl } from '../'; import { Provider as SlotFillProvider } from '../../slot-fill'; -import type { AnyBorder } from '../types'; - const meta: ComponentMeta< typeof BorderBoxControl > = { title: 'Components (Experimental)/BorderBoxControl', component: BorderBoxControl, @@ -45,7 +43,7 @@ const colors = [ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => { const { onChange, ...otherProps } = props; - const [ borders, setBorders ] = useState< AnyBorder >(); + const [ borders, setBorders ] = useState< typeof props[ 'value' ] >(); const onChangeMerged: ComponentProps< typeof BorderBoxControl From 827ec9bf9b81a8948c9995cc9f3cdf0e5e6c2872 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 19 Oct 2022 17:15:28 +1000 Subject: [PATCH 6/6] Remove extraneous default args from main story --- packages/components/src/border-box-control/stories/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/components/src/border-box-control/stories/index.tsx b/packages/components/src/border-box-control/stories/index.tsx index 9d9f4e75d32156..4e0cb56379ccf2 100644 --- a/packages/components/src/border-box-control/stories/index.tsx +++ b/packages/components/src/border-box-control/stories/index.tsx @@ -89,9 +89,4 @@ export const Default = Template.bind( {} ); Default.args = { colors, label: 'Borders', - disableCustomColors: false, - enableAlpha: true, - enableStyle: true, - size: 'default', - popoverPlacement: 'right-start', };