From f3515c0736c404bf4d01fbb3509bfd5076db494b Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 20 Apr 2022 16:44:18 -0400 Subject: [PATCH 1/7] add support for switching orientation at various breakpoints --- .../src/components/Divider/Divider.tsx | 10 ++++++++++ .../src/components/Divider/examples/Divider.md | 6 ++++++ .../DividerOrientationVariousBreakpoints.tsx | 17 +++++++++++++++++ ...viderVerticalFlexInsetVariousBreakpoints.tsx | 2 +- 4 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx index 321f5190835..431e6ad1a3d 100644 --- a/packages/react-core/src/components/Divider/Divider.tsx +++ b/packages/react-core/src/components/Divider/Divider.tsx @@ -25,6 +25,14 @@ export interface DividerProps extends React.HTMLProps { xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; }; + /** Indicates how the divider will display at various breakpoints. */ + orientation?: { + sm?: 'vertical' | 'horizontal'; + md?: 'vertical' | 'horizontal'; + lg?: 'vertical' | 'horizontal'; + xl?: 'vertical' | 'horizontal'; + '2xl'?: 'vertical' | 'horizontal'; + }; } export const Divider: React.FunctionComponent = ({ @@ -32,6 +40,7 @@ export const Divider: React.FunctionComponent = ({ component = DividerVariant.hr, isVertical = false, inset, + orientation, ...props }: DividerProps) => { const Component: any = component; @@ -42,6 +51,7 @@ export const Divider: React.FunctionComponent = ({ styles.divider, isVertical && styles.modifiers.vertical, formatBreakpointMods(inset, styles), + formatBreakpointMods(orientation, styles), className )} {...(component !== 'hr' && { role: 'separator' })} diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md index 93cf361ae2a..6d9b86d78e4 100644 --- a/packages/react-core/src/components/Divider/examples/Divider.md +++ b/packages/react-core/src/components/Divider/examples/Divider.md @@ -46,3 +46,9 @@ propComponents: ['Divider'] ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx' ``` + +### Switch orientation at various breakpoints + +```ts file='./DividerOrientationVariousBreakpoints.tsx' +``` + diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx new file mode 100644 index 00000000000..f6ff86b9cbc --- /dev/null +++ b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Divider, Flex, FlexItem } from '@patternfly/react-core'; + +export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => ( + + first item + + second item + +); diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx index e82d433546d..4a8ba25c7d3 100644 --- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx @@ -13,6 +13,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent xl: 'insetXs' }} /> - first item + second item ); From e69e965cdf1da46d8e94dd432bfb1ce8d9a1f0ea Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 2 May 2022 10:31:09 -0400 Subject: [PATCH 2/7] update paths --- .../src/components/Divider/Divider.tsx | 10 ---------- .../src/components/Divider/examples/Divider.md | 6 ------ .../DividerOrientationVariousBreakpoints.tsx | 17 ----------------- ...viderVerticalFlexInsetVariousBreakpoints.tsx | 2 +- 4 files changed, 1 insertion(+), 34 deletions(-) delete mode 100644 packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx index 431e6ad1a3d..321f5190835 100644 --- a/packages/react-core/src/components/Divider/Divider.tsx +++ b/packages/react-core/src/components/Divider/Divider.tsx @@ -25,14 +25,6 @@ export interface DividerProps extends React.HTMLProps { xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl'; }; - /** Indicates how the divider will display at various breakpoints. */ - orientation?: { - sm?: 'vertical' | 'horizontal'; - md?: 'vertical' | 'horizontal'; - lg?: 'vertical' | 'horizontal'; - xl?: 'vertical' | 'horizontal'; - '2xl'?: 'vertical' | 'horizontal'; - }; } export const Divider: React.FunctionComponent = ({ @@ -40,7 +32,6 @@ export const Divider: React.FunctionComponent = ({ component = DividerVariant.hr, isVertical = false, inset, - orientation, ...props }: DividerProps) => { const Component: any = component; @@ -51,7 +42,6 @@ export const Divider: React.FunctionComponent = ({ styles.divider, isVertical && styles.modifiers.vertical, formatBreakpointMods(inset, styles), - formatBreakpointMods(orientation, styles), className )} {...(component !== 'hr' && { role: 'separator' })} diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md index 6d9b86d78e4..93cf361ae2a 100644 --- a/packages/react-core/src/components/Divider/examples/Divider.md +++ b/packages/react-core/src/components/Divider/examples/Divider.md @@ -46,9 +46,3 @@ propComponents: ['Divider'] ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx' ``` - -### Switch orientation at various breakpoints - -```ts file='./DividerOrientationVariousBreakpoints.tsx' -``` - diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx deleted file mode 100644 index f6ff86b9cbc..00000000000 --- a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Divider, Flex, FlexItem } from '@patternfly/react-core'; - -export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => ( - - first item - - second item - -); diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx index 4a8ba25c7d3..e82d433546d 100644 --- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx +++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx @@ -13,6 +13,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent xl: 'insetXs' }} /> - second item + first item ); From 29779c56da082f26e414221cae035e451bf01e48 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 5 May 2022 15:39:04 -0400 Subject: [PATCH 3/7] fullscreen empty state demo --- packages/react-table/src/demos/Table.md | 56 +++++++++++++++---------- 1 file changed, 33 insertions(+), 23 deletions(-) diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index a485aad52e1..70541885351 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -2959,28 +2959,30 @@ These examples demonstrate the use of an [Empty State component](/components/emp ### Empty -```js +```js isFullscreen import React from 'react'; import { + Bullseye, Button, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateSecondaryActions, + PageSection, Title } from '@patternfly/react-core'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import { Table, TableHeader, TableBody } from '@patternfly/react-table'; +import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper'; class EmptyStateDemo extends React.Component { render() { const columns = [ - { title: 'Servers' }, - { title: 'Threads' }, - { title: 'Applications' }, + { title: 'Repositories' }, + { title: 'Branches' }, + { title: 'Pull requests' }, { title: 'Workspaces' }, - { title: 'Status' }, - { title: 'Location' } + { title: 'Last commit' } ]; const rows = [ @@ -2990,18 +2992,22 @@ class EmptyStateDemo extends React.Component { { props: { colSpan: 8 }, title: ( - - - - No results found - - No results match this filter criteria. Clear all filters and try again. - - - - + + + + + No results found + + + No results match this filter criteria. Clear all filters and try again. + + + + + + ) } ] @@ -3009,10 +3015,14 @@ class EmptyStateDemo extends React.Component { ]; return ( - - - -
+ + + + + +
+ + ); } } @@ -3043,7 +3053,7 @@ class LoadingStateDemo extends React.Component { props: { colSpan: 8 }, title: ( - + ) } From 838f6b6c238bebec40c47a5e06c7d9cae5984c4c Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 16 May 2022 10:35:20 -0400 Subject: [PATCH 4/7] wrap in card --- .../src/components/Switch/examples/Switch.md | 9 +++++---- packages/react-table/src/demos/Table.md | 15 +++++++++------ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/react-core/src/components/Switch/examples/Switch.md b/packages/react-core/src/components/Switch/examples/Switch.md index c7296a0f10a..5636aafa0d5 100644 --- a/packages/react-core/src/components/Switch/examples/Switch.md +++ b/packages/react-core/src/components/Switch/examples/Switch.md @@ -176,7 +176,8 @@ import { Switch } from '@patternfly/react-core'; aria-label="Message when on" label="Message when on" labelOff="Message when off" - isChecked + isChecked={null} + defaultChecked />

- +
- + ; ``` diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index 70541885351..dd6e6097736 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -2964,6 +2964,7 @@ import React from 'react'; import { Bullseye, Button, + Card, EmptyState, EmptyStateIcon, EmptyStateBody, @@ -3016,12 +3017,14 @@ class EmptyStateDemo extends React.Component { return ( - - - - -
- + + + + + +
+ + ); } From 58d4c19f3801a856cc7336e4b289084abc2b130f Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 18 May 2022 15:40:18 -0400 Subject: [PATCH 5/7] fix order and delete switch changes --- .../react-core/src/components/Switch/examples/Switch.md | 9 ++++----- packages/react-table/src/demos/Table.md | 8 ++++---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/react-core/src/components/Switch/examples/Switch.md b/packages/react-core/src/components/Switch/examples/Switch.md index 5636aafa0d5..c7296a0f10a 100644 --- a/packages/react-core/src/components/Switch/examples/Switch.md +++ b/packages/react-core/src/components/Switch/examples/Switch.md @@ -176,8 +176,7 @@ import { Switch } from '@patternfly/react-core'; aria-label="Message when on" label="Message when on" labelOff="Message when off" - isChecked={null} - defaultChecked + isChecked />

- +
- + ; ``` diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index dd6e6097736..cc6ff7583fc 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -3017,14 +3017,14 @@ class EmptyStateDemo extends React.Component { return ( - - + +
- - + + ); } From 326bd9ba12862de595b5aed91ca00bdf264dcdfb Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Tue, 24 May 2022 14:16:11 -0400 Subject: [PATCH 6/7] use h2 --- packages/react-table/src/demos/Table.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index cc6ff7583fc..0b51bf35e54 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -2996,7 +2996,7 @@ class EmptyStateDemo extends React.Component { - + <Title headingLevel="h2" size="lg"> No results found From bc61900395ef3e887db65ffac7d030522e8eb705 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 25 May 2022 16:08:01 -0400 Subject: [PATCH 7/7] remove bullseye --- packages/react-table/src/demos/Table.md | 29 ++++++++++--------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index 35f3cb6616c..5ea15866b44 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -2987,7 +2987,6 @@ These examples demonstrate the use of an [Empty State component](/components/emp ```js isFullscreen import React from 'react'; import { - Bullseye, Button, Card, EmptyState, @@ -3018,22 +3017,18 @@ class EmptyStateDemo extends React.Component { { props: { colSpan: 8 }, title: ( - - - - - No results found - - - No results match this filter criteria. Clear all filters and try again. - - - - - - + + + + No results found + + No results match this filter criteria. Clear all filters and try again. + + + + ) } ]