From 8d513576142cbdd012716ddab8b8a2b66c7beb04 Mon Sep 17 00:00:00 2001 From: gitdallas Date: Fri, 27 Jan 2023 13:51:23 -0600 Subject: [PATCH 1/5] feat(Spinner): remove legacy variant and svg prop --- .../react-core/src/components/Icon/Icon.tsx | 6 +----- .../Icon/examples/IconCustomProgress.tsx | 2 +- .../src/components/Spinner/Spinner.tsx | 17 +++------------ .../Spinner/__tests__/Spinner.test.tsx | 8 +------ .../__snapshots__/Spinner.test.tsx.snap | 21 ------------------- .../Spinner/examples/SpinnerBasic.tsx | 2 +- .../Spinner/examples/SpinnerCustomSize.tsx | 2 +- .../Spinner/examples/SpinnerInline.tsx | 10 ++++----- .../examples/SpinnerSizeVariations.tsx | 8 +++---- 9 files changed, 17 insertions(+), 59 deletions(-) diff --git a/packages/react-core/src/components/Icon/Icon.tsx b/packages/react-core/src/components/Icon/Icon.tsx index 005b9eae16c..e8350d37502 100644 --- a/packages/react-core/src/components/Icon/Icon.tsx +++ b/packages/react-core/src/components/Icon/Icon.tsx @@ -39,11 +39,7 @@ export const Icon: React.FunctionComponent = ({ defaultProgressArialabel = 'Loading...', ...props }: IconComponentProps) => { - const _progressIcon = progressIcon ? ( - progressIcon - ) : ( - - ); + const _progressIcon = progressIcon ? progressIcon : ; return ( { name="toggle-icon-progress-custom" /> - }> + }> diff --git a/packages/react-core/src/components/Spinner/Spinner.tsx b/packages/react-core/src/components/Spinner/Spinner.tsx index ba0ae7ae5da..753eee002f5 100644 --- a/packages/react-core/src/components/Spinner/Spinner.tsx +++ b/packages/react-core/src/components/Spinner/Spinner.tsx @@ -16,8 +16,6 @@ export interface SpinnerProps extends Omit, 'si size?: 'sm' | 'md' | 'lg' | 'xl'; /** Text describing that current loading status or progress */ 'aria-valuetext'?: string; - /** Whether to use an SVG (new) rather than a span (old) */ - isSVG?: boolean; /** Diameter of spinner set as CSS variable */ diameter?: string; /** @beta Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */ @@ -33,36 +31,27 @@ export const Spinner: React.FunctionComponent = ({ className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', - isSVG = true, diameter, isInline = false, 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy, ...props }: SpinnerProps) => { - const Component = isSVG ? 'svg' : ('span' as any); + const Component = 'svg' as any; return ( - {isSVG ? ( - - ) : ( - - - - - - )} + ); }; diff --git a/packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx b/packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx index 81b8eb78cf9..a757090bc47 100644 --- a/packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx +++ b/packages/react-core/src/components/Spinner/__tests__/Spinner.test.tsx @@ -25,10 +25,4 @@ test('large spinner', () => { test('extra large spinner', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); -}); - -test('non-SVG spinner', () => { - const { asFragment } = render() - - expect(asFragment()).toMatchSnapshot(); -}) +}); \ No newline at end of file diff --git a/packages/react-core/src/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap b/packages/react-core/src/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap index 66ca1910fda..41a6de67eff 100644 --- a/packages/react-core/src/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap +++ b/packages/react-core/src/components/Spinner/__tests__/__snapshots__/Spinner.test.tsx.snap @@ -60,27 +60,6 @@ exports[`medium spinner 1`] = ` `; -exports[`non-SVG spinner 1`] = ` - - -`; - exports[`simple spinner 1`] = ` ; +export const SpinnerBasic: React.FunctionComponent = () => ; diff --git a/packages/react-core/src/components/Spinner/examples/SpinnerCustomSize.tsx b/packages/react-core/src/components/Spinner/examples/SpinnerCustomSize.tsx index 89d9dfdcdef..5ff0ee9cdfd 100644 --- a/packages/react-core/src/components/Spinner/examples/SpinnerCustomSize.tsx +++ b/packages/react-core/src/components/Spinner/examples/SpinnerCustomSize.tsx @@ -2,5 +2,5 @@ import React from 'react'; import { Spinner } from '@patternfly/react-core'; export const SpinnerCustomSize: React.FunctionComponent = () => ( - + ); diff --git a/packages/react-core/src/components/Spinner/examples/SpinnerInline.tsx b/packages/react-core/src/components/Spinner/examples/SpinnerInline.tsx index 9e4a2390821..47f8aa4c8e9 100644 --- a/packages/react-core/src/components/Spinner/examples/SpinnerInline.tsx +++ b/packages/react-core/src/components/Spinner/examples/SpinnerInline.tsx @@ -6,23 +6,23 @@ export const SpinnerInline: React.FunctionComponent = () => ( Heading - + Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus. Second level - + Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '} - sit amet commodo arcu rutrum id. Proin pretium - urna vel cursus venenatis. Suspendisse potenti. + sit amet commodo arcu rutrum id. Proin pretium urna vel + cursus venenatis. Suspendisse potenti. Sometimes you need small text - + diff --git a/packages/react-core/src/components/Spinner/examples/SpinnerSizeVariations.tsx b/packages/react-core/src/components/Spinner/examples/SpinnerSizeVariations.tsx index e89608b3282..2023139f46f 100644 --- a/packages/react-core/src/components/Spinner/examples/SpinnerSizeVariations.tsx +++ b/packages/react-core/src/components/Spinner/examples/SpinnerSizeVariations.tsx @@ -3,9 +3,9 @@ import { Spinner } from '@patternfly/react-core'; export const SpinnerSizeVariations: React.FunctionComponent = () => ( - - - - + + + + ); From fb6ef2964736a3b8be446fc5785ea8d36bdc1dac Mon Sep 17 00:00:00 2001 From: Dallas Date: Fri, 27 Jan 2023 15:37:09 -0600 Subject: [PATCH 2/5] nullish coalescing Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com> --- packages/react-core/src/components/Icon/Icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Icon/Icon.tsx b/packages/react-core/src/components/Icon/Icon.tsx index e8350d37502..019e23a07af 100644 --- a/packages/react-core/src/components/Icon/Icon.tsx +++ b/packages/react-core/src/components/Icon/Icon.tsx @@ -39,7 +39,7 @@ export const Icon: React.FunctionComponent = ({ defaultProgressArialabel = 'Loading...', ...props }: IconComponentProps) => { - const _progressIcon = progressIcon ? progressIcon : ; + const _progressIcon = progressIcon ?? ; return ( Date: Fri, 27 Jan 2023 15:59:26 -0600 Subject: [PATCH 3/5] remove unecessary object for attribute --- packages/react-core/src/components/Spinner/Spinner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Spinner/Spinner.tsx b/packages/react-core/src/components/Spinner/Spinner.tsx index 753eee002f5..f4386703cbc 100644 --- a/packages/react-core/src/components/Spinner/Spinner.tsx +++ b/packages/react-core/src/components/Spinner/Spinner.tsx @@ -44,7 +44,7 @@ export const Spinner: React.FunctionComponent = ({ className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)} role="progressbar" aria-valuetext={ariaValueText} - {...{ viewBox: '0 0 100 100' }} + viewBox="0 0 100 100" {...(diameter && { style: { '--pf-c-spinner--diameter': diameter } })} {...(ariaLabel && { 'aria-label': ariaLabel })} {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })} From 41aaea0a5c850648abb197fea782d323bcafa0be Mon Sep 17 00:00:00 2001 From: gitdallas Date: Fri, 27 Jan 2023 16:57:27 -0600 Subject: [PATCH 4/5] proper type for spinner svg props --- packages/react-core/src/components/Spinner/Spinner.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Spinner/Spinner.tsx b/packages/react-core/src/components/Spinner/Spinner.tsx index f4386703cbc..ed380ec243b 100644 --- a/packages/react-core/src/components/Spinner/Spinner.tsx +++ b/packages/react-core/src/components/Spinner/Spinner.tsx @@ -9,7 +9,7 @@ export enum spinnerSize { xl = 'xl' } -export interface SpinnerProps extends Omit, 'size'> { +export interface SpinnerProps extends React.SVGProps { /** Additional classes added to the Spinner. */ className?: string; /** Size variant of progress. */ @@ -37,7 +37,7 @@ export const Spinner: React.FunctionComponent = ({ 'aria-labelledBy': ariaLabelledBy, ...props }: SpinnerProps) => { - const Component = 'svg' as any; + const Component = 'svg'; return ( = ({ role="progressbar" aria-valuetext={ariaValueText} viewBox="0 0 100 100" - {...(diameter && { style: { '--pf-c-spinner--diameter': diameter } })} + {...(diameter && { style: { ['--pf-c-spinner--diameter' as any]: diameter } })} {...(ariaLabel && { 'aria-label': ariaLabel })} {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })} {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })} From 7a2e58c851aaccd80354149bcc4ea0cc488e163a Mon Sep 17 00:00:00 2001 From: gitdallas Date: Tue, 7 Feb 2023 13:16:34 -0600 Subject: [PATCH 5/5] use raw svg for component, cast prop as cssproperties --- .../src/components/Spinner/Spinner.tsx | 34 ++++++++----------- 1 file changed, 15 insertions(+), 19 deletions(-) diff --git a/packages/react-core/src/components/Spinner/Spinner.tsx b/packages/react-core/src/components/Spinner/Spinner.tsx index ed380ec243b..5958db8467f 100644 --- a/packages/react-core/src/components/Spinner/Spinner.tsx +++ b/packages/react-core/src/components/Spinner/Spinner.tsx @@ -36,23 +36,19 @@ export const Spinner: React.FunctionComponent = ({ 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy, ...props -}: SpinnerProps) => { - const Component = 'svg'; - - return ( - - - - ); -}; +}: SpinnerProps) => ( + + + +); Spinner.displayName = 'Spinner';