Skip to content

Commit 6f42868

Browse files
fhlavacfhlavac
authored
Merge pull request #53 from fhlavac/css
Update classNames to match contribution guidelines
2 parents 078e3d9 + 11c0b34 commit 6f42868

9 files changed

Lines changed: 89 additions & 120 deletions

File tree

‎package-lock.json‎

Lines changed: 10 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/module/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
"@types/react": "^18.0.0",
4949
"@types/react-dom": "^18.0.0",
5050
"@types/react-router-dom": "^5.3.3",
51-
"classnames": "^2.2.5",
51+
"clsx": "^2.0.0",
5252
"copyfiles": "^2.4.1",
5353
"react": "^18.0.0",
5454
"react-dom": "^18.0.0",

‎packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import React from 'react';
22
import { TooltipPosition } from '@patternfly/react-core';
33
import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
44

5-
export const LongTextTooltipExample: React.FunctionComponent = () => (
5+
export const BasicExample: React.FunctionComponent = () => (
66
<LongTextTooltip
77
content="This is a very long tooltip that will be truncated to fit the screen. It will also have a max width of 400px."
88
maxLength={40}
99
tooltipPosition={TooltipPosition.bottom}/>
10-
)
10+
);

‎packages/module/src/Ansible/Ansible.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import classNames from 'classnames';
2+
import clsx from 'clsx';
33
import { createUseStyles } from 'react-jss';
44

55
export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -17,12 +17,12 @@ const useStyles = createUseStyles({
1717
top: '0.25rem'
1818
}
1919
},
20-
supported: {
20+
ansibleSupported: {
2121
'& .st0': {
2222
fill: 'var(--pf-v5-global--info-color--100)',
2323
}
2424
},
25-
unsupported: {
25+
ansibleUnsupported: {
2626
'& .st0, .st1, .st2': {
2727
fill: 'var(--pf-v5-global--disabled-color--200)',
2828
cursor: 'not-allowed',
@@ -32,10 +32,10 @@ const useStyles = createUseStyles({
3232

3333
const Ansible: React.FunctionComponent<AnsibleProps> = ({ unsupported, className, ...props }: AnsibleProps) => {
3434
const classes = useStyles();
35-
const ansibleLogoClass = classNames(
35+
const ansibleLogoClass = clsx(
3636
classes.ansible,
37-
{ [classes.supported]: !unsupported || unsupported === 0 },
38-
{ [classes.unsupported]: unsupported || unsupported === 1 },
37+
{ [classes.ansibleSupported]: !unsupported || unsupported === 0 },
38+
{ [classes.ansibleUnsupported]: unsupported || unsupported === 1 },
3939
className
4040
);
4141

‎packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`Ansible component should render supported - boolean 1`] = `
44
<div>
55
<i
6-
class="ansible-0-2-1 supported-0-2-2"
6+
class="ansible-0-2-1 ansibleSupported-0-2-2"
77
>
88
<svg
99
style="enable-background: new 0 0 2032 2027.2;"
@@ -27,7 +27,7 @@ exports[`Ansible component should render supported - boolean 1`] = `
2727
exports[`Ansible component should render supported - number 1`] = `
2828
<div>
2929
<i
30-
class="ansible-0-2-1 supported-0-2-2"
30+
class="ansible-0-2-1 ansibleSupported-0-2-2"
3131
>
3232
<svg
3333
style="enable-background: new 0 0 2032 2027.2;"
@@ -51,7 +51,7 @@ exports[`Ansible component should render supported - number 1`] = `
5151
exports[`Ansible component should render unsupported - boolean 1`] = `
5252
<div>
5353
<i
54-
class="ansible-0-2-1 unsupported-0-2-3"
54+
class="ansible-0-2-1 ansibleUnsupported-0-2-3"
5555
>
5656
<svg
5757
style="enable-background: new 0 0 2032 2027.2;"
@@ -99,7 +99,7 @@ exports[`Ansible component should render unsupported - boolean 1`] = `
9999
exports[`Ansible component should render unsupported - number 1`] = `
100100
<div>
101101
<i
102-
class="ansible-0-2-1 unsupported-0-2-3"
102+
class="ansible-0-2-1 ansibleUnsupported-0-2-3"
103103
>
104104
<svg
105105
style="enable-background: new 0 0 2032 2027.2;"

‎packages/module/src/Battery/Battery.tsx‎

Lines changed: 35 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react';
2-
import classNames from 'classnames';
1+
import React, { useMemo } from 'react';
2+
import clsx from 'clsx';
33
import { createUseStyles } from 'react-jss'
44

55
const batteryDefault = {
@@ -43,25 +43,37 @@ const useStyles = createUseStyles({
4343
}
4444
},
4545

46-
'battery-0': batteryDefault,
47-
'battery-null': batteryDefault,
48-
49-
'battery-1': batteryLow,
50-
'battery-low': batteryLow,
51-
'battery-info': batteryLow,
52-
53-
'battery-2': batteryMedium,
54-
'battery-medium': batteryMedium,
55-
'battery-warn': batteryMedium,
56-
57-
'battery-3': batteryHigh,
58-
'battery-high': batteryHigh,
59-
'battery-error': batteryHigh,
60-
61-
'battery-4': batteryCritical,
62-
'battery-critical': batteryCritical,
46+
batteryDefault,
47+
batteryLow,
48+
batteryMedium,
49+
batteryHigh,
50+
batteryCritical,
6351
});
6452

53+
const batteryLevels = (severity: BatterySeverity, classMode?: boolean) => {
54+
switch (severity) {
55+
case 'critical':
56+
case 4:
57+
return classMode ? 'batteryCritical' : <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
58+
case 'high':
59+
case 'error':
60+
case 3:
61+
return classMode ? 'batteryHigh' : <path d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
62+
case 'medium':
63+
case 'warn':
64+
case 2:
65+
return classMode ? 'batteryMedium' : <path d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
66+
case 'low':
67+
case 'info':
68+
case 1:
69+
return classMode ? 'batteryLow' : <path d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
70+
default:
71+
// eslint-disable-next-line
72+
console.error('Warning: Unsupported value presented to battery component');
73+
return classMode ? 'batteryDefault' : <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
74+
}
75+
};
76+
6577
export type BatterySeverity = 1 | 2 | 3 | 4 | 'info' | 'low' | 'warn' | 'medium' | 'error' | 'high' | 'critical';
6678

6779
export interface BatteryProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -77,36 +89,14 @@ export interface BatteryProps extends React.DetailedHTMLProps<React.HTMLAttribut
7789

7890
const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, labelHidden, className, ...props }: BatteryProps) => {
7991
const classes = useStyles();
80-
const batteryClasses = classNames(classes.battery, classes[`battery-${severity}`], className);
92+
const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className);
8193

8294
let ariaLabels = {};
8395
if (labelHidden) {
8496
ariaLabels = { ['aria-label']: `${severity} ${label}` };
8597
}
8698

87-
const batteryLevels = (severity: BatterySeverity) => {
88-
switch (severity) {
89-
case 'critical':
90-
case 4:
91-
return <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
92-
case 'high':
93-
case 'error':
94-
case 3:
95-
return <path d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
96-
case 'medium':
97-
case 'warn':
98-
case 2:
99-
return <path d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
100-
case 'low':
101-
case 'info':
102-
case 1:
103-
return <path d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
104-
default:
105-
// eslint-disable-next-line
106-
console.error('Warning: Unsupported value presented to battery component');
107-
return <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
108-
}
109-
};
99+
const batteryVariant = useMemo(() => batteryLevels(severity) , [ severity ])
110100

111101
return (
112102
<React.Fragment>
@@ -134,10 +124,10 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
134124
}}
135125
d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
136126
/>
137-
{batteryLevels(severity)}
127+
{batteryVariant}
138128
</svg>
139129
</i>
140-
{!labelHidden && <span className="label"> {label} </span>}
130+
{!labelHidden && <span> {label} </span>}
141131
</React.Fragment>
142132
);
143133
};

0 commit comments

Comments
 (0)