Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(EmptyState): Add rule to move EmptyStateHeader into EmptyState #582

Merged
merged 5 commits into from
Feb 28, 2024
Merged

feat(EmptyState): Add rule to move EmptyStateHeader into EmptyState #582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b51fa4b
feat(EmptyState): Add rule to move EmptyStateHeader into EmptyState
wise-king-sullyman Feb 20, 2024
016ba54
chore(EmptyState): Address PR feedback
wise-king-sullyman Feb 27, 2024
1658c79
chore(EmptyState): Update test verbiage to reflect changes to rule
wise-king-sullyman Feb 27, 2024
748b4ed
fix(EmptyState): Fix passing a string in braces for headerClassName
wise-king-sullyman Feb 28, 2024
d518994
fix(EmptyState): Support more headerClassName value types
wise-king-sullyman Feb 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .../v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.md
View file
Open in desktop
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 ...rules/v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.test.ts
View file
Open in desktop
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 />`,
thatblindgeye marked this conversation as resolved.
Show resolved Hide resolved
},
{
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",
},
],
},
],
});
Loading
Loading