From 88c4e78449436b6eaacdc9533cf1e48bc72eed43 Mon Sep 17 00:00:00 2001 From: Kaelan Khiatani Date: Tue, 30 May 2023 15:39:37 -0400 Subject: [PATCH 01/14] Adds content to Tile examples --- .../src/components/Tile/examples/Tile.md | 35 +++++++------------ 1 file changed, 13 insertions(+), 22 deletions(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 660bd0a109d..8edbe8a64b3 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -10,34 +10,25 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; ## Examples -Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). +### Basic tile +Basic tiles have all of their variables under the `` component. You can allow or deny access using the states `isSelected` and `isDisabled`. You can also alter the title text inside of the tile by inputting the desired words next to `title=`. -### Basic - -```ts file="./TileBasic.tsx" -``` - -### With subtext - -```ts file="./TileWithSubtext.tsx" -``` +### With subtext +Tile subtext can provide users with additional context. To add subtext, input a short description to the `` component. ### With icon +Icons can provide users with a visual to understand what the tile is being used for. To add icons, input `icon=` inside of `` and set it equal to one of the available [icons](https://www.patternfly.org/v4/components/icon/). -```ts file="./TileWithIcon.tsx" -``` - -### Stacked +### Stacked tile +You can further customize your icon by placing it above your title. To stack your icon on top of the title, input `isStacked` inside of ``. -```ts file="./TileStacked.tsx" -``` +### Stacked tile with large icons +You can make your icons larger to catch the user's attention. To make an icon large, input `isDisplayLarge` inside of ``. -### Stacked with large icons +Be aware that `isDisplayLarge` cannot be used unless `isStacked` has already been typed. -```ts file="./TileStackedWithLargeIcons.tsx" -``` +### Subtexts with extra content +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 input the component `Flex` into ``. -### With extra content +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" -``` From 4f3d03a88a67139ac5b53d207f28c102ad63680d Mon Sep 17 00:00:00 2001 From: Kaelan Khiatani Date: Wed, 21 Jun 2023 16:00:43 -0500 Subject: [PATCH 02/14] Title --- .../src/components/Tile/examples/Tile.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 8edbe8a64b3..ba4f69214b8 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -11,24 +11,24 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; ## Examples ### Basic tile -Basic tiles have all of their variables under the `` component. You can allow or deny access using the states `isSelected` and `isDisabled`. You can also alter the title text inside of the tile by inputting the desired words next to `title=`. +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’. ### With subtext -Tile subtext can provide users with additional context. To add subtext, input a short description to the `` component. +Tile subtext can provide users with additional context. To add subtext, pass a short description to the `` component. -### With icon -Icons can provide users with a visual to understand what the tile is being used for. To add icons, input `icon=` inside of `` and set it equal to one of the available [icons](https://www.patternfly.org/v4/components/icon/). +### 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 ``. -### Stacked tile -You can further customize your icon by placing it above your title. To stack your icon on top of the title, input `isStacked` inside of ``. +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. -### Stacked tile with large icons -You can make your icons larger to catch the user's attention. To make an icon large, input `isDisplayLarge` inside of ``. +### 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. -Be aware that `isDisplayLarge` cannot be used unless `isStacked` has already been typed. +### 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. -### Subtexts with extra content -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 input the component `Flex` into ``. +### 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.. -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. +Be aware that `isDisplayLarge` can only be used when `isStacked` is also applied. From fe7fae9d8a6121c57558639468a2897841272125 Mon Sep 17 00:00:00 2001 From: Kaelan Khiatani Date: Wed, 21 Jun 2023 16:28:31 -0500 Subject: [PATCH 03/14] Select Next --- .../react-core/src/next/components/Select.md | 83 +++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 packages/react-core/src/next/components/Select.md 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..a54b4f5e936 --- /dev/null +++ b/packages/react-core/src/next/components/Select.md @@ -0,0 +1,83 @@ +--- +id: Select +section: components +subsection: menus +cssPrefix: pf-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 +A **select** list enables users to select one or more items from a list. Use a select list when options are dynamic or variable. + +A newer React implementation of the select will replace the existing implementation at the next major release. The documentation for the newer implementation is under the [React next](www.patternfly.org/v4/components/select/react-next) tab, and this newer implementation can be imported from @patternfly/react-core/next. + +### 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" + +``` + +### 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" + +``` + +```ts file="./SelectTypeaheadCreatable.tsx" + +``` + +### Multiple typeahead +A typeahead can also be used to select multiple options from its list. +```ts file="./SelectMultiTypeahead.tsx" + +``` + + +```ts file="./SelectMultiTypeaheadCreatable.tsx" + +``` + + +```ts file="./SelectMultiTypeaheadCheckbox.tsx" + +``` + +### View more + +```ts file="./SelectViewMore.tsx" + +``` + +### Footer + +```ts file="./SelectFooter.tsx" + +``` From bf1f51287d460fd92ff0ce128f4563d7ce141d29 Mon Sep 17 00:00:00 2001 From: Kaelan Khiatani Date: Thu, 6 Jul 2023 13:24:19 -0400 Subject: [PATCH 04/14] docs(tile): Adds content to tile component --- .../src/components/Tile/examples/Tile.md | 25 ++++++++++++++----- 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index ba4f69214b8..60363236396 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -1,7 +1,7 @@ --- id: Tile section: components -cssPrefix: pf-v5-c-tile +cssPrefix: pf-c-tile propComponents: ['Tile'] --- @@ -10,25 +10,38 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; ## Examples +Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). + ### 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 Tile subtext can provide users with additional context. To add subtext, pass a short description to the `` component. - -### 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="./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" +``` ### 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" +``` ### 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 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" +``` From f8ebafc54dbbb493004c5ea83835118339f14d75 Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 15:15:25 -0400 Subject: [PATCH 05/14] Update packages/react-core/src/components/Tile/examples/Tile.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/components/Tile/examples/Tile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 60363236396..d366f7e3555 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -13,7 +13,7 @@ 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 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’. +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" ``` From 8d619b2fcd732827e2657dcead43406093261226 Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 15:15:59 -0400 Subject: [PATCH 06/14] Update packages/react-core/src/components/Tile/examples/Tile.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/components/Tile/examples/Tile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index d366f7e3555..720f86e23ac 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -28,7 +28,7 @@ Icons can provide a visual cue that helps users understand what the tile is bein ``` ### 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. +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" ``` From d12ffd007ba44de86bb3919c84c44000def964d5 Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 15:16:07 -0400 Subject: [PATCH 07/14] Update packages/react-core/src/next/components/Select.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/next/components/Select.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/react-core/src/next/components/Select.md b/packages/react-core/src/next/components/Select.md index a54b4f5e936..68f8e5e5a5c 100644 --- a/packages/react-core/src/next/components/Select.md +++ b/packages/react-core/src/next/components/Select.md @@ -12,9 +12,6 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; ## Examples -A **select** list enables users to select one or more items from a list. Use a select list when options are dynamic or variable. - -A newer React implementation of the select will replace the existing implementation at the next major release. The documentation for the newer implementation is under the [React next](www.patternfly.org/v4/components/select/react-next) tab, and this newer implementation can be imported from @patternfly/react-core/next. ### 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. From 7a7e663b7adc7716a21e528f6742e1cc4b6fb975 Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 15:25:12 -0400 Subject: [PATCH 08/14] Update packages/react-core/src/components/Tile/examples/Tile.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/components/Tile/examples/Tile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 720f86e23ac..d12ac409840 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -33,7 +33,7 @@ You can further customize a tile’s appearance by placing an icon above the tit ``` ### 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.. +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" From 06863ffa2bf65a6125140ec74f555bab5ad19b21 Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 16:12:11 -0400 Subject: [PATCH 09/14] Update packages/react-core/src/components/Tile/examples/Tile.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/components/Tile/examples/Tile.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index d12ac409840..097afb75cef 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -1,7 +1,7 @@ --- id: Tile section: components -cssPrefix: pf-c-tile +cssPrefix: pf-v5-c-tile propComponents: ['Tile'] --- From a9ec331152361026bba0221a027c80b8b9b1d6e5 Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 16:12:33 -0400 Subject: [PATCH 10/14] Update packages/react-core/src/next/components/Select.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/next/components/Select.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/next/components/Select.md b/packages/react-core/src/next/components/Select.md index 68f8e5e5a5c..e633940fa56 100644 --- a/packages/react-core/src/next/components/Select.md +++ b/packages/react-core/src/next/components/Select.md @@ -2,7 +2,7 @@ id: Select section: components subsection: menus -cssPrefix: pf-c-select +cssPrefix: pf-v5-c-select propComponents: ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps'] ouia: true From bb41c6fd052a456af845dbd184372678d534dc4b Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 16:12:51 -0400 Subject: [PATCH 11/14] Update packages/react-core/src/next/components/Select.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/next/components/Select.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-core/src/next/components/Select.md b/packages/react-core/src/next/components/Select.md index e633940fa56..7aac5391b25 100644 --- a/packages/react-core/src/next/components/Select.md +++ b/packages/react-core/src/next/components/Select.md @@ -23,6 +23,12 @@ You can also add more options by adding ``. You can follow the for ``` +### 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. From a72e34549a4e1c975674e68c54e10ff9b4e28527 Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 16:12:57 -0400 Subject: [PATCH 12/14] Update packages/react-core/src/next/components/Select.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/next/components/Select.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-core/src/next/components/Select.md b/packages/react-core/src/next/components/Select.md index 7aac5391b25..86f02e6d653 100644 --- a/packages/react-core/src/next/components/Select.md +++ b/packages/react-core/src/next/components/Select.md @@ -63,6 +63,7 @@ A typeahead can also be used to select multiple options from its list. ``` +### Typeahead with create option ```ts file="./SelectMultiTypeaheadCreatable.tsx" From 93be897485d63ea73b5c2206edd3ba1a61264114 Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 16:13:02 -0400 Subject: [PATCH 13/14] Update packages/react-core/src/next/components/Select.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/next/components/Select.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-core/src/next/components/Select.md b/packages/react-core/src/next/components/Select.md index 86f02e6d653..277f810c83e 100644 --- a/packages/react-core/src/next/components/Select.md +++ b/packages/react-core/src/next/components/Select.md @@ -69,6 +69,7 @@ A typeahead can also be used to select multiple options from its list. ``` +### Multiple typeahead with checkboxes ```ts file="./SelectMultiTypeaheadCheckbox.tsx" From 67e1ad4356c44fc9bd98b34f8a551e421c9f8b0d Mon Sep 17 00:00:00 2001 From: KaelanKhiatani <122485823+KaelanKhiatani@users.noreply.github.com> Date: Tue, 11 Jul 2023 16:13:09 -0400 Subject: [PATCH 14/14] Update packages/react-core/src/next/components/Select.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- packages/react-core/src/next/components/Select.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-core/src/next/components/Select.md b/packages/react-core/src/next/components/Select.md index 277f810c83e..fe1edb9b553 100644 --- a/packages/react-core/src/next/components/Select.md +++ b/packages/react-core/src/next/components/Select.md @@ -53,6 +53,8 @@ You can also change the name of the initial prompt under `placeholder` in `