diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 660bd0a109d..097afb75cef 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -12,32 +12,36 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). -### Basic - +### Basic tile +Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`. ```ts file="./TileBasic.tsx" ``` -### With subtext - +### With subtext +Tile subtext can provide users with additional context. To add subtext, pass a short description to the `` component. ```ts file="./TileWithSubtext.tsx" ``` ### With icon - +Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `icon` property. ```ts file="./TileWithIcon.tsx" ``` -### Stacked - +### With stacked icon +You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `isStacked` property. ```ts file="./TileStacked.tsx" ``` -### Stacked with large icons +### With large icons +You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `isDisplayLarge` property. +Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied. ```ts file="./TileStackedWithLargeIcons.tsx" ``` -### With extra content +### With long subtext +To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into ``. +You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks. ```ts file="./TileWithExtraContent.tsx" ``` diff --git a/packages/react-core/src/next/components/Select.md b/packages/react-core/src/next/components/Select.md new file mode 100644 index 00000000000..fe1edb9b553 --- /dev/null +++ b/packages/react-core/src/next/components/Select.md @@ -0,0 +1,90 @@ +--- +id: Select +section: components +subsection: menus +cssPrefix: pf-v5-c-select +propComponents: + ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps'] +ouia: true +--- + +import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +## Examples + +### Single select +Single select dropdown menus allow your users to select a single option from a list of options. To change the name of the options, alter the ‘itemId’ property. + +The initial text is listed in the select box to guide what options the user can select from. To change this text, alter the ‘React.useState’ property. + +You can also add more options by adding ``. You can follow the format of the preexisting options to ensure proper application. +```ts file="./SelectBasic.tsx" + +``` + +### Option variations + +Showcases different option variants and customizations that are commonly used in a select menu. For a more complete list, see the [Menu documentation](/components/menus/menu). + +```ts file="./SelectOptionVariations.tsx" + +### Grouped single select +You can change a single select component to have multiple groups. To do this, you have to add the component `` and list the desired options below. + +You can also change the text above the group by inserting the property `label` and the desired name of the group by altering ``. +```ts file="./SelectGrouped.tsx" + +``` + +### Checkbox select +You can use a checkbox select to allow your users to check multiple options in one select component. You can change the name of each checkbox by altering the `` component. You can also change the name of the initial prompt in ``. + +You also have the option to disable one of the checkmark options. To do this, you can pass the variable `isDisabled` inside of `` +```ts file="./SelectCheckbox.tsx" + +``` + +### Typeahead +A typeahead allows your users to type their response to narrow it down from the list of options. You can change the name of the checks by altering both the `ItemId` and `children` properties. + +You can also change the name of the initial prompt under `placeholder` in ``. +```ts file="./SelectTypeahead.tsx" + +``` + +### Typeahead with create option + +```ts file="./SelectTypeaheadCreatable.tsx" + +``` + +### Multiple typeahead +A typeahead can also be used to select multiple options from its list. +```ts file="./SelectMultiTypeahead.tsx" + +``` + +### Typeahead with create option + +```ts file="./SelectMultiTypeaheadCreatable.tsx" + +``` + +### Multiple typeahead with checkboxes + +```ts file="./SelectMultiTypeaheadCheckbox.tsx" + +``` + +### View more + +```ts file="./SelectViewMore.tsx" + +``` + +### Footer + +```ts file="./SelectFooter.tsx" + +```