From 1885f040908bfd26b7e07f0d8afa703e595661db Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 14 Jun 2022 17:19:14 +0200 Subject: [PATCH 01/18] Add `ariakit` as a dependency --- package-lock.json | 28 ++++++++++++++++++++++++++++ packages/components/package.json | 1 + 2 files changed, 29 insertions(+) diff --git a/package-lock.json b/package-lock.json index afbbfeaa5f8e6..29a2076b26ecf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16699,6 +16699,7 @@ "@wordpress/primitives": "file:packages/primitives", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/warning": "file:packages/warning", + "ariakit": "2.0.0-next.36", "classnames": "^2.3.1", "colord": "^2.7.0", "dom-scroll-into-view": "^1.2.1", @@ -16729,6 +16730,33 @@ "csstype": "^3.0.2" } }, + "@floating-ui/core": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.0.tgz", + "integrity": "sha512-sm3nW0hHAxTv3gRDdCH8rNVQxijF+qPFo5gAeXCErRjKC7Qc28lIQ3R9Vd7Gw+KgwfA7RhRydDFuGeI0peGq7A==" + }, + "@floating-ui/dom": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.0.tgz", + "integrity": "sha512-PMqJvY5Fae8HVQgUqM+lidprS6p9LSvB0AUhCdYKqr3YCaV+WaWCeVNBtXPRY2YIdrgcsL2+vd5F07FxgihHUw==", + "requires": { + "@floating-ui/core": "^1.0.0" + } + }, + "ariakit": { + "version": "2.0.0-next.36", + "resolved": "https://registry.npmjs.org/ariakit/-/ariakit-2.0.0-next.36.tgz", + "integrity": "sha512-H/ZqRgy5tGGKOcOsZ24lc5cBoQ83vgCFd+mC87UWdIEdYqhKNPPjFZona/V/l0SRtn9Mar+t93QbggyThOw6Qg==", + "requires": { + "@floating-ui/dom": "^1.0.0", + "ariakit-utils": "0.17.0-next.23" + } + }, + "ariakit-utils": { + "version": "0.17.0-next.23", + "resolved": "https://registry.npmjs.org/ariakit-utils/-/ariakit-utils-0.17.0-next.23.tgz", + "integrity": "sha512-r6a8rvjTBNbdNVWhGm4XL8hTlpIlP0G+yJf3No48kK6QpR1JN9QinLI/wMwWwJnxDYfwnBhkbcROCqF7iT/4ig==" + }, "colord": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/colord/-/colord-2.8.0.tgz", diff --git a/packages/components/package.json b/packages/components/package.json index e678c3a551493..68115fe29233c 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -53,6 +53,7 @@ "@wordpress/primitives": "file:../primitives", "@wordpress/rich-text": "file:../rich-text", "@wordpress/warning": "file:../warning", + "ariakit": "2.0.0-next.36", "classnames": "^2.3.1", "colord": "^2.7.0", "dom-scroll-into-view": "^1.2.1", From 207deee476974fd2b3e489ac4e7d1bda3813b588 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 14 Jun 2022 18:18:56 +0200 Subject: [PATCH 02/18] Initial version of new CustomSelectControl --- docs/manifest.json | 12 +++ .../custom-select-control-item/README.md | 3 + .../custom-select-control-item/component.tsx | 32 ++++++ .../custom-select-control-item/hook.ts | 31 ++++++ .../custom-select-control-item/index.ts | 2 + .../custom-select-control/README.md | 3 + .../custom-select-control/component.tsx | 94 ++++++++++++++++ .../custom-select-control/hook.ts | 64 +++++++++++ .../custom-select-control/index.ts | 2 + .../src/custom-select-control-new/index.ts | 2 + .../stories/index.tsx | 58 ++++++++++ .../src/custom-select-control-new/styles.ts | 100 ++++++++++++++++++ .../src/custom-select-control-new/types.ts | 31 ++++++ 13 files changed, 434 insertions(+) create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-item/README.md create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-item/index.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control/README.md create mode 100644 packages/components/src/custom-select-control-new/custom-select-control/component.tsx create mode 100644 packages/components/src/custom-select-control-new/custom-select-control/hook.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control/index.ts create mode 100644 packages/components/src/custom-select-control-new/index.ts create mode 100644 packages/components/src/custom-select-control-new/stories/index.tsx create mode 100644 packages/components/src/custom-select-control-new/styles.ts create mode 100644 packages/components/src/custom-select-control-new/types.ts diff --git a/docs/manifest.json b/docs/manifest.json index dca4d7d955b5b..4d5491be73f61 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -737,6 +737,18 @@ "markdown_source": "../packages/components/src/confirm-dialog/README.md", "parent": "components" }, + { + "title": "CustomSelectControlItem", + "slug": "custom-select-control-item", + "markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-item/README.md", + "parent": "components" + }, + { + "title": "CustomSelectControl", + "slug": "custom-select-control", + "markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control/README.md", + "parent": "components" + }, { "title": "CustomSelectControl", "slug": "custom-select-control", diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item/README.md b/packages/components/src/custom-select-control-new/custom-select-control-item/README.md new file mode 100644 index 0000000000000..f1b9345231bb1 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-item/README.md @@ -0,0 +1,3 @@ +# CustomSelectControlItem + +TODO diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx new file mode 100644 index 0000000000000..02bd29f8f2ea3 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; +import { SelectItem } from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useSelectControlItem } from './hook'; +import { WordPressComponentProps } from '../../ui/context'; +import type { SelectControlItemProps } from '../types'; + +const UnforwardedSelectControlItem = ( + props: WordPressComponentProps< SelectControlItemProps, 'div', false >, + forwardedRef: ForwardedRef< any > +) => { + const allProps = useSelectControlItem( props ); + + // TODO: investigate incompatibility with the "as" prop. + return ; +}; + +// TODO: JSDocs +export const SelectControlItem = forwardRef( UnforwardedSelectControlItem ); + +export default SelectControlItem; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts new file mode 100644 index 0000000000000..83ee7e99c4d6b --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from '../styles'; +import type { WordPressComponentProps } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; +import { SelectControlItemProps } from '../types'; + +// TODO: +// - should we use 'option' instead of `div` for props inheritance? +// - should we allow polymorphism ? +export const useSelectControlItem = ( { + className, + ...props +}: WordPressComponentProps< SelectControlItemProps, 'div', false > ) => { + const cx = useCx(); + const itemClassName = useMemo( + () => cx( styles.item, className ), + [ className, cx ] + ); + + return { + ...props, + className: itemClassName, + }; +}; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item/index.ts b/packages/components/src/custom-select-control-new/custom-select-control-item/index.ts new file mode 100644 index 0000000000000..42c91c3acd1c0 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-item/index.ts @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useSelectControlItem } from './hook'; diff --git a/packages/components/src/custom-select-control-new/custom-select-control/README.md b/packages/components/src/custom-select-control-new/custom-select-control/README.md new file mode 100644 index 0000000000000..54862525d4f90 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control/README.md @@ -0,0 +1,3 @@ +# CustomSelectControl + +TODO diff --git a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx new file mode 100644 index 0000000000000..c83d50da012b3 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx @@ -0,0 +1,94 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; +import { + Select, + SelectLabel, + SelectPopover, + SelectArrow, +} from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ + +import { useSelectControl } from './hook'; +import { WordPressComponentProps } from '../../ui/context'; +import { CustomSelectControlItem } from '../'; +import type { SelectControlOption, SelectControlProps } from '../types'; + +const SelectControlCustomSelectLabel = ( { + options, + value, +}: { + options: SelectControlOption[]; + value?: string; +} ) => ( + <> + { /* Use the label associated to the option's value, fallback to the value itself */ } + { options.find( ( option ) => option.value === value )?.label ?? value } + + +); + +const UnforwardedSelectControl = ( + props: WordPressComponentProps< SelectControlProps, 'select', false >, + forwardedRef: ForwardedRef< any > +) => { + const { + label, + options, + children, + selectState, + wrapperClassName, + labelClassName, + selectClassName, + popoverClassName, + } = useSelectControl( props ); + + return ( +
+ + { label } + + + + { children ?? + options?.map( ( option, index ) => { + const key = + option.id || + `${ option.label }-${ option.value }-${ index }`; + return ( + + { option.label } + + ); + } ) } + +
+ ); +}; + +// TODO: JSDocs +export const SelectControl = forwardRef( UnforwardedSelectControl ); + +export default SelectControl; diff --git a/packages/components/src/custom-select-control-new/custom-select-control/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control/hook.ts new file mode 100644 index 0000000000000..8c1ee390302a3 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control/hook.ts @@ -0,0 +1,64 @@ +/** + * External dependencies + */ +import { useSelectState } from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from '../styles'; +import type { WordPressComponentProps } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; +import { SelectControlProps } from '../types'; + +// TODO: +// - should we use 'select' instead of `div` for props inheritance? +// - should we allow polymorphism ? +export const useSelectControl = ( { + value, + className, + ...props +}: WordPressComponentProps< SelectControlProps, 'select', false > ) => { + // TODO: take some of these settings as props? + const selectState = useSelectState( { + // TODO: check if it works, understand if we should expose + // a different prop for the initial value? + defaultValue: value, + sameWidth: true, + gutter: 4, + } ); + + // TODO: deprecate options prop + + const cx = useCx(); + const wrapperClassName = useMemo( + () => cx( styles.wrapper, className ), + [ className, cx ] + ); + const labelClassName = useMemo( + () => cx( styles.label, className ), + [ className, cx ] + ); + const selectClassName = useMemo( + () => cx( styles.select, className ), + [ className, cx ] + ); + const popoverClassName = useMemo( + () => cx( styles.popover, className ), + [ className, cx ] + ); + + return { + ...props, + selectState, + wrapperClassName, + labelClassName, + selectClassName, + popoverClassName, + }; +}; diff --git a/packages/components/src/custom-select-control-new/custom-select-control/index.ts b/packages/components/src/custom-select-control-new/custom-select-control/index.ts new file mode 100644 index 0000000000000..b4aa7c202c176 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control/index.ts @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useSelectControl } from './hook'; diff --git a/packages/components/src/custom-select-control-new/index.ts b/packages/components/src/custom-select-control-new/index.ts new file mode 100644 index 0000000000000..3c745e8331856 --- /dev/null +++ b/packages/components/src/custom-select-control-new/index.ts @@ -0,0 +1,2 @@ +export { default as CustomSelectControl } from './custom-select-control'; +export { default as CustomSelectControlItem } from './custom-select-control-item'; diff --git a/packages/components/src/custom-select-control-new/stories/index.tsx b/packages/components/src/custom-select-control-new/stories/index.tsx new file mode 100644 index 0000000000000..c60fc31464e58 --- /dev/null +++ b/packages/components/src/custom-select-control-new/stories/index.tsx @@ -0,0 +1,58 @@ +/** + * External dependencies + */ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; + +/** + * WordPress dependencies + */ +// import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { CustomSelectControl, CustomSelectControlItem } from '../'; + +const meta: ComponentMeta< typeof CustomSelectControl > = { + component: CustomSelectControl, + title: 'Components (Experimental)/CustomSelectControlNew', + argTypes: {}, + parameters: { + controls: { + expanded: true, + }, + docs: { source: { state: 'open' } }, + }, +}; +export default meta; + +// TODO: +// - with options prop +// - controlled vs uncontrolled +// - with HTML "options"? +// - example with custom author dropdown + +const DefaultTemplate: ComponentStory< typeof CustomSelectControl > = ( { + onChange, + ...args +} ) => { + // const [ value, setValue ] = useState< string | undefined >( '10px' ); + + return ( + + + + Planet Earth + + + + + + ); +}; + +export const Default: ComponentStory< typeof CustomSelectControl > = + DefaultTemplate.bind( {} ); +Default.args = { + label: 'With `CustomSelectControlItem` children', +}; diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts new file mode 100644 index 0000000000000..56d919a053f64 --- /dev/null +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -0,0 +1,100 @@ +/** + * External dependencies + */ +import { css } from '@emotion/react'; + +/** + * Internal dependencies + */ +/** + * Internal dependencies + */ +import { COLORS, CONFIG } from '../utils'; +import { space } from '../ui/utils/space'; + +const focused = css` + outline: 2px solid hsl( 204, 100%, 40% ); +`; + +// TODO: convert to Flex or HStack +export const wrapper = css` + display: flex; + flex-direction: column; + gap: 0.5rem; +`; + +// TODO: use base control label? Text? Heading? +export const label = css``; + +// TODO: convert to Flex? +export const select = css` + /* Should be set by parent */ + width: 200px; + display: flex; + height: 2.5rem; + cursor: default; + align-items: center; + justify-content: space-between; + gap: 0.25rem; + white-space: nowrap; + border-radius: 0.5rem; + background-color: hsl( 204, 20%, 94% ); + padding-left: 1rem; + padding-right: 1rem; + font-size: 1rem; + line-height: 1.5rem; + + &:hover { + background-color: hsl( 204, 20%, 91% ); + } + + &[aria-disabled='true'] { + opacity: 0.5; + } + + &:focus-visible, + &[data-focus-visible] { + ${ focused }; + } +`; + +// TODO: convert to Flex? +export const popover = css` + z-index: 50; + display: flex; + max-height: 20rem; + flex-direction: column; + border-radius: 0.5rem; + border-width: 1px; + border-style: solid; + border-color: hsl( 204, 20%, 88% ); + background-color: hsl( 204, 20%, 100% ); + padding: 0.5rem; + color: hsl( 204, 10%, 10% ); + filter: drop-shadow( 0 4px 6px rgba( 0, 0, 0, 15% ) ); + + &:focus-visible, + &[data-focus-visible] { + ${ focused }; + } +`; + +export const item = css` + outline: none; + display: flex; + cursor: default; + scroll-margin: 0.5rem; + align-items: center; + gap: 0.5rem; + border-radius: 0.25rem; + padding: 0.5rem; + + &[data-active-item] { + background-color: hsl( 204, 100%, 40% ); + color: hsl( 0, 0%, 100% ); + } + + &[aria-disabled='true'] { + opacity: 0.5; + } +`; diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts new file mode 100644 index 0000000000000..2002d1bbd3572 --- /dev/null +++ b/packages/components/src/custom-select-control-new/types.ts @@ -0,0 +1,31 @@ +/** + * External dependencies + */ +import type { ReactNode } from 'react'; + +type SelectControlOptionBase = { + value: string; + label?: string; + disabled?: boolean; +}; + +// options[] data object +export type SelectControlOption = SelectControlOptionBase & { + id?: string; +}; + +// React component props +export type SelectControlItemProps = SelectControlOptionBase & { + className?: string; + children?: ReactNode; +}; + +// react component props +export type SelectControlProps = { + value?: string; + label?: string; + // TODO: explain that they are ignored if `children` is specified + options?: SelectControlOption[]; + children?: ReactNode; + className?: string; +}; From 922bf9222dfbd8e7d7d1df57daa98b403720c284 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 21 Jun 2022 18:19:07 +0200 Subject: [PATCH 03/18] Add `CustomSelectControlArrow` --- .../custom-select-control-arrow/README.md | 3 ++ .../custom-select-control-arrow/component.tsx | 32 +++++++++++++++++++ .../custom-select-control-arrow/hook.ts | 30 +++++++++++++++++ .../custom-select-control-arrow/index.ts | 2 ++ .../custom-select-control/component.tsx | 17 +++++----- .../src/custom-select-control-new/index.ts | 1 + .../src/custom-select-control-new/styles.ts | 2 ++ .../src/custom-select-control-new/types.ts | 3 +- 8 files changed, 80 insertions(+), 10 deletions(-) create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-arrow/README.md create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-arrow/index.ts diff --git a/packages/components/src/custom-select-control-new/custom-select-control-arrow/README.md b/packages/components/src/custom-select-control-new/custom-select-control-arrow/README.md new file mode 100644 index 0000000000000..4a7e8ffaede43 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-arrow/README.md @@ -0,0 +1,3 @@ +# CustomSelectControlArrow + +TODO diff --git a/packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx new file mode 100644 index 0000000000000..d476ade6e6d9b --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; +import { SelectArrow } from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useSelectControlArrow } from './hook'; +import { WordPressComponentProps } from '../../ui/context'; +import type { SelectControlArrowProps } from '../types'; + +const UnforwardedSelectControlArrow = ( + props: WordPressComponentProps< SelectControlArrowProps, 'span', false >, + forwardedRef: ForwardedRef< any > +) => { + const allProps = useSelectControlArrow( props ); + + // TODO: investigate incompatibility with the "as" prop. + return ; +}; + +// TODO: JSDocs +export const SelectControlArrow = forwardRef( UnforwardedSelectControlArrow ); + +export default SelectControlArrow; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts new file mode 100644 index 0000000000000..d8998435d9023 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from '../styles'; +import type { WordPressComponentProps } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; +import { SelectControlArrowProps } from '../types'; + +// TODO: +// - should we allow polymorphism ? +export const useSelectControlArrow = ( { + className, + ...props +}: WordPressComponentProps< SelectControlArrowProps, 'span', false > ) => { + const cx = useCx(); + const arrowClassName = useMemo( + () => cx( styles.arrow, className ), + [ className, cx ] + ); + + return { + ...props, + className: arrowClassName, + }; +}; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-arrow/index.ts b/packages/components/src/custom-select-control-new/custom-select-control-arrow/index.ts new file mode 100644 index 0000000000000..e53f4ca8179fb --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-arrow/index.ts @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useSelectControlArrow } from './hook'; diff --git a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx index c83d50da012b3..331d666b86d42 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx @@ -2,12 +2,7 @@ * External dependencies */ import type { ForwardedRef } from 'react'; -import { - Select, - SelectLabel, - SelectPopover, - SelectArrow, -} from 'ariakit/select'; +import { Select, SelectLabel, SelectPopover } from 'ariakit/select'; /** * WordPress dependencies @@ -20,7 +15,7 @@ import { forwardRef } from '@wordpress/element'; import { useSelectControl } from './hook'; import { WordPressComponentProps } from '../../ui/context'; -import { CustomSelectControlItem } from '../'; +import { CustomSelectControlItem, CustomSelectControlArrow } from '../'; import type { SelectControlOption, SelectControlProps } from '../types'; const SelectControlCustomSelectLabel = ( { @@ -33,7 +28,7 @@ const SelectControlCustomSelectLabel = ( { <> { /* Use the label associated to the option's value, fallback to the value itself */ } { options.find( ( option ) => option.value === value )?.label ?? value } - + ); @@ -64,7 +59,11 @@ const UnforwardedSelectControl = ( value={ selectState.value } /> ) : ( - selectState.value + // TODO: add support for custom render function + <> + { selectState.value } + + ) } diff --git a/packages/components/src/custom-select-control-new/index.ts b/packages/components/src/custom-select-control-new/index.ts index 3c745e8331856..88f032a0569d5 100644 --- a/packages/components/src/custom-select-control-new/index.ts +++ b/packages/components/src/custom-select-control-new/index.ts @@ -1,2 +1,3 @@ export { default as CustomSelectControl } from './custom-select-control'; export { default as CustomSelectControlItem } from './custom-select-control-item'; +export { default as CustomSelectControlArrow } from './custom-select-control-arrow'; diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts index 56d919a053f64..771b318b920e4 100644 --- a/packages/components/src/custom-select-control-new/styles.ts +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -98,3 +98,5 @@ export const item = css` opacity: 0.5; } `; + +export const arrow = css``; diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts index 2002d1bbd3572..b428ab40131c7 100644 --- a/packages/components/src/custom-select-control-new/types.ts +++ b/packages/components/src/custom-select-control-new/types.ts @@ -20,7 +20,6 @@ export type SelectControlItemProps = SelectControlOptionBase & { children?: ReactNode; }; -// react component props export type SelectControlProps = { value?: string; label?: string; @@ -29,3 +28,5 @@ export type SelectControlProps = { children?: ReactNode; className?: string; }; + +export type SelectControlArrowProps = {}; From 7b7cd3bd7be1187fc0461773c9c1aed92107356f Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 21 Jun 2022 18:21:16 +0200 Subject: [PATCH 04/18] Add `CustomSelectControlGroup` --- .../custom-select-control-group/README.md | 3 ++ .../custom-select-control-group/component.tsx | 32 +++++++++++++++++++ .../custom-select-control-group/hook.ts | 30 +++++++++++++++++ .../custom-select-control-group/index.ts | 2 ++ .../src/custom-select-control-new/index.ts | 1 + .../src/custom-select-control-new/styles.ts | 2 ++ .../src/custom-select-control-new/types.ts | 4 +++ 7 files changed, 74 insertions(+) create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-group/README.md create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-group/index.ts diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group/README.md b/packages/components/src/custom-select-control-new/custom-select-control-group/README.md new file mode 100644 index 0000000000000..fd210f9f95ce7 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-group/README.md @@ -0,0 +1,3 @@ +# CustomSelectControlGroup + +TODO diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx new file mode 100644 index 0000000000000..6e340e8d517ea --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; +import { SelectGroup } from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useSelectControlGroup } from './hook'; +import { WordPressComponentProps } from '../../ui/context'; +import type { SelectControlGroupProps } from '../types'; + +const UnforwardedSelectControlGroup = ( + props: WordPressComponentProps< SelectControlGroupProps, 'div', false >, + forwardedRef: ForwardedRef< any > +) => { + const allProps = useSelectControlGroup( props ); + + // TODO: investigate incompatibility with the "as" prop. + return ; +}; + +// TODO: JSDocs +export const SelectControlGroup = forwardRef( UnforwardedSelectControlGroup ); + +export default SelectControlGroup; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts new file mode 100644 index 0000000000000..885509ce0fdda --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts @@ -0,0 +1,30 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from '../styles'; +import type { WordPressComponentProps } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; +import { SelectControlGroupProps } from '../types'; + +// TODO: +// - should we allow polymorphism ? +export const useSelectControlGroup = ( { + className, + ...props +}: WordPressComponentProps< SelectControlGroupProps, 'div', false > ) => { + const cx = useCx(); + const groupClassName = useMemo( + () => cx( styles.group, className ), + [ className, cx ] + ); + + return { + ...props, + className: groupClassName, + }; +}; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group/index.ts b/packages/components/src/custom-select-control-new/custom-select-control-group/index.ts new file mode 100644 index 0000000000000..94cd33031a1e9 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-group/index.ts @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useSelectControlGroup } from './hook'; diff --git a/packages/components/src/custom-select-control-new/index.ts b/packages/components/src/custom-select-control-new/index.ts index 88f032a0569d5..650fb1054b0e1 100644 --- a/packages/components/src/custom-select-control-new/index.ts +++ b/packages/components/src/custom-select-control-new/index.ts @@ -1,3 +1,4 @@ export { default as CustomSelectControl } from './custom-select-control'; export { default as CustomSelectControlItem } from './custom-select-control-item'; +export { default as CustomSelectControlGroup } from './custom-select-control-group'; export { default as CustomSelectControlArrow } from './custom-select-control-arrow'; diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts index 771b318b920e4..978b877477986 100644 --- a/packages/components/src/custom-select-control-new/styles.ts +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -100,3 +100,5 @@ export const item = css` `; export const arrow = css``; + +export const group = css``; diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts index b428ab40131c7..602a1f85c1c2f 100644 --- a/packages/components/src/custom-select-control-new/types.ts +++ b/packages/components/src/custom-select-control-new/types.ts @@ -30,3 +30,7 @@ export type SelectControlProps = { }; export type SelectControlArrowProps = {}; + +export type SelectControlGroupProps = { + children: ReactNode; +}; From 77020be143461720ea7cc8a8e11fb7bb8dfb730d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 21 Jun 2022 18:21:56 +0200 Subject: [PATCH 05/18] Add `CustomSelectControlGroupLabel` --- .../README.md | 3 ++ .../component.tsx | 38 +++++++++++++++++++ .../custom-select-control-group-label/hook.ts | 31 +++++++++++++++ .../index.ts | 2 + .../src/custom-select-control-new/index.ts | 1 + .../src/custom-select-control-new/styles.ts | 9 +++++ .../src/custom-select-control-new/types.ts | 4 ++ 7 files changed, 88 insertions(+) create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-group-label/README.md create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-group-label/index.ts diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group-label/README.md b/packages/components/src/custom-select-control-new/custom-select-control-group-label/README.md new file mode 100644 index 0000000000000..4a019aac2f804 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-group-label/README.md @@ -0,0 +1,3 @@ +# CustomSelectControlGroupLabel + +TODO diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx new file mode 100644 index 0000000000000..9439036ba65df --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx @@ -0,0 +1,38 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; +import { SelectGroupLabel } from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useSelectControlGroupLabel } from './hook'; +import { WordPressComponentProps } from '../../ui/context'; +import type { SelectControlGroupLabelProps } from '../types'; + +const UnforwardedSelectControlGroupLabel = ( + props: WordPressComponentProps< + SelectControlGroupLabelProps, + 'div', + false + >, + forwardedRef: ForwardedRef< any > +) => { + const allProps = useSelectControlGroupLabel( props ); + + // TODO: investigate incompatibility with the "as" prop. + return ; +}; + +// TODO: JSDocs +export const SelectControlGroupLabel = forwardRef( + UnforwardedSelectControlGroupLabel +); + +export default SelectControlGroupLabel; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts new file mode 100644 index 0000000000000..bc4d6a0fe721c --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from '../styles'; +import type { WordPressComponentProps } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; +import { SelectControlGroupLabelProps } from '../types'; + +// TODO: +// - should we use 'option' instead of `div` for props inheritance? +// - should we allow polymorphism ? +export const useSelectControlGroupLabel = ( { + className, + ...props +}: WordPressComponentProps< SelectControlGroupLabelProps, 'div', false > ) => { + const cx = useCx(); + const groupLabelClassName = useMemo( + () => cx( styles.groupLabel, className ), + [ className, cx ] + ); + + return { + ...props, + className: groupLabelClassName, + }; +}; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group-label/index.ts b/packages/components/src/custom-select-control-new/custom-select-control-group-label/index.ts new file mode 100644 index 0000000000000..1ac138c881dca --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-group-label/index.ts @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useSelectControlGroupLabel } from './hook'; diff --git a/packages/components/src/custom-select-control-new/index.ts b/packages/components/src/custom-select-control-new/index.ts index 650fb1054b0e1..50a3c9430bb80 100644 --- a/packages/components/src/custom-select-control-new/index.ts +++ b/packages/components/src/custom-select-control-new/index.ts @@ -1,4 +1,5 @@ export { default as CustomSelectControl } from './custom-select-control'; export { default as CustomSelectControlItem } from './custom-select-control-item'; export { default as CustomSelectControlGroup } from './custom-select-control-group'; +export { default as CustomSelectControlGroupLabel } from './custom-select-control-group-label'; export { default as CustomSelectControlArrow } from './custom-select-control-arrow'; diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts index 978b877477986..d1027c679564a 100644 --- a/packages/components/src/custom-select-control-new/styles.ts +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -102,3 +102,12 @@ export const item = css` export const arrow = css``; export const group = css``; + +export const groupLabel = css` + cursor: default; + padding: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + opacity: 0.6; +`; diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts index 602a1f85c1c2f..a160ec88c888e 100644 --- a/packages/components/src/custom-select-control-new/types.ts +++ b/packages/components/src/custom-select-control-new/types.ts @@ -34,3 +34,7 @@ export type SelectControlArrowProps = {}; export type SelectControlGroupProps = { children: ReactNode; }; + +export type SelectControlGroupLabelProps = { + children: ReactNode; +}; From dac790d04baeed4e7b9703614fdefec6de796a1b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 21 Jun 2022 18:22:30 +0200 Subject: [PATCH 06/18] Add `CustomSelectControlGroupSeparator` --- .../custom-select-control-separator/README.md | 3 ++ .../component.tsx | 33 +++++++++++++++++++ .../custom-select-control-separator/hook.ts | 28 ++++++++++++++++ .../custom-select-control-separator/index.ts | 2 ++ .../src/custom-select-control-new/index.ts | 1 + .../src/custom-select-control-new/styles.ts | 10 ++++++ .../src/custom-select-control-new/types.ts | 2 ++ 7 files changed, 79 insertions(+) create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-separator/README.md create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-separator/component.tsx create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-separator/hook.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-separator/index.ts diff --git a/packages/components/src/custom-select-control-new/custom-select-control-separator/README.md b/packages/components/src/custom-select-control-new/custom-select-control-separator/README.md new file mode 100644 index 0000000000000..e3ca90cc5480b --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-separator/README.md @@ -0,0 +1,3 @@ +# CustomSelectControlSeparator + +TODO diff --git a/packages/components/src/custom-select-control-new/custom-select-control-separator/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-separator/component.tsx new file mode 100644 index 0000000000000..2c79ae12bf611 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-separator/component.tsx @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; +import { SelectSeparator } from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useSelectControlSeparator } from './hook'; +import { WordPressComponentProps } from '../../ui/context'; +import type { SelectControlSeparatorProps } from '../types'; + +const UnforwardedSelectControlSeparator = ( + props: WordPressComponentProps< SelectControlSeparatorProps, 'hr', false >, + forwardedRef: ForwardedRef< any > +) => { + const allProps = useSelectControlSeparator( props ); + + return ; +}; + +// TODO: JSDocs +export const SelectControlSeparator = forwardRef( + UnforwardedSelectControlSeparator +); + +export default SelectControlSeparator; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-separator/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-separator/hook.ts new file mode 100644 index 0000000000000..324987a7ff493 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-separator/hook.ts @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from '../styles'; +import type { WordPressComponentProps } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; +import { SelectControlSeparatorProps } from '../types'; + +export const useSelectControlSeparator = ( { + className, + ...props +}: WordPressComponentProps< SelectControlSeparatorProps, 'hr', false > ) => { + const cx = useCx(); + const separatorClassName = useMemo( + () => cx( styles.separator, className ), + [ className, cx ] + ); + + return { + ...props, + className: separatorClassName, + }; +}; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-separator/index.ts b/packages/components/src/custom-select-control-new/custom-select-control-separator/index.ts new file mode 100644 index 0000000000000..f4610cf6cb8d6 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-separator/index.ts @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useSelectControlSeparator } from './hook'; diff --git a/packages/components/src/custom-select-control-new/index.ts b/packages/components/src/custom-select-control-new/index.ts index 50a3c9430bb80..13de363b4f6c9 100644 --- a/packages/components/src/custom-select-control-new/index.ts +++ b/packages/components/src/custom-select-control-new/index.ts @@ -3,3 +3,4 @@ export { default as CustomSelectControlItem } from './custom-select-control-item export { default as CustomSelectControlGroup } from './custom-select-control-group'; export { default as CustomSelectControlGroupLabel } from './custom-select-control-group-label'; export { default as CustomSelectControlArrow } from './custom-select-control-arrow'; +export { default as CustomSelectControlSeparator } from './custom-select-control-separator'; diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts index d1027c679564a..a5121c6ad74c5 100644 --- a/packages/components/src/custom-select-control-new/styles.ts +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -111,3 +111,13 @@ export const groupLabel = css` font-weight: 500; opacity: 0.6; `; + +export const separator = css` + border-color: currentcolor; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + height: 0px; + border-top-width: 1px; + opacity: 0.25; + width: 100%; +`; diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts index a160ec88c888e..a4bd9db6f36b3 100644 --- a/packages/components/src/custom-select-control-new/types.ts +++ b/packages/components/src/custom-select-control-new/types.ts @@ -38,3 +38,5 @@ export type SelectControlGroupProps = { export type SelectControlGroupLabelProps = { children: ReactNode; }; + +export type SelectControlSeparatorProps = {}; From dd5390e71e58e70df9e653aef94ccba2bc532692 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 21 Jun 2022 18:30:52 +0200 Subject: [PATCH 07/18] Allow popover to scroll --- .../components/src/custom-select-control-new/styles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts index a5121c6ad74c5..288f6cbdd344b 100644 --- a/packages/components/src/custom-select-control-new/styles.ts +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -60,10 +60,13 @@ export const select = css` // TODO: convert to Flex? export const popover = css` + /* TODO: add flexibility, e.g.: min(var(--popover-available-height, 300px), 300px); */ + max-height: 20rem; z-index: 50; display: flex; - max-height: 20rem; flex-direction: column; + overflow: auto; + overscroll-behavior: contain; border-radius: 0.5rem; border-width: 1px; border-style: solid; @@ -80,7 +83,7 @@ export const popover = css` `; export const item = css` - outline: none; + outline: none !important; display: flex; cursor: default; scroll-margin: 0.5rem; From ac9fa8cc947d7ec457663d911875f9e40b2bcfcf Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 21 Jun 2022 18:31:05 +0200 Subject: [PATCH 08/18] Forward ref --- .../custom-select-control/component.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx index 331d666b86d42..54a2cd96251ed 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx @@ -52,7 +52,12 @@ const UnforwardedSelectControl = ( { label } - { options?.length ? ( Date: Tue, 21 Jun 2022 18:31:33 +0200 Subject: [PATCH 09/18] Add group and separator storybook example --- .../stories/index.tsx | 83 ++++++++++++++----- 1 file changed, 61 insertions(+), 22 deletions(-) diff --git a/packages/components/src/custom-select-control-new/stories/index.tsx b/packages/components/src/custom-select-control-new/stories/index.tsx index c60fc31464e58..12061d6cfacd0 100644 --- a/packages/components/src/custom-select-control-new/stories/index.tsx +++ b/packages/components/src/custom-select-control-new/stories/index.tsx @@ -11,7 +11,13 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; /** * Internal dependencies */ -import { CustomSelectControl, CustomSelectControlItem } from '../'; +import { + CustomSelectControl, + CustomSelectControlItem, + CustomSelectControlGroup, + CustomSelectControlGroupLabel, + CustomSelectControlSeparator, +} from '../'; const meta: ComponentMeta< typeof CustomSelectControl > = { component: CustomSelectControl, @@ -27,32 +33,65 @@ const meta: ComponentMeta< typeof CustomSelectControl > = { export default meta; // TODO: -// - with options prop +// - with `options` prop // - controlled vs uncontrolled -// - with HTML "options"? +// - with HTML `` (and related vanilla elements)? // - example with custom author dropdown -const DefaultTemplate: ComponentStory< typeof CustomSelectControl > = ( { +export const Default: ComponentStory< typeof CustomSelectControl > = ( { onChange, ...args -} ) => { - // const [ value, setValue ] = useState< string | undefined >( '10px' ); - - return ( - - - - Planet Earth - - - - - - ); +} ) => ( + + + + { /* Custom item label */ } + Planet Earth + + + + + +); +Default.args = { + label: 'Choose a planet', }; -export const Default: ComponentStory< typeof CustomSelectControl > = - DefaultTemplate.bind( {} ); -Default.args = { - label: 'With `CustomSelectControlItem` children', +export const WithGroupsAndSeparators: ComponentStory< + typeof CustomSelectControl +> = ( { onChange, ...args } ) => ( + + + + Primary + + + + + + + + + Secondary + + + + + + + + + Tertiary + + + + + + + + + +); +WithGroupsAndSeparators.args = { + label: 'Pick a color', }; From e7ea61a3f57b20faee2962f346f8514a9b55330e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 25 Jul 2022 16:16:27 +0200 Subject: [PATCH 10/18] Add links to docs manifest --- docs/manifest.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/manifest.json b/docs/manifest.json index 4d5491be73f61..a06a68b96f93a 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -737,12 +737,36 @@ "markdown_source": "../packages/components/src/confirm-dialog/README.md", "parent": "components" }, + { + "title": "CustomSelectControlArrow", + "slug": "custom-select-control-arrow", + "markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-arrow/README.md", + "parent": "components" + }, + { + "title": "CustomSelectControlGroupLabel", + "slug": "custom-select-control-group-label", + "markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-group-label/README.md", + "parent": "components" + }, + { + "title": "CustomSelectControlGroup", + "slug": "custom-select-control-group", + "markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-group/README.md", + "parent": "components" + }, { "title": "CustomSelectControlItem", "slug": "custom-select-control-item", "markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-item/README.md", "parent": "components" }, + { + "title": "CustomSelectControlSeparator", + "slug": "custom-select-control-separator", + "markdown_source": "../packages/components/src/custom-select-control-new/custom-select-control-separator/README.md", + "parent": "components" + }, { "title": "CustomSelectControl", "slug": "custom-select-control", From 97ca8a3aae6ebf2028645e53e5a52eb5337e2637 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 25 Jul 2022 17:08:51 +0200 Subject: [PATCH 11/18] Add folder to tsconfig, fix TS errors --- .../custom-select-control-arrow/component.tsx | 2 +- .../custom-select-control-arrow/hook.ts | 2 +- .../custom-select-control-group-label/component.tsx | 2 +- .../custom-select-control-group-label/hook.ts | 2 +- .../custom-select-control-group/component.tsx | 2 +- .../custom-select-control-group/hook.ts | 2 +- .../custom-select-control-item/component.tsx | 2 +- .../custom-select-control-item/hook.ts | 2 +- .../custom-select-control-separator/component.tsx | 2 +- .../custom-select-control-separator/hook.ts | 2 +- .../custom-select-control/component.tsx | 3 +-- .../custom-select-control-new/custom-select-control/hook.ts | 2 +- packages/components/tsconfig.json | 1 + 13 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx index d476ade6e6d9b..57dac95f1e1bb 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control-arrow/component.tsx @@ -13,7 +13,7 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import { useSelectControlArrow } from './hook'; -import { WordPressComponentProps } from '../../ui/context'; +import type { WordPressComponentProps } from '../../ui/context'; import type { SelectControlArrowProps } from '../types'; const UnforwardedSelectControlArrow = ( diff --git a/packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts index d8998435d9023..436f30d03cc6b 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts +++ b/packages/components/src/custom-select-control-new/custom-select-control-arrow/hook.ts @@ -9,7 +9,7 @@ import { useMemo } from '@wordpress/element'; import * as styles from '../styles'; import type { WordPressComponentProps } from '../../ui/context'; import { useCx } from '../../utils/hooks/use-cx'; -import { SelectControlArrowProps } from '../types'; +import type { SelectControlArrowProps } from '../types'; // TODO: // - should we allow polymorphism ? diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx index 9439036ba65df..f8b7e20bb9231 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control-group-label/component.tsx @@ -13,7 +13,7 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import { useSelectControlGroupLabel } from './hook'; -import { WordPressComponentProps } from '../../ui/context'; +import type { WordPressComponentProps } from '../../ui/context'; import type { SelectControlGroupLabelProps } from '../types'; const UnforwardedSelectControlGroupLabel = ( diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts index bc4d6a0fe721c..9bdb8bb675d57 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts +++ b/packages/components/src/custom-select-control-new/custom-select-control-group-label/hook.ts @@ -9,7 +9,7 @@ import { useMemo } from '@wordpress/element'; import * as styles from '../styles'; import type { WordPressComponentProps } from '../../ui/context'; import { useCx } from '../../utils/hooks/use-cx'; -import { SelectControlGroupLabelProps } from '../types'; +import type { SelectControlGroupLabelProps } from '../types'; // TODO: // - should we use 'option' instead of `div` for props inheritance? diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx index 6e340e8d517ea..b62994e3e4c70 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control-group/component.tsx @@ -13,7 +13,7 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import { useSelectControlGroup } from './hook'; -import { WordPressComponentProps } from '../../ui/context'; +import type { WordPressComponentProps } from '../../ui/context'; import type { SelectControlGroupProps } from '../types'; const UnforwardedSelectControlGroup = ( diff --git a/packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts index 885509ce0fdda..4f406cfee2363 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts +++ b/packages/components/src/custom-select-control-new/custom-select-control-group/hook.ts @@ -9,7 +9,7 @@ import { useMemo } from '@wordpress/element'; import * as styles from '../styles'; import type { WordPressComponentProps } from '../../ui/context'; import { useCx } from '../../utils/hooks/use-cx'; -import { SelectControlGroupProps } from '../types'; +import type { SelectControlGroupProps } from '../types'; // TODO: // - should we allow polymorphism ? diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx index 02bd29f8f2ea3..432ce9703c988 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control-item/component.tsx @@ -13,7 +13,7 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import { useSelectControlItem } from './hook'; -import { WordPressComponentProps } from '../../ui/context'; +import type { WordPressComponentProps } from '../../ui/context'; import type { SelectControlItemProps } from '../types'; const UnforwardedSelectControlItem = ( diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts index 83ee7e99c4d6b..fe64d2f85ce57 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts +++ b/packages/components/src/custom-select-control-new/custom-select-control-item/hook.ts @@ -9,7 +9,7 @@ import { useMemo } from '@wordpress/element'; import * as styles from '../styles'; import type { WordPressComponentProps } from '../../ui/context'; import { useCx } from '../../utils/hooks/use-cx'; -import { SelectControlItemProps } from '../types'; +import type { SelectControlItemProps } from '../types'; // TODO: // - should we use 'option' instead of `div` for props inheritance? diff --git a/packages/components/src/custom-select-control-new/custom-select-control-separator/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-separator/component.tsx index 2c79ae12bf611..179d10dbac645 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-separator/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control-separator/component.tsx @@ -13,7 +13,7 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import { useSelectControlSeparator } from './hook'; -import { WordPressComponentProps } from '../../ui/context'; +import type { WordPressComponentProps } from '../../ui/context'; import type { SelectControlSeparatorProps } from '../types'; const UnforwardedSelectControlSeparator = ( diff --git a/packages/components/src/custom-select-control-new/custom-select-control-separator/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-separator/hook.ts index 324987a7ff493..49220721da754 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control-separator/hook.ts +++ b/packages/components/src/custom-select-control-new/custom-select-control-separator/hook.ts @@ -9,7 +9,7 @@ import { useMemo } from '@wordpress/element'; import * as styles from '../styles'; import type { WordPressComponentProps } from '../../ui/context'; import { useCx } from '../../utils/hooks/use-cx'; -import { SelectControlSeparatorProps } from '../types'; +import type { SelectControlSeparatorProps } from '../types'; export const useSelectControlSeparator = ( { className, diff --git a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx index 54a2cd96251ed..06ab495638eb6 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx @@ -12,9 +12,8 @@ import { forwardRef } from '@wordpress/element'; /** * Internal dependencies */ - import { useSelectControl } from './hook'; -import { WordPressComponentProps } from '../../ui/context'; +import type { WordPressComponentProps } from '../../ui/context'; import { CustomSelectControlItem, CustomSelectControlArrow } from '../'; import type { SelectControlOption, SelectControlProps } from '../types'; diff --git a/packages/components/src/custom-select-control-new/custom-select-control/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control/hook.ts index 8c1ee390302a3..8a195051c4db8 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control/hook.ts +++ b/packages/components/src/custom-select-control-new/custom-select-control/hook.ts @@ -14,7 +14,7 @@ import { useMemo } from '@wordpress/element'; import * as styles from '../styles'; import type { WordPressComponentProps } from '../../ui/context'; import { useCx } from '../../utils/hooks/use-cx'; -import { SelectControlProps } from '../types'; +import type { SelectControlProps } from '../types'; // TODO: // - should we use 'select' instead of `div` for props inheritance? diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index cc5f7e3be2634..32167c48f423e 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -46,6 +46,7 @@ "src/color-palette/**/*", "src/color-picker/**/*", "src/confirm-dialog/**/*", + "src/custom-select-control-new/**/*", "src/dashicon/**/*", "src/date-time/**/*", "src/disabled/**/*", From e796b22e94f9712603840256cc074d9bd6ebc2b7 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 25 Jul 2022 18:59:49 +0200 Subject: [PATCH 12/18] Add CustomSelectControlRow --- .../custom-select-control-row/README.md | 3 ++ .../custom-select-control-row/component.tsx | 31 +++++++++++++++++++ .../custom-select-control-row/hook.ts | 28 +++++++++++++++++ .../custom-select-control-row/index.ts | 2 ++ .../src/custom-select-control-new/index.ts | 1 + .../src/custom-select-control-new/styles.ts | 8 +++-- .../src/custom-select-control-new/types.ts | 4 +++ 7 files changed, 74 insertions(+), 3 deletions(-) create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-row/README.md create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-row/component.tsx create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-row/hook.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-row/index.ts diff --git a/packages/components/src/custom-select-control-new/custom-select-control-row/README.md b/packages/components/src/custom-select-control-new/custom-select-control-row/README.md new file mode 100644 index 0000000000000..4d70ab39fa0e6 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-row/README.md @@ -0,0 +1,3 @@ +# CustomSelectControlRow + +TODO diff --git a/packages/components/src/custom-select-control-new/custom-select-control-row/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-row/component.tsx new file mode 100644 index 0000000000000..d4c2081ca3680 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-row/component.tsx @@ -0,0 +1,31 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; +import { SelectRow } from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useSelectControlRow } from './hook'; +import type { WordPressComponentProps } from '../../ui/context'; +import type { SelectControlRowProps } from '../types'; + +const UnforwardedSelectControlRow = ( + props: WordPressComponentProps< SelectControlRowProps, 'div', false >, + forwardedRef: ForwardedRef< any > +) => { + const allProps = useSelectControlRow( props ); + + return ; +}; + +// TODO: JSDocs +export const SelectControlRow = forwardRef( UnforwardedSelectControlRow ); + +export default SelectControlRow; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-row/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-row/hook.ts new file mode 100644 index 0000000000000..9dbcec2b56247 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-row/hook.ts @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from '../styles'; +import type { WordPressComponentProps } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; +import type { SelectControlRowProps } from '../types'; + +export const useSelectControlRow = ( { + className, + ...props +}: WordPressComponentProps< SelectControlRowProps, 'div', false > ) => { + const cx = useCx(); + const rowClassName = useMemo( + () => cx( styles.row, className ), + [ className, cx ] + ); + + return { + ...props, + className: rowClassName, + }; +}; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-row/index.ts b/packages/components/src/custom-select-control-new/custom-select-control-row/index.ts new file mode 100644 index 0000000000000..9171498f9b008 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-row/index.ts @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useSelectControlRow } from './hook'; diff --git a/packages/components/src/custom-select-control-new/index.ts b/packages/components/src/custom-select-control-new/index.ts index 13de363b4f6c9..3b02401f937fa 100644 --- a/packages/components/src/custom-select-control-new/index.ts +++ b/packages/components/src/custom-select-control-new/index.ts @@ -4,3 +4,4 @@ export { default as CustomSelectControlGroup } from './custom-select-control-gro export { default as CustomSelectControlGroupLabel } from './custom-select-control-group-label'; export { default as CustomSelectControlArrow } from './custom-select-control-arrow'; export { default as CustomSelectControlSeparator } from './custom-select-control-separator'; +export { default as CustomSelectControlRow } from './custom-select-control-row'; diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts index 288f6cbdd344b..cf3a12fb3a49c 100644 --- a/packages/components/src/custom-select-control-new/styles.ts +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -3,9 +3,6 @@ */ import { css } from '@emotion/react'; -/** - * Internal dependencies - */ /** * Internal dependencies */ @@ -115,6 +112,11 @@ export const groupLabel = css` opacity: 0.6; `; +// TODO: convert to Flex or HStack +export const row = css` + display: 'flex'; +`; + export const separator = css` border-color: currentcolor; margin-top: 0.5rem; diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts index a4bd9db6f36b3..dddf543e77532 100644 --- a/packages/components/src/custom-select-control-new/types.ts +++ b/packages/components/src/custom-select-control-new/types.ts @@ -40,3 +40,7 @@ export type SelectControlGroupLabelProps = { }; export type SelectControlSeparatorProps = {}; + +export type SelectControlRowProps = { + children: ReactNode; +}; From 94304e4de049b13e9a6b647df78df00088a573cd Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 25 Jul 2022 19:13:24 +0200 Subject: [PATCH 13/18] Add explicit className to all types --- .../src/custom-select-control-new/types.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts index dddf543e77532..4ca9ad18ccef4 100644 --- a/packages/components/src/custom-select-control-new/types.ts +++ b/packages/components/src/custom-select-control-new/types.ts @@ -16,8 +16,11 @@ export type SelectControlOption = SelectControlOptionBase & { // React component props export type SelectControlItemProps = SelectControlOptionBase & { + // Is classname necessary, with WordPressComponentProps? className?: string; children?: ReactNode; + // Do we want to expose this prop? + checked?: boolean; }; export type SelectControlProps = { @@ -26,21 +29,34 @@ export type SelectControlProps = { // TODO: explain that they are ignored if `children` is specified options?: SelectControlOption[]; children?: ReactNode; + // Is classname necessary, with WordPressComponentProps? className?: string; }; -export type SelectControlArrowProps = {}; +export type SelectControlArrowProps = { + // Is classname necessary, with WordPressComponentProps? + className?: string; +}; export type SelectControlGroupProps = { children: ReactNode; + // Is classname necessary, with WordPressComponentProps? + className?: string; }; export type SelectControlGroupLabelProps = { children: ReactNode; + // Is classname necessary, with WordPressComponentProps? + className?: string; }; -export type SelectControlSeparatorProps = {}; +export type SelectControlSeparatorProps = { + // Is classname necessary, with WordPressComponentProps? + className?: string; +}; export type SelectControlRowProps = { children: ReactNode; + // Is classname necessary, with WordPressComponentProps? + className?: string; }; From bf083ee58880fd93d3c7a41eed18de1ab2bff1d3 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 25 Jul 2022 19:13:47 +0200 Subject: [PATCH 14/18] Add CustomSelectControlItemCheck --- .../README.md | 3 ++ .../component.tsx | 37 +++++++++++++++++++ .../custom-select-control-item-check/hook.ts | 28 ++++++++++++++ .../custom-select-control-item-check/index.ts | 2 + .../src/custom-select-control-new/index.ts | 1 + .../src/custom-select-control-new/styles.ts | 4 ++ .../src/custom-select-control-new/types.ts | 6 +++ 7 files changed, 81 insertions(+) create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-item-check/README.md create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-item-check/component.tsx create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-item-check/hook.ts create mode 100644 packages/components/src/custom-select-control-new/custom-select-control-item-check/index.ts diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item-check/README.md b/packages/components/src/custom-select-control-new/custom-select-control-item-check/README.md new file mode 100644 index 0000000000000..c24ffb32df44f --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-item-check/README.md @@ -0,0 +1,3 @@ +# CustomSelectControlItemCheck + +TODO diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item-check/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control-item-check/component.tsx new file mode 100644 index 0000000000000..55c3c94efad95 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-item-check/component.tsx @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +import type { ForwardedRef } from 'react'; +import { SelectItemCheck } from 'ariakit/select'; + +/** + * WordPress dependencies + */ +import { forwardRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { useSelectControlItemCheck } from './hook'; +import type { WordPressComponentProps } from '../../ui/context'; +import type { SelectControlItemCheckProps } from '../types'; + +const UnforwardedSelectControlItemCheck = ( + props: WordPressComponentProps< + SelectControlItemCheckProps, + 'span', + false + >, + forwardedRef: ForwardedRef< any > +) => { + const allProps = useSelectControlItemCheck( props ); + + return ; +}; + +// TODO: JSDocs +export const SelectControlItemCheck = forwardRef( + UnforwardedSelectControlItemCheck +); + +export default SelectControlItemCheck; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item-check/hook.ts b/packages/components/src/custom-select-control-new/custom-select-control-item-check/hook.ts new file mode 100644 index 0000000000000..5bbbba0aa2883 --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-item-check/hook.ts @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import * as styles from '../styles'; +import type { WordPressComponentProps } from '../../ui/context'; +import { useCx } from '../../utils/hooks/use-cx'; +import type { SelectControlItemCheckProps } from '../types'; + +export const useSelectControlItemCheck = ( { + className, + ...props +}: WordPressComponentProps< SelectControlItemCheckProps, 'span', false > ) => { + const cx = useCx(); + const itemCheckClassName = useMemo( + () => cx( styles.itemCheck, className ), + [ className, cx ] + ); + + return { + ...props, + className: itemCheckClassName, + }; +}; diff --git a/packages/components/src/custom-select-control-new/custom-select-control-item-check/index.ts b/packages/components/src/custom-select-control-new/custom-select-control-item-check/index.ts new file mode 100644 index 0000000000000..fd20b7feb64fb --- /dev/null +++ b/packages/components/src/custom-select-control-new/custom-select-control-item-check/index.ts @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useSelectControlItemCheck } from './hook'; diff --git a/packages/components/src/custom-select-control-new/index.ts b/packages/components/src/custom-select-control-new/index.ts index 3b02401f937fa..9991a9c298f82 100644 --- a/packages/components/src/custom-select-control-new/index.ts +++ b/packages/components/src/custom-select-control-new/index.ts @@ -5,3 +5,4 @@ export { default as CustomSelectControlGroupLabel } from './custom-select-contro export { default as CustomSelectControlArrow } from './custom-select-control-arrow'; export { default as CustomSelectControlSeparator } from './custom-select-control-separator'; export { default as CustomSelectControlRow } from './custom-select-control-row'; +export { default as CustomSelectControlItemCheck } from './custom-select-control-item-check'; diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts index cf3a12fb3a49c..96f59666aa183 100644 --- a/packages/components/src/custom-select-control-new/styles.ts +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -99,6 +99,10 @@ export const item = css` } `; +export const itemCheck = css` + /* TODO: styles (decide after prepping a storybook example) */ +`; + export const arrow = css``; export const group = css``; diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts index 4ca9ad18ccef4..067f6425f2244 100644 --- a/packages/components/src/custom-select-control-new/types.ts +++ b/packages/components/src/custom-select-control-new/types.ts @@ -23,6 +23,12 @@ export type SelectControlItemProps = SelectControlOptionBase & { checked?: boolean; }; +export type SelectControlItemCheckProps = SelectControlOptionBase & { + // Is classname necessary, with WordPressComponentProps? + className?: string; + children?: ReactNode; +}; + export type SelectControlProps = { value?: string; label?: string; From fc182686e88234211c8851f65f8d2975158504d7 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 26 Jul 2022 10:39:19 +0200 Subject: [PATCH 15/18] Rename internal component --- .../custom-select-control/component.tsx | 4 +- .../stories/index.tsx | 76 +++++++++++-------- 2 files changed, 45 insertions(+), 35 deletions(-) diff --git a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx index 06ab495638eb6..d3ecf78b8e772 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx @@ -17,7 +17,7 @@ import type { WordPressComponentProps } from '../../ui/context'; import { CustomSelectControlItem, CustomSelectControlArrow } from '../'; import type { SelectControlOption, SelectControlProps } from '../types'; -const SelectControlCustomSelectLabel = ( { +const CustomDisplayedValue = ( { options, value, }: { @@ -58,7 +58,7 @@ const UnforwardedSelectControl = ( ref={ forwardedRef } > { options?.length ? ( - diff --git a/packages/components/src/custom-select-control-new/stories/index.tsx b/packages/components/src/custom-select-control-new/stories/index.tsx index 12061d6cfacd0..80e2077e20e45 100644 --- a/packages/components/src/custom-select-control-new/stories/index.tsx +++ b/packages/components/src/custom-select-control-new/stories/index.tsx @@ -59,39 +59,49 @@ Default.args = { export const WithGroupsAndSeparators: ComponentStory< typeof CustomSelectControl -> = ( { onChange, ...args } ) => ( - - - - Primary - - - - - - - - - Secondary - - - - - - - - - Tertiary - - - - - - - - - -); +> = ( { onChange, ...args } ) => { + return ( + + { [ + { label: 'Primary', values: [ 'Red', 'Yellow', 'Blue' ] }, + { label: 'Secondary', values: [ 'Orange', 'Green', 'Purple' ] }, + { + label: 'Tertiary', + values: [ + 'Amber', + 'Vermilion', + 'Magenta', + 'Violet', + 'Teal', + 'Chartreuse', + ], + }, + ].map( ( { label, values }, groupIndex, groupArray ) => ( + <> + + + { label } + + { values.map( ( value, valueIndex ) => ( + + ) ) } + + { groupIndex < groupArray.length - 1 ? ( + + ) : null } + + ) ) } + + ); +}; WithGroupsAndSeparators.args = { label: 'Pick a color', }; From d4e73290fb07ee86fb27083ea9657c288b0a910d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 26 Jul 2022 10:39:35 +0200 Subject: [PATCH 16/18] clean up styles --- packages/components/src/custom-select-control-new/styles.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/components/src/custom-select-control-new/styles.ts b/packages/components/src/custom-select-control-new/styles.ts index 96f59666aa183..b90ba6fa08dca 100644 --- a/packages/components/src/custom-select-control-new/styles.ts +++ b/packages/components/src/custom-select-control-new/styles.ts @@ -6,8 +6,6 @@ import { css } from '@emotion/react'; /** * Internal dependencies */ -import { COLORS, CONFIG } from '../utils'; -import { space } from '../ui/utils/space'; const focused = css` outline: 2px solid hsl( 204, 100%, 40% ); From 4f0cd8d71b540ca22e62e80ec79227ea3ac81b15 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 26 Jul 2022 10:40:17 +0200 Subject: [PATCH 17/18] Expose preventScrollOnKeyDown prop --- .../custom-select-control/component.tsx | 3 +++ packages/components/src/custom-select-control-new/types.ts | 2 ++ 2 files changed, 5 insertions(+) diff --git a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx index d3ecf78b8e772..7efec7b237315 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx @@ -81,6 +81,9 @@ const UnforwardedSelectControl = ( key={ key } value={ option.value } disabled={ option.disabled } + preventScrollOnKeyDown={ + index === 0 ? true : false + } > { option.label } diff --git a/packages/components/src/custom-select-control-new/types.ts b/packages/components/src/custom-select-control-new/types.ts index 067f6425f2244..1b1efefaf061d 100644 --- a/packages/components/src/custom-select-control-new/types.ts +++ b/packages/components/src/custom-select-control-new/types.ts @@ -21,6 +21,8 @@ export type SelectControlItemProps = SelectControlOptionBase & { children?: ReactNode; // Do we want to expose this prop? checked?: boolean; + // Should we expose this? + preventScrollOnKeyDown?: boolean; }; export type SelectControlItemCheckProps = SelectControlOptionBase & { From 1bae011a4ff0fc1212ff942b0301284c9bbafe65 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 26 Jul 2022 10:42:38 +0200 Subject: [PATCH 18/18] Misc tidy up --- .../custom-select-control/component.tsx | 1 + .../src/custom-select-control-new/stories/index.tsx | 9 ++++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx index 7efec7b237315..ae336845d7fcc 100644 --- a/packages/components/src/custom-select-control-new/custom-select-control/component.tsx +++ b/packages/components/src/custom-select-control-new/custom-select-control/component.tsx @@ -71,6 +71,7 @@ const UnforwardedSelectControl = ( ) } + { /* Popover arrow? */ } { children ?? options?.map( ( option, index ) => { const key = diff --git a/packages/components/src/custom-select-control-new/stories/index.tsx b/packages/components/src/custom-select-control-new/stories/index.tsx index 80e2077e20e45..3f3b803e4b7af 100644 --- a/packages/components/src/custom-select-control-new/stories/index.tsx +++ b/packages/components/src/custom-select-control-new/stories/index.tsx @@ -38,10 +38,9 @@ export default meta; // - with HTML `` (and related vanilla elements)? // - example with custom author dropdown -export const Default: ComponentStory< typeof CustomSelectControl > = ( { - onChange, - ...args -} ) => ( +export const Default: ComponentStory< typeof CustomSelectControl > = ( + args +) => ( @@ -59,7 +58,7 @@ Default.args = { export const WithGroupsAndSeparators: ComponentStory< typeof CustomSelectControl -> = ( { onChange, ...args } ) => { +> = ( args ) => { return ( { [