From 5a16d0c26c332963b83b4578103b016870d4892a Mon Sep 17 00:00:00 2001 From: XiangyuShen Date: Thu, 22 Sep 2022 15:03:05 -0400 Subject: [PATCH 1/2] chore(Tile): Convert examples to typescript --- .../src/components/Tile/examples/Tile.md | 103 +----------------- .../components/Tile/examples/TileBasic.tsx | 10 ++ .../components/Tile/examples/TileStacked.tsx | 17 +++ .../examples/TileStackedWithLargeIcons.tsx | 17 +++ .../Tile/examples/TileWithExtraContent.tsx | 26 +++++ .../components/Tile/examples/TileWithIcon.tsx | 17 +++ .../Tile/examples/TileWithSubtext.tsx | 16 +++ 7 files changed, 109 insertions(+), 97 deletions(-) create mode 100644 packages/react-core/src/components/Tile/examples/TileBasic.tsx create mode 100644 packages/react-core/src/components/Tile/examples/TileStacked.tsx create mode 100644 packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx create mode 100644 packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx create mode 100644 packages/react-core/src/components/Tile/examples/TileWithIcon.tsx create mode 100644 packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 80f041d7ab4..460e3bd90e4 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -15,121 +15,30 @@ Keyboard interaction patterns and a11y is implemented in the Tile demos, located ### Basic -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; - -
- - - -
; +```ts file="./TileBasic.tsx" ``` ### With subtext -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; - -
- - Subtext goes here - {' '} - - Subtext goes here - {' '} - - Subtext goes here - -
; +```ts file="./TileWithSubtext.tsx" ``` ### With icon -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; -import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; - -
- } isSelected={false}> - Subtext goes here - {' '} - } isSelected> - Subtext goes here - {' '} - } isDisabled isSelected={false}> - Subtext goes here - -
; +```ts file="./TileWithIcon.tsx" ``` ### Stacked -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; - -
- } isStacked isSelected={false}> - Subtext goes here - {' '} - } isStacked isSelected> - Subtext goes here - {' '} - } isStacked isDisabled isSelected={false}> - Subtext goes here - -
; +```ts file="./TileStacked.tsx" ``` ### Stacked with large icons -```js -import React from 'react'; -import { Tile } from '@patternfly/react-core'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; - -
- } isStacked isDisplayLarge isSelected={false}> - Subtext goes here - {' '} - } isStacked isDisplayLarge isSelected> - Subtext goes here - {' '} - } isStacked isDisplayLarge isDisabled isSelected={false}> - Subtext goes here - -
; +```ts file="./TileStackedWithLargeIcons.tsx" ``` ### With extra content -```js -import React from 'react'; -import { Tile, Flex } from '@patternfly/react-core'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; - -
- - - } isStacked isSelected={false}> - This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really - really long subtext that goes on for so long that it has to wrap to the next line. - - - - } isStacked isSelected> - This is really really long subtext that goes on for so long that it has to wrap to the next line. - - - - } isStacked isDisabled isSelected={false}> - Subtext goes here - - - -
; +```ts file="./TileWithExtraContent.tsx" ``` diff --git a/packages/react-core/src/components/Tile/examples/TileBasic.tsx b/packages/react-core/src/components/Tile/examples/TileBasic.tsx new file mode 100644 index 00000000000..40549eb85e0 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileBasic.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; + +export const TileBasic: React.FunctionComponent = () => ( +
+ + + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileStacked.tsx b/packages/react-core/src/components/Tile/examples/TileStacked.tsx new file mode 100644 index 00000000000..82728f9cda8 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileStacked.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +export const TileStacked: React.FunctionComponent = () => ( +
+ } isStacked isSelected={false}> + Subtext goes here + {' '} + } isStacked isSelected> + Subtext goes here + {' '} + } isStacked isDisabled isSelected={false}> + Subtext goes here + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx b/packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx new file mode 100644 index 00000000000..ccaf2ce1c56 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileStackedWithLargeIcons.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +export const TileStackedWithLargeIcons: React.FunctionComponent = () => ( +
+ } isStacked isDisplayLarge isSelected={false}> + Subtext goes here + {' '} + } isStacked isDisplayLarge isSelected> + Subtext goes here + {' '} + } isStacked isDisplayLarge isDisabled isSelected={false}> + Subtext goes here + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx b/packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx new file mode 100644 index 00000000000..b71e4094ac6 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileWithExtraContent.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Tile, Flex } from '@patternfly/react-core'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; + +export const TileWithExtraContent: React.FunctionComponent = () => ( +
+ + + } isStacked isSelected={false}> + This is really really long subtext that goes on for so long that it has to wrap to the next line. This is + really really long subtext that goes on for so long that it has to wrap to the next line. + + + + } isStacked isSelected> + This is really really long subtext that goes on for so long that it has to wrap to the next line. + + + + } isStacked isDisabled isSelected={false}> + Subtext goes here + + + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileWithIcon.tsx b/packages/react-core/src/components/Tile/examples/TileWithIcon.tsx new file mode 100644 index 00000000000..8d6110b0ab1 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileWithIcon.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; +import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; + +export const TileWithIcon: React.FunctionComponent = () => ( +
+ } isSelected={false}> + Subtext goes here + {' '} + } isSelected> + Subtext goes here + {' '} + } isDisabled isSelected={false}> + Subtext goes here + +
+); diff --git a/packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx b/packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx new file mode 100644 index 00000000000..73e39747999 --- /dev/null +++ b/packages/react-core/src/components/Tile/examples/TileWithSubtext.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Tile } from '@patternfly/react-core'; + +export const TileWithSubtext: React.FunctionComponent = () => ( +
+ + Subtext goes here + {' '} + + Subtext goes here + {' '} + + Subtext goes here + +
+); From f70491eb865fad6bb5dfccc93652684bd449c272 Mon Sep 17 00:00:00 2001 From: XiangyuShen Date: Thu, 22 Sep 2022 17:20:55 -0400 Subject: [PATCH 2/2] Tile demo link and incorrect Ids fixed --- .../src/components/Tile/examples/Tile.md | 2 +- packages/react-core/src/demos/TileDemo.md | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/Tile/examples/Tile.md b/packages/react-core/src/components/Tile/examples/Tile.md index 460e3bd90e4..f25f38ecf9f 100644 --- a/packages/react-core/src/components/Tile/examples/Tile.md +++ b/packages/react-core/src/components/Tile/examples/Tile.md @@ -11,7 +11,7 @@ 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](/documentation/react/demos/tiledemo). +Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos). ### Basic diff --git a/packages/react-core/src/demos/TileDemo.md b/packages/react-core/src/demos/TileDemo.md index 5c47e5410ed..e65369c1383 100644 --- a/packages/react-core/src/demos/TileDemo.md +++ b/packages/react-core/src/demos/TileDemo.md @@ -27,10 +27,10 @@ const TileSingleSelect: React.FunctionComponent = () => { return (
- - - - + + + +
); }; @@ -71,14 +71,14 @@ const TileMultiSelect: React.FunctionComponent = () => { id="multiselect-tile-1" onClick={onSelect} onKeyDown={onKeyDown} - isSelected={selectedIds.includes('tile-1')} + isSelected={selectedIds.includes('multiselect-tile-1')} /> { id="multiselect-tile-4" onClick={onSelect} onKeyDown={onKeyDown} - isSelected={selectedIds.includes('tile-4')} + isSelected={selectedIds.includes('multiselect-tile-4')} /> );