From e88f691bffde5d37ea12d99dd6d1ba2a045d4c35 Mon Sep 17 00:00:00 2001 From: Evan Date: Thu, 23 May 2024 17:34:36 -0400 Subject: [PATCH 1/4] feat(badge): add disabled badge variant --- .../react-core/src/components/Badge/Badge.tsx | 10 +++++++++- .../components/Badge/__tests__/Badge.test.tsx | 5 +++++ .../src/components/Badge/examples/Badge.md | 5 +++++ .../Badge/examples/BadgeDisabled.tsx | 19 +++++++++++++++++++ 4 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 packages/react-core/src/components/Badge/examples/BadgeDisabled.tsx diff --git a/packages/react-core/src/components/Badge/Badge.tsx b/packages/react-core/src/components/Badge/Badge.tsx index 7b54629a64a..dd341b6e693 100644 --- a/packages/react-core/src/components/Badge/Badge.tsx +++ b/packages/react-core/src/components/Badge/Badge.tsx @@ -7,6 +7,8 @@ export interface BadgeProps extends React.HTMLProps { screenReaderText?: string; /** Adds styling to the badge to indicate it has been read */ isRead?: boolean; + /** Adds styling to the badge to indicate it is disabled */ + isDisabled?: boolean; /** content rendered inside the Badge */ children?: React.ReactNode; /** additional classes added to the Badge */ @@ -15,6 +17,7 @@ export interface BadgeProps extends React.HTMLProps { export const Badge: React.FunctionComponent = ({ isRead = false, + isDisabled = false, className = '', children = '', screenReaderText, @@ -22,7 +25,12 @@ export const Badge: React.FunctionComponent = ({ }: BadgeProps) => ( {children} {screenReaderText && {screenReaderText}} diff --git a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx index c8e41f64285..eda05188aa5 100644 --- a/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx +++ b/packages/react-core/src/components/Badge/__tests__/Badge.test.tsx @@ -32,6 +32,11 @@ test('Renders with class name pf-m-read when isRead prop is true', () => { expect(screen.getByText('Test')).toHaveClass('pf-m-read'); }); +test(`Renders with class name ${styles.modifiers.disabled} when isDisabled prop is true`, () => { + render(Test); + expect(screen.getByText('Test')).toHaveClass(styles.modifiers.disabled); +}); + test('Does not render pf-v6-screen-reader class by default', () => { render(Test); expect(screen.getByText('Test')).not.toContainHTML(''); diff --git a/packages/react-core/src/components/Badge/examples/Badge.md b/packages/react-core/src/components/Badge/examples/Badge.md index 86903cb8997..d397ab02e4c 100644 --- a/packages/react-core/src/components/Badge/examples/Badge.md +++ b/packages/react-core/src/components/Badge/examples/Badge.md @@ -18,3 +18,8 @@ import './Badge.css'; ```ts file="./BadgeUnread.tsx" ``` + +## Disabled + +```ts file="./BadgeDisabled.tsx" +``` diff --git a/packages/react-core/src/components/Badge/examples/BadgeDisabled.tsx b/packages/react-core/src/components/Badge/examples/BadgeDisabled.tsx new file mode 100644 index 00000000000..c7d4bdad2f9 --- /dev/null +++ b/packages/react-core/src/components/Badge/examples/BadgeDisabled.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Badge } from '@patternfly/react-core'; + +export const BadgeRead: React.FunctionComponent = () => ( + + + 7 + + + 24 + + + 240 + + + 999+ + + +); From 33c260256795ca07d3611fc9e60e0613e49fc67a Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 3 Jun 2024 09:44:59 -0400 Subject: [PATCH 2/4] rebase && core version bump --- packages/react-core/package.json | 2 +- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- yarn.lock | 14 +++++++------- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 10201dcc2e0..2b121dd3348 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -55,7 +55,7 @@ "tslib": "^2.6.2" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.139", + "@patternfly/patternfly": "6.0.0-alpha.147", "case-anything": "^2.1.13", "css": "^2.2.3", "fs-extra": "^11.1.1", diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 96bd0841cc8..3388df3a21e 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -23,7 +23,7 @@ "test:a11y": "patternfly-a11y --config patternfly-a11y.config" }, "dependencies": { - "@patternfly/patternfly": "6.0.0-alpha.139", + "@patternfly/patternfly": "6.0.0-alpha.147", "@patternfly/react-charts": "^8.0.0-alpha.23", "@patternfly/react-code-editor": "^6.0.0-alpha.61", "@patternfly/react-core": "^6.0.0-alpha.61", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 0674f2f6907..80e7b1e7182 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -33,7 +33,7 @@ "@fortawesome/free-brands-svg-icons": "^5.14.0", "@fortawesome/free-regular-svg-icons": "^5.14.0", "@fortawesome/free-solid-svg-icons": "^5.14.0", - "@patternfly/patternfly": "6.0.0-alpha.139", + "@patternfly/patternfly": "6.0.0-alpha.147", "fs-extra": "^11.1.1", "glob": "^7.1.2", "tslib": "^2.6.2" diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index e9b858ad9ea..ff0f581efae 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -19,7 +19,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.139", + "@patternfly/patternfly": "6.0.0-alpha.147", "camel-case": "^3.0.0", "css": "^2.2.3", "fs-extra": "^11.1.1", diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index f719a47e9ae..9e37f2e8d40 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.139", + "@patternfly/patternfly": "6.0.0-alpha.147", "css": "^2.2.3", "fs-extra": "^11.1.1", "glob": "^7.1.2" diff --git a/yarn.lock b/yarn.lock index d71320e37b0..0effdb3b839 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2184,10 +2184,10 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@6.0.0-alpha.139": - version "6.0.0-alpha.139" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.139.tgz#417d6d3cf5e923a9cff28c99ecd8a3489fa935ff" - integrity sha512-RfM0pvIhWwaSzobKh/mjkTqYMnAdeOqC1wH9zg9zTab9GyUQdeGkRkd9gpDEQhuuN/bhNpO03W6jpaqauxfpmA== +"@patternfly/patternfly@6.0.0-alpha.147": + version "6.0.0-alpha.147" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.147.tgz#73c60a4f9f8745ff463f129894a428bce95c78af" + integrity sha512-HklQOknjBJib4SMlhl18lEG5Wtx48ZvAyw7dIrZkxrFeJufQXCacOcF3syMARu6MU+UJ0FKmYGOVhaguDN1GuQ== "@pkgjs/parseargs@^0.11.0": version "0.11.0" @@ -9981,7 +9981,7 @@ is-date-object@^1.0.1, is-date-object@^1.0.5: dependencies: has-tostringtag "^1.0.0" -is-decimal@^1.0.0: +is-decimal@^1.0.0, is-decimal@^1.0.2: version "1.0.4" resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5" integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw== @@ -16666,7 +16666,7 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -16752,7 +16752,7 @@ string_decoder@~1.1.1: dependencies: safe-buffer "~5.1.0" -stringify-entities@^3.0.0, stringify-entities@^3.0.1: +stringify-entities@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.1.0.tgz#b8d3feac256d9ffcc9fa1fefdcf3ca70576ee903" integrity sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg== From ce3157d1986b5b09a4b3b80bc13c1ce6559e2db0 Mon Sep 17 00:00:00 2001 From: Evan Date: Mon, 3 Jun 2024 15:41:53 -0400 Subject: [PATCH 3/4] feat(badge): update docs header, add Button changes --- packages/react-core/src/components/Badge/examples/Badge.md | 2 +- packages/react-core/src/components/Button/Button.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Badge/examples/Badge.md b/packages/react-core/src/components/Badge/examples/Badge.md index d397ab02e4c..4004819d407 100644 --- a/packages/react-core/src/components/Badge/examples/Badge.md +++ b/packages/react-core/src/components/Badge/examples/Badge.md @@ -19,7 +19,7 @@ import './Badge.css'; ```ts file="./BadgeUnread.tsx" ``` -## Disabled +### Disabled ```ts file="./BadgeDisabled.tsx" ``` diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 16f4f4559d4..d1897e4b852 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -208,7 +208,9 @@ const ButtonBase: React.FunctionComponent = ({ )} {countOptions && ( - {countOptions.count} + + {countOptions.count} + )} From 4c481246471391775e2e9e1f44c75cbe46b62d15 Mon Sep 17 00:00:00 2001 From: Evan Date: Wed, 5 Jun 2024 14:49:00 -0400 Subject: [PATCH 4/4] feat(badge): PR feedback --- packages/react-core/src/components/Badge/Badge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Badge/Badge.tsx b/packages/react-core/src/components/Badge/Badge.tsx index dd341b6e693..11ed2e84c57 100644 --- a/packages/react-core/src/components/Badge/Badge.tsx +++ b/packages/react-core/src/components/Badge/Badge.tsx @@ -28,7 +28,7 @@ export const Badge: React.FunctionComponent = ({ className={css( styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, - (isDisabled ? styles.modifiers.disabled : '') as any, + isDisabled && styles.modifiers.disabled, className )} >