Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: Storybook: Improve component organisation - Selection & Input Category - Issue #66275 #66635

Merged
merged 14 commits into from
Nov 13, 2024
Merged

Feat: Storybook: Improve component organisation - Selection & Input Category - Issue #66275 #66635

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
83c7e92
Update the storybook components for selection and input category
hbhalodia Oct 31, 2024
8efe820
Add treeselect under selection&input category and revert experimental…
hbhalodia Oct 31, 2024
e1aaa70
Fix experimental id and sort folders alphabetically
hbhalodia Nov 7, 2024
ca59af4
Fix the experimental id for toggleGroupControl
hbhalodia Nov 7, 2024
9f94941
Merge branch 'trunk' into feat/issue-66275-selection-and-input
hbhalodia Nov 7, 2024
5ea3c89
Revert changes that are not needed in PR
hbhalodia Nov 8, 2024
63d917e
Merge branch 'trunk' into feat/issue-66275-selection-and-input
hbhalodia Nov 8, 2024
f765924
Revert the missing change on conflict resolve
hbhalodia Nov 8, 2024
72e03b6
Merge branch 'trunk' into feat/issue-66275-selection-and-input
mirka Nov 13, 2024
2f19e54
Fix formatting
mirka Nov 13, 2024
368b4a7
Fixup (Sort experimental Actions)
mirka Nov 13, 2024
8f01d73
Remove unnecessary experimental Common grouping
mirka Nov 13, 2024
ba02698
Remove excessive Search & Filtering grouping
mirka Nov 13, 2024
d1f8577
Merge branch 'trunk' into feat/issue-66275-selection-and-input
mirka Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/components/src/base-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import BaseControl, { useBaseControlProps } from '..';
import Button from '../../button';

const meta: Meta< typeof BaseControl > = {
title: 'Components/BaseControl',
title: 'Components/Selection & Input/Common/BaseControl',
id: 'components-basecontrol',
component: BaseControl,
subcomponents: {
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/checkbox-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import { HStack } from '../../h-stack';

const meta: Meta< typeof CheckboxControl > = {
component: CheckboxControl,
title: 'Components/CheckboxControl',
title: 'Components/Selection & Input/Common/CheckboxControl',
id: 'components-checkboxcontrol',
argTypes: {
onChange: {
action: 'onChange',
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/circular-option-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const CircularOptionPickerStoryContext = createContext< {
} >( {} );

const meta: Meta< typeof CircularOptionPicker > = {
title: 'Components/CircularOptionPicker',
title: 'Components/Selection & Input/Color/CircularOptionPicker',
id: 'components-circularoptionpicker',
component: CircularOptionPicker,
subcomponents: {
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/color-indicator/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import ColorIndicator from '..';

const meta: Meta< typeof ColorIndicator > = {
component: ColorIndicator,
title: 'Components/ColorIndicator',
title: 'Components/Selection & Input/Color/ColorIndicator',
id: 'components-colorindicator',
argTypes: {
colorValue: {
control: { type: 'color' },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/color-palette/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
import ColorPalette from '..';

const meta: Meta< typeof ColorPalette > = {
title: 'Components/ColorPalette',
title: 'Components/Selection & Input/Color/ColorPalette',
id: 'components-colorpalette',
component: ColorPalette,
argTypes: {
as: { control: { type: null } },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/color-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import { ColorPicker } from '../component';

const meta: Meta< typeof ColorPicker > = {
component: ColorPicker,
title: 'Components/ColorPicker',
title: 'Components/Selection & Input/Color/ColorPicker',
id: 'components-colorpicker',
argTypes: {
as: { control: { type: null } },
color: { control: { type: null } },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/combobox-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ const countries = [
];

const meta: Meta< typeof ComboboxControl > = {
title: 'Components/ComboboxControl',
title: 'Components/Selection & Input/Common/ComboboxControl',
id: 'components-comboboxcontrol',
component: ComboboxControl,
argTypes: {
value: { control: { type: null } },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/custom-gradient-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import { useState } from '@wordpress/element';
import CustomGradientPicker from '../';

const meta: Meta< typeof CustomGradientPicker > = {
title: 'Components/CustomGradientPicker',
title: 'Components/Selection & Input/Color/CustomGradientPicker',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is displayed under "Deprecated", but it makes sense to be in Color for now because we've technically not deprecated it just yet 👍

id: 'components-customgradientpicker',
component: CustomGradientPicker,
parameters: {
actions: { argTypesRegex: '^on.*' },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/custom-select-control-v2/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
import CustomSelectControlV2 from '..';

const meta: Meta< typeof CustomSelectControlV2 > = {
title: 'Components/CustomSelectControl v2',
title: 'Components/Selection & Input/Common/CustomSelectControl v2',
id: 'components-customselectcontrolv2',
hbhalodia marked this conversation as resolved.
Show resolved Hide resolved
component: CustomSelectControlV2,
subcomponents: {
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/date-time/stories/date-time.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import DateTimePicker from '../date-time';
import { daysFromNow, isWeekend } from './utils';

const meta: Meta< typeof DateTimePicker > = {
title: 'Components/DateTimePicker',
title: 'Components/Selection & Input/Time & Date/DateTimePicker',
id: 'components-datetimepicker',
component: DateTimePicker,
argTypes: {
currentDate: { control: 'date' },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/date-time/stories/date.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import DatePicker from '../date';
import { daysFromNow, isWeekend } from './utils';

const meta: Meta< typeof DatePicker > = {
title: 'Components/DatePicker',
title: 'Components/Selection & Input/Time & Date/DatePicker',
id: 'components-datepicker',
component: DatePicker,
argTypes: {
currentDate: { control: 'date' },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/date-time/stories/time.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { useState, useEffect } from '@wordpress/element';
import TimePicker from '../time';

const meta: Meta< typeof TimePicker > = {
title: 'Components/TimePicker',
title: 'Components/Selection & Input/Time & Date/TimePicker',
id: 'components-timepicker',
component: TimePicker,
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
subcomponents: { 'TimePicker.TimeInput': TimePicker.TimeInput },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/drop-zone/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import DropZone from '..';

const meta: Meta< typeof DropZone > = {
component: DropZone,
title: 'Components/DropZone',
id: 'components-dropzone',
title: 'Components/Selection & Input/File Upload/DropZone',
parameters: {
actions: { argTypesRegex: '^on.*' },
controls: { expanded: true },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/form-file-upload/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { upload as uploadIcon } from '@wordpress/icons';
import FormFileUpload from '..';

const meta: Meta< typeof FormFileUpload > = {
title: 'Components/FormFileUpload',
title: 'Components/Selection & Input/File Upload/FormFileUpload',
id: 'components-formfileupload',
component: FormFileUpload,
argTypes: {
icon: { control: { type: null } },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/form-token-field/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import FormTokenField from '../';

const meta: Meta< typeof FormTokenField > = {
component: FormTokenField,
title: 'Components/FormTokenField',
title: 'Components/Selection & Input/Common/FormTokenField',
id: 'components-formtokenfield',
argTypes: {
value: {
control: { type: null },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/gradient-picker/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ import { useState } from '@wordpress/element';
import GradientPicker from '..';

const meta: Meta< typeof GradientPicker > = {
title: 'Components/GradientPicker',
title: 'Components/Selection & Input/Color/GradientPicker',
id: 'components-gradientpicker',
component: GradientPicker,
parameters: {
controls: { expanded: true },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/input-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
import Button from '../../button';

const meta: Meta< typeof InputControl > = {
title: 'Components (Experimental)/InputControl',
title: 'Components (Experimental)/Selection & Input/Common/InputControl',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Experimental components will fall in their own section down below, meaning they will have their own Selection & Input > Common directory. Is that desired? Should we consider marking the experimental components just with badges, like CustomSelectControlV2 is marked WIP?

cc @ciampo @mirka

id: 'components-inputcontrol',
hbhalodia marked this conversation as resolved.
Show resolved Hide resolved
component: InputControl,
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/number-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
import NumberControl from '..';

const meta: Meta< typeof NumberControl > = {
title: 'Components (Experimental)/NumberControl',
title: 'Components (Experimental)/Selection & Input/Common/NumberControl',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above with regards to the separate category.

id: 'components-numbercontrol',
hbhalodia marked this conversation as resolved.
Show resolved Hide resolved
component: NumberControl,
argTypes: {
onChange: { action: 'onChange' },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/radio-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import RadioControl from '..';

const meta: Meta< typeof RadioControl > = {
component: RadioControl,
title: 'Components/RadioControl',
title: 'Components/Selection & Input/Common/RadioControl',
id: 'components-radiocontrol',
argTypes: {
onChange: {
action: 'onChange',
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/range-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ const ICONS = { starEmpty, starFilled, styles, wordpress };

const meta: Meta< typeof RangeControl > = {
component: RangeControl,
title: 'Components/RangeControl',
title: 'Components/Selection & Input/Common/RangeControl',
id: 'components-rangecontrol',
argTypes: {
afterIcon: {
control: { type: 'select' },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/search-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
import SearchControl from '..';

const meta: Meta< typeof SearchControl > = {
title: 'Components/SearchControl',
title: 'Components/Selection & Input/Search & Filtering/SearchControl',
id: 'components-searchcontrol',
component: SearchControl,
argTypes: {
onChange: { action: 'onChange' },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/select-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import SelectControl from '../';
import { InputControlPrefixWrapper } from '../../input-control/input-prefix-wrapper';

const meta: Meta< typeof SelectControl > = {
title: 'Components/SelectControl',
title: 'Components/Selection & Input/Common/SelectControl',
id: 'components-selectcontrol',
component: SelectControl,
argTypes: {
help: { control: { type: 'text' } },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/textarea-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import TextareaControl from '..';

const meta: Meta< typeof TextareaControl > = {
component: TextareaControl,
title: 'Components/TextareaControl',
title: 'Components/Selection & Input/Common/TextareaControl',
id: 'components-textareacontrol',
argTypes: {
onChange: { action: 'onChange' },
label: { control: { type: 'text' } },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/toggle-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
import ToggleControl from '..';

const meta: Meta< typeof ToggleControl > = {
title: 'Components/ToggleControl',
title: 'Components/Selection & Input/Common/ToggleControl',
id: 'components-togglecontrol',
component: ToggleControl,
argTypes: {
checked: { control: { type: null } },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/toggle-group-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ const meta: Meta< typeof ToggleGroupControl > = {
component: ToggleGroupControl,
// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
subcomponents: { ToggleGroupControlOption, ToggleGroupControlOptionIcon },
title: 'Components (Experimental)/ToggleGroupControl',
title: 'Components (Experimental)/Selection & Input/Common/ToggleGroupControl',
id: 'components-togglegroupcontrol',
argTypes: {
help: { control: { type: 'text' } },
onChange: { action: 'onChange' },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/tree-select/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import { useState } from '@wordpress/element';
import TreeSelect from '../';

const meta: Meta< typeof TreeSelect > = {
title: 'Components/TreeSelect',
title: 'Components/Selection & Input/Common/TreeSelect',
id: 'components-treeselect',
component: TreeSelect,
argTypes: {
help: { control: { type: 'text' } },
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/unit-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import { CSS_UNITS } from '../utils';

const meta: Meta< typeof UnitControl > = {
component: UnitControl,
title: 'Components (Experimental)/UnitControl',
title: 'Components (Experimental)/Selection & Input/Common/UnitControl',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above with regards to the separate category.

id: 'components-unitcontrol',
hbhalodia marked this conversation as resolved.
Show resolved Hide resolved
argTypes: {
__unstableInputWidth: { control: { type: 'text' } },
__unstableStateReducer: { control: { type: null } },
Expand Down
9 changes: 9 additions & 0 deletions storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,9 +132,18 @@ export const parameters = {
'Contributing Guidelines',
'Actions',
'Containers',
'Selection & Input',
[
'Common',
'Color',
'Time & Date',
'Search & Filtering',
'File Upload',
hbhalodia marked this conversation as resolved.
Show resolved Hide resolved
],
'Utilities',
],
'Components (Experimental)',
[ 'Selection & Input', [ 'Common' ] ],
'Icons',
],
},
Expand Down
Loading