Skip to content

Commit

Permalink
fix(Select): update incorrect documentation (#1825)
Browse files Browse the repository at this point in the history 
- update the types listed for value and defaultValue
- add in proper description for generated form fields based on key/value info
- hide a field from the documentation table that is currently non-fuctional
  • Loading branch information
@booc0mtaco
booc0mtaco authored Jan 10, 2024
1 parent 3b3922a commit 94aace5
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 30 deletions.
75 changes: 69 additions & 6 deletions src/components/Select/Select.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,43 @@ import type { OptionsAlignType, VariantType } from './Select';
import { Select } from './Select';
import Icon from '../Icon';

export default {
const meta: Meta<typeof Select> = {
title: 'Components/Select',
component: Select,
parameters: {
badges: ['1.2'],
layout: 'centered',
},
} as Meta;
argTypes: {
multiple: {
table: {
disable: true,
},
},
value: {
table: {
description: 'The value of the select field (when controlled)',
type: {
summary: 'SelectOption',
detail:
'An object with at least label (as string) and any other useful key/value pairs',
},
},
},
defaultValue: {
description: 'The default value of the select field (when uncontrolled)',
table: {
type: {
summary: 'SelectOption',
detail:
'An object with at least label (as string) and any other useful key/value pairs',
},
},
},
},
};

export default meta;

type Props = {
'aria-label'?: string;
Expand Down Expand Up @@ -210,12 +239,48 @@ function InteractiveExampleUsingChildren(props: Props) {
),
};

/**
* You can add a `name` prop to generate form fields for the value object.
*
* In this example, the field name is `"interactive-select"`, and the value is an object storing `{label: string, key: string}`.
*
* This will generate hidden fields with names:
* * `interactive-select[label]`
* * `interactive-select[key]`
*
* **NOTE**: for select value data types, `{label: string}` is required, but any other key/value pairs are allowed.
*/
export const WithFieldName: StoryObj = {
args: {
'aria-label': 'some label',
'data-testid': 'dropdown',
defaultValue: exampleOptions[0],
name: 'select',
children: (
<>
<Select.Button>
{({ value, open, disabled }) => (
<Select.ButtonWrapper isOpen={open}>
{value.label}
</Select.ButtonWrapper>
)}
</Select.Button>
<Select.Options>
{exampleOptions.map((option) => (
<Select.Option key={option.key} value={option}>
{option.label}
</Select.Option>
))}
</Select.Options>
</>
),
},
};

/**
* You can implement a `Select.Button` with a render prop. This exposes several useful values to
* control the appearance of the rendered button. The render prop case is "Headless", in that it has
* no styling by default.
*
* Remember to include a `name` so that a hidden field is generated in this case
*/
export const UncontrolledHeadless: StoryObj = {
args: {
Expand Down Expand Up @@ -274,8 +339,6 @@ Hidden fields named "select[key]" and "select[label]" because the datatype used

/**
* You can use `Select.ButtonWrapper` to borrow the existing style used for controlled `Select` components.
*
* Remember to include a `name` so that a hidden field is generated in this case
*/
export const StyledUncontrolled: StoryObj = {
args: {
Expand Down
5 changes: 3 additions & 2 deletions src/components/Select/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,9 @@ type SelectProps = ExtractProps<typeof Listbox> &
*/
className?: string;
/**
* Name of the form element, which triggers the generation of a hidden form field.
* @see https://headlessui.com/react/listbox#using-with-html-forms
* Name of the form element, which triggers the generation of hidden key/value form fields (e.g. `name=$name[$key]`).
*
* See: https://headlessui.com/react/listbox#using-with-html-forms
*/
name?: string;
/**
Expand Down
80 changes: 58 additions & 22 deletions src/components/Select/__snapshots__/Select.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ exports[`<Select /> Compact story renders snapshot 1`] = `
data-testid="dropdown"
>
<button
aria-controls="headlessui-listbox-options-:rm:"
aria-controls="headlessui-listbox-options-:rr:"
aria-expanded="true"
aria-haspopup="listbox"
class="select-button select-button--compact"
data-headlessui-state="open"
id="headlessui-listbox-button-:rl:"
id="headlessui-listbox-button-:rq:"
type="button"
>
<span>
Expand Down Expand Up @@ -84,19 +84,19 @@ exports[`<Select /> DefaultWithVisibleLabel story renders snapshot 1`] = `
<label
class="select__label"
data-headlessui-state="open"
id="headlessui-listbox-label-:rf:"
id="headlessui-listbox-label-:rk:"
>
Favorite Animal
</label>
</div>
<button
aria-controls="headlessui-listbox-options-:rh:"
aria-controls="headlessui-listbox-options-:rm:"
aria-expanded="true"
aria-haspopup="listbox"
aria-labelledby="headlessui-listbox-label-:rf: headlessui-listbox-button-:rg:"
aria-labelledby="headlessui-listbox-label-:rk: headlessui-listbox-button-:rl:"
class="select-button"
data-headlessui-state="open"
id="headlessui-listbox-button-:rg:"
id="headlessui-listbox-button-:rl:"
type="button"
>
<span>
Expand Down Expand Up @@ -127,12 +127,12 @@ exports[`<Select /> NoVisibleLabel story renders snapshot 1`] = `
data-testid="dropdown"
>
<button
aria-controls="headlessui-listbox-options-:rr:"
aria-controls="headlessui-listbox-options-:r10:"
aria-expanded="true"
aria-haspopup="listbox"
class="select-button"
data-headlessui-state="open"
id="headlessui-listbox-button-:rq:"
id="headlessui-listbox-button-:rv:"
type="button"
>
<span>
Expand Down Expand Up @@ -163,12 +163,12 @@ exports[`<Select /> StyledUncontrolled story renders snapshot 1`] = `
data-testid="dropdown"
>
<button
aria-controls="headlessui-listbox-options-:rb:"
aria-controls="headlessui-listbox-options-:rg:"
aria-expanded="true"
aria-haspopup="listbox"
class="select-button"
data-headlessui-state="open"
id="headlessui-listbox-button-:ra:"
id="headlessui-listbox-button-:rf:"
type="button"
>
<span>
Expand Down Expand Up @@ -199,12 +199,12 @@ exports[`<Select /> UncontrolledHeadless story renders snapshot 1`] = `
data-testid="dropdown"
>
<button
aria-controls="headlessui-listbox-options-:r6:"
aria-controls="headlessui-listbox-options-:rb:"
aria-expanded="true"
aria-haspopup="listbox"
class="fpo"
data-headlessui-state="open"
id="headlessui-listbox-button-:r5:"
id="headlessui-listbox-button-:ra:"
type="button"
>
Dogs
Expand All @@ -225,19 +225,19 @@ exports[`<Select /> UsingChildrenProp story renders snapshot 1`] = `
<label
class="select__label"
data-headlessui-state="open"
id="headlessui-listbox-label-:rv:"
id="headlessui-listbox-label-:r14:"
>
Favorite Animal
</label>
</div>
<button
aria-controls="headlessui-listbox-options-:r11:"
aria-controls="headlessui-listbox-options-:r16:"
aria-expanded="true"
aria-haspopup="listbox"
aria-labelledby="headlessui-listbox-label-:rv: headlessui-listbox-button-:r10:"
aria-labelledby="headlessui-listbox-label-:r14: headlessui-listbox-button-:r15:"
class="select-button"
data-headlessui-state="open"
id="headlessui-listbox-button-:r10:"
id="headlessui-listbox-button-:r15:"
type="button"
>
<span>
Expand Down Expand Up @@ -269,12 +269,12 @@ exports[`<Select /> UsingFunctionChildrenProp story renders snapshot 1`] = `
data-testid="dropdown"
>
<button
aria-controls="headlessui-listbox-options-:r16:"
aria-controls="headlessui-listbox-options-:r1b:"
aria-expanded="true"
aria-haspopup="listbox"
class="fpo"
data-headlessui-state="open"
id="headlessui-listbox-button-:r15:"
id="headlessui-listbox-button-:r1a:"
type="button"
>
Select
Expand All @@ -293,6 +293,42 @@ exports[`<Select /> UsingFunctionChildrenProp story renders snapshot 1`] = `
</div>
`;

exports[`<Select /> WithFieldName story renders snapshot 1`] = `
<div
class="select"
data-headlessui-state="open"
data-testid="dropdown"
>
<button
aria-controls="headlessui-listbox-options-:r6:"
aria-expanded="true"
aria-haspopup="listbox"
class="select-button"
data-headlessui-state="open"
id="headlessui-listbox-button-:r5:"
type="button"
>
<span>
Dogs
</span>
<svg
aria-hidden="true"
class="icon select-button__icon select-button__icon--reversed"
fill="currentColor"
height="1.25rem"
style="--icon-size: 1.25rem;"
viewBox="0 0 24 24"
width="1.25rem"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
/>
</svg>
</button>
</div>
`;

exports[`<Select /> WithSelectedOption story renders snapshot 1`] = `
<div
class="select w-60"
Expand All @@ -305,19 +341,19 @@ exports[`<Select /> WithSelectedOption story renders snapshot 1`] = `
<label
class="select__label"
data-headlessui-state="open"
id="headlessui-listbox-label-:r1a:"
id="headlessui-listbox-label-:r1f:"
>
Favorite Animal
</label>
</div>
<button
aria-controls="headlessui-listbox-options-:r1c:"
aria-controls="headlessui-listbox-options-:r1h:"
aria-expanded="true"
aria-haspopup="listbox"
aria-labelledby="headlessui-listbox-label-:r1a: headlessui-listbox-button-:r1b:"
aria-labelledby="headlessui-listbox-label-:r1f: headlessui-listbox-button-:r1g:"
class="select-button"
data-headlessui-state="open"
id="headlessui-listbox-button-:r1b:"
id="headlessui-listbox-button-:r1g:"
type="button"
>
<span>
Expand Down

0 comments on commit 94aace5

Please sign in to comment.