-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(DrawerContent): removed no-background colorVariant
- Loading branch information
1 parent
3d41fef
commit 42f8a5b
Showing
7 changed files
with
316 additions
and
17 deletions.
There are no files selected for viewing
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
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
19 changes: 19 additions & 0 deletions
19
...laceNoBackgroundColorVariant/drawerContent-replace-noBackground-colorVariant.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,19 @@ | ||
### drawerContent-replace-noBackground-colorVariant [(#10211)](https://github.com/patternfly/patternfly-react/pull/10211) | ||
|
||
The "no-background" value of the `colorVariant` prop on DrawerContent has been removed, and a new "primary" value has been added. | ||
|
||
Additionally, a new DrawerContentColorVariant enum has been added and should be used instead of the DrawerColorVariant enum. The fix when the DrawerColorVariant enum is being used will replace the `colorVariant` prop value with a string. | ||
|
||
#### Examples | ||
|
||
In: | ||
|
||
```jsx | ||
%inputExample% | ||
``` | ||
|
||
Out: | ||
|
||
```jsx | ||
%outputExample% | ||
``` |
87 changes: 87 additions & 0 deletions
87
...ntReplaceNoBackgroundColorVariant/drawerContent-replace-noBackground-colorVariant.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,87 @@ | ||
const ruleTester = require("../../ruletester"); | ||
import * as rule from "./drawerContent-replace-noBackground-colorVariant"; | ||
|
||
ruleTester.run("drawerContent-replace-noBackground-colorVariant", rule, { | ||
valid: [ | ||
{ | ||
code: `<DrawerContent colorVariant="no-background" />`, | ||
}, | ||
{ | ||
code: `<DrawerContent colorVariant={DrawerColorVariant.primary} />`, | ||
}, | ||
{ | ||
code: `import { DrawerContent } from '@patternfly/react-core'; <DrawerContent colorVariant="primary" />`, | ||
}, | ||
{ | ||
code: `import { DrawerContent, DrawerContentColorVariant } from '@patternfly/react-core'; <DrawerContent colorVariant={DrawerContentColorVariant.primary} />`, | ||
}, | ||
{ | ||
code: `import { DrawerContent } from '@patternfly/react-core'; <DrawerContent colorVariant={DrawerColorVariant.primary} />`, | ||
}, | ||
{ | ||
code: `import { DrawerContent } from '@patternfly/react-core'; <DrawerContent someOtherProp />`, | ||
}, | ||
], | ||
invalid: [ | ||
{ | ||
code: `import { DrawerContent } from '@patternfly/react-core'; <DrawerContent colorVariant="no-background" />`, | ||
output: `import { DrawerContent } from '@patternfly/react-core'; <DrawerContent />`, | ||
errors: [ | ||
{ | ||
message: `The "no-background" value of the \`colorVariant\` prop on DrawerContent has been removed.`, | ||
type: "JSXOpeningElement", | ||
}, | ||
], | ||
}, | ||
{ | ||
code: `import { DrawerContent } from '@patternfly/react-core'; const color = "no-background"; <DrawerContent colorVariant={color} />`, | ||
output: `import { DrawerContent } from '@patternfly/react-core'; const color = "no-background"; <DrawerContent />`, | ||
errors: [ | ||
{ | ||
message: `The "no-background" value of the \`colorVariant\` prop on DrawerContent has been removed.`, | ||
type: "JSXOpeningElement", | ||
}, | ||
], | ||
}, | ||
{ | ||
code: `import { DrawerContent, DrawerColorVariant } from '@patternfly/react-core'; <DrawerContent colorVariant={DrawerColorVariant.default} />`, | ||
output: `import { DrawerContent, DrawerColorVariant } from '@patternfly/react-core'; <DrawerContent colorVariant="default" />`, | ||
errors: [ | ||
{ | ||
message: `The DrawerContentColorVariant enum should be used instead of the DrawerColorVariant enum when passed to the DrawerContent component. This fix will replace the colorVariant prop value with a string.`, | ||
type: "JSXOpeningElement", | ||
}, | ||
], | ||
}, | ||
{ | ||
code: `import { DrawerContent, DrawerColorVariant } from '@patternfly/react-core'; <DrawerContent colorVariant={DrawerColorVariant.noBackground} />`, | ||
output: `import { DrawerContent, DrawerColorVariant } from '@patternfly/react-core'; <DrawerContent />`, | ||
errors: [ | ||
{ | ||
message: `The "no-background" value of the \`colorVariant\` prop on DrawerContent has been removed.`, | ||
type: "JSXOpeningElement", | ||
}, | ||
], | ||
}, | ||
{ | ||
code: `import { DrawerContent, DrawerColorVariant } from '@patternfly/react-core'; const color = DrawerColorVariant.default; <DrawerContent colorVariant={DrawerColorVariant.default} />`, | ||
output: `import { DrawerContent, DrawerColorVariant } from '@patternfly/react-core'; const color = DrawerColorVariant.default; <DrawerContent colorVariant="default" />`, | ||
errors: [ | ||
{ | ||
message: `The DrawerContentColorVariant enum should be used instead of the DrawerColorVariant enum when passed to the DrawerContent component. This fix will replace the colorVariant prop value with a string.`, | ||
type: "JSXOpeningElement", | ||
}, | ||
], | ||
}, | ||
{ | ||
code: `import { DrawerContent, DrawerColorVariant } from '@patternfly/react-core'; const color = DrawerColorVariant.noBackground; <DrawerContent colorVariant={color} />`, | ||
output: `import { DrawerContent, DrawerColorVariant } from '@patternfly/react-core'; const color = DrawerColorVariant.noBackground; <DrawerContent />`, | ||
errors: [ | ||
{ | ||
message: `The "no-background" value of the \`colorVariant\` prop on DrawerContent has been removed.`, | ||
type: "JSXOpeningElement", | ||
}, | ||
], | ||
}, | ||
], | ||
}); |
94 changes: 94 additions & 0 deletions
94
...ContentReplaceNoBackgroundColorVariant/drawerContent-replace-noBackground-colorVariant.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,94 @@ | ||
import { Rule } from "eslint"; | ||
import { JSXOpeningElement, MemberExpression } from "estree-jsx"; | ||
import { getFromPackage, getAttribute, getAttributeValue } from "../../helpers"; | ||
|
||
// https://github.com/patternfly/patternfly-react/pull/10211 | ||
module.exports = { | ||
meta: { fixable: "code" }, | ||
create: function (context: Rule.RuleContext) { | ||
const { imports } = getFromPackage(context, "@patternfly/react-core"); | ||
|
||
const drawerContentImport = imports.find( | ||
(specifier) => specifier.imported.name === "DrawerContent" | ||
); | ||
const drawerColorVariantEnumImport = imports.find( | ||
(specifier) => specifier.imported.name === "DrawerColorVariant" | ||
); | ||
const validDrawerContentValues = ["default", "primary", "secondary"]; | ||
|
||
return !drawerContentImport | ||
? {} | ||
: { | ||
JSXOpeningElement(node: JSXOpeningElement) { | ||
if ( | ||
!( | ||
node.name.type === "JSXIdentifier" && | ||
drawerContentImport.local.name === node.name.name | ||
) | ||
) { | ||
return; | ||
} | ||
const colorVariantProp = getAttribute(node, "colorVariant"); | ||
|
||
if (!colorVariantProp) { | ||
return; | ||
} | ||
|
||
const colorVariantValue = getAttributeValue( | ||
context, | ||
colorVariantProp.value | ||
); | ||
const drawerColorVariantLocalName = | ||
drawerColorVariantEnumImport && | ||
drawerColorVariantEnumImport.local.name; | ||
const hasPatternFlyEnum = | ||
colorVariantValue.object && | ||
colorVariantValue.object.name === drawerColorVariantLocalName; | ||
const hasNoBackgroundValue = colorVariantValue.property | ||
? hasPatternFlyEnum && | ||
colorVariantValue.property.name === "noBackground" | ||
: colorVariantValue === "no-background"; | ||
|
||
if (!hasPatternFlyEnum && !hasNoBackgroundValue) { | ||
return; | ||
} | ||
|
||
const message = hasNoBackgroundValue | ||
? 'The "no-background" value of the `colorVariant` prop on DrawerContent has been removed.' | ||
: "The DrawerContentColorVariant enum should be used instead of the DrawerColorVariant enum when passed to the DrawerContent component. This fix will replace the colorVariant prop value with a string."; | ||
context.report({ | ||
node, | ||
message, | ||
fix(fixer) { | ||
const fixes = []; | ||
if (hasNoBackgroundValue) { | ||
fixes.push(fixer.replaceText(colorVariantProp, "")); | ||
} | ||
|
||
if (!hasNoBackgroundValue && hasPatternFlyEnum) { | ||
const enumPropertyName = colorVariantValue.property.name; | ||
fixes.push( | ||
fixer.replaceText( | ||
colorVariantProp, | ||
validDrawerContentValues.includes(enumPropertyName) | ||
? `colorVariant="${colorVariantValue.property.name}"` | ||
: "" | ||
) | ||
); | ||
} | ||
|
||
if (!hasNoBackgroundValue && !hasPatternFlyEnum) { | ||
fixes.push( | ||
fixer.replaceText( | ||
colorVariantProp, | ||
`colorVariant="${colorVariantValue}"` | ||
) | ||
); | ||
} | ||
return fixes; | ||
}, | ||
}); | ||
}, | ||
}; | ||
}, | ||
}; |
15 changes: 15 additions & 0 deletions
15
...tentReplaceNoBackgroundColorVariant/drawerContentReplaceNoBackgroundColorVariantInput.tsx
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,15 @@ | ||
import { DrawerContent, DrawerColorVariant } from "@patternfly/react-core"; | ||
|
||
export const DrawerContentReplaceNoBackgroundColorVariantInput = () => { | ||
const stringColor = "no-background"; | ||
const enumColor = DrawerColorVariant.default; | ||
|
||
return ( | ||
<> | ||
<DrawerContent colorVariant='no-background' /> | ||
<DrawerContent colorVariant={DrawerColorVariant.default} /> | ||
<DrawerContent colorVariant={stringColor} /> | ||
<DrawerContent colorVariant={enumColor} /> | ||
</> | ||
); | ||
}; |
15 changes: 15 additions & 0 deletions
15
...entReplaceNoBackgroundColorVariant/drawerContentReplaceNoBackgroundColorVariantOutput.tsx
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,15 @@ | ||
import { DrawerContent, DrawerColorVariant } from "@patternfly/react-core"; | ||
|
||
export const DrawerContentReplaceNoBackgroundColorVariantInput = () => { | ||
const stringColor = "no-background"; | ||
const enumColor = DrawerColorVariant.default; | ||
|
||
return ( | ||
<> | ||
<DrawerContent /> | ||
<DrawerContent colorVariant="default" /> | ||
<DrawerContent /> | ||
<DrawerContent colorVariant="default" /> | ||
</> | ||
); | ||
}; |