-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(EmptyState): Add rule to move EmptyStateHeader into EmptyState (#…
…582) * feat(EmptyState): Add rule to move EmptyStateHeader into EmptyState * chore(EmptyState): Address PR feedback * chore(EmptyState): Update test verbiage to reflect changes to rule * fix(EmptyState): Fix passing a string in braces for headerClassName * fix(EmptyState): Support more headerClassName value types
- Loading branch information
1 parent
2fa045b
commit 23968dd
Showing
5 changed files
with
580 additions
and
0 deletions.
There are no files selected for viewing
20 changes: 20 additions & 0 deletions
20
.../v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| ### emptyStateHeader-move-into-emptyState [(#9947)](https://github.com/patternfly/patternfly-react/pull/9947) | ||
|
|
||
| EmptyStateHeader and EmptyStateIcon are now rendered internally within EmptyState and should only be customized using props. Content passed to the `icon` prop on EmptyState will also be wrapped by EmptyStateIcon automatically. | ||
|
|
||
| Additionally, the `titleText` prop is now required on EmptyState. | ||
|
|
||
| #### Examples | ||
|
|
||
| In: | ||
|
|
||
| ```jsx | ||
| %inputExample% | ||
| ``` | ||
|
|
||
| Out: | ||
|
|
||
| ```jsx | ||
| %outputExample% | ||
| ``` | ||
|
|
276 changes: 276 additions & 0 deletions
276
...rules/v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,276 @@ | ||
| const ruleTester = require("../../ruletester"); | ||
| import * as rule from "./emptyStateHeader-move-into-emptyState"; | ||
|
|
||
| ruleTester.run("emptyStateHeader-move-into-emptyState", rule, { | ||
| valid: [ | ||
| { | ||
| code: `<EmptyState titleText />`, | ||
| }, | ||
| { | ||
| code: `<EmptyState someProp />`, | ||
| }, | ||
| { | ||
| code: `<EmptyState><EmptyStateHeader titleText="Empty state" headingLevel="h4" icon={<EmptyStateIcon icon={CubesIcon} />} /></EmptyState>`, | ||
| }, | ||
| { | ||
| code: `import { EmptyState } from '@patternfly/react-core'; <EmptyState titleText="foo" icon={CubesIcon} />`, | ||
| }, | ||
| ], | ||
| invalid: [ | ||
| { | ||
| // with all EmptyStateHeader props | ||
| code: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| EmptyStateIcon, | ||
| CubesIcon | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader | ||
| className="custom-empty-state-class" | ||
| headingLevel="h4" | ||
| icon={<EmptyStateIcon icon={CubesIcon} />} | ||
| titleClassName="custom-empty-state-title-class" | ||
| titleText="Empty state" | ||
| /> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| output: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| EmptyStateIcon, | ||
| CubesIcon | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState headerClassName="custom-empty-state-class" headingLevel="h4" icon={CubesIcon} titleClassName="custom-empty-state-title-class" titleText="Empty state"> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| errors: [ | ||
| { | ||
| message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState.`, | ||
| type: "JSXElement", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| // without any optional EmptyStateHeader props | ||
| code: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader titleText="foo"/> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| output: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState titleText="foo"> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| errors: [ | ||
| { | ||
| message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState.`, | ||
| type: "JSXElement", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| // without any EmptyStateHeader props or children | ||
| code: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader /> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| output: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader /> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| errors: [ | ||
| { | ||
| message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState. You must manually supply a titleText prop to EmptyState, then you can rerun this codemod.`, | ||
| type: "JSXElement", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| // without any EmptyStateHeader props but with children | ||
| code: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader>Foo bar</EmptyStateHeader> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| output: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState titleText="Foo bar"> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| errors: [ | ||
| { | ||
| message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState.`, | ||
| type: "JSXElement", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| // without an EmptyStateHeader or titleText | ||
| code: `import { EmptyState } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| Foo bar | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| output: `import { EmptyState } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| Foo bar | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| errors: [ | ||
| { | ||
| message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState. You must manually supply a titleText prop to EmptyState.`, | ||
| type: "JSXElement", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| // with both titleText and children | ||
| code: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader titleText="Bar">Foo</EmptyStateHeader> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| output: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader titleText="Bar">Foo</EmptyStateHeader> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| errors: [ | ||
| { | ||
| message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState. Because the children for EmptyStateHeader are now inaccessible you must remove either the children or the titleText prop, then you can rerun this codemod.`, | ||
| type: "JSXElement", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| // with the color prop on the EmptyStateIcon | ||
| code: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| EmptyStateIcon, | ||
| CubesIcon | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader titleText="Foo bar" icon={<EmptyStateIcon icon={CubesIcon} color="red" />} /> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| output: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| EmptyStateIcon, | ||
| CubesIcon | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState icon={CubesIcon} titleText="Foo bar"> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| errors: [ | ||
| { | ||
| message: `The color prop on EmptyStateIcon has been removed. We suggest using the new status prop on EmptyState to apply colors to the icon.`, | ||
| type: "JSXElement", | ||
| }, | ||
| { | ||
| message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState.`, | ||
| type: "JSXElement", | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| // with a string expression for the heading className prop | ||
| code: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState> | ||
| <EmptyStateHeader titleText="foo" className={"class-name"} /> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| output: `import { | ||
| EmptyState, | ||
| EmptyStateHeader, | ||
| } from "@patternfly/react-core"; | ||
| export const EmptyStateHeaderMoveIntoEmptyStateInput = () => ( | ||
| <EmptyState headerClassName={"class-name"} titleText="foo"> | ||
| </EmptyState> | ||
| ); | ||
| `, | ||
| errors: [ | ||
| { | ||
| message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState.`, | ||
| type: "JSXElement", | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }); |
Oops, something went wrong.