From 14997d6f2b8cf194ac483d0d0f46b6d9f5feeeab Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 25 Jan 2024 15:19:33 -0500 Subject: [PATCH 1/3] feat(Tabs): consumed Penta updates --- packages/react-core/package.json | 2 +- .../src/components/Tabs/TabContent.tsx | 53 ++++++++-------- .../src/components/Tabs/TabTitleIcon.tsx | 2 +- .../react-core/src/components/Tabs/Tabs.tsx | 60 +++++++++---------- .../src/components/Tabs/TabsContext.ts | 2 +- .../src/components/Tabs/examples/Tabs.md | 22 ++++--- ...{TabsBoxLight.tsx => TabsBoxSecondary.tsx} | 18 +++--- ...TabsNavSecondary.tsx => TabsNavSubtab.tsx} | 4 +- .../components/Tabs/examples/TabsSubtabs.tsx | 42 ++++++------- 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 | 8 +-- 14 files changed, 110 insertions(+), 111 deletions(-) rename packages/react-core/src/components/Tabs/examples/{TabsBoxLight.tsx => TabsBoxSecondary.tsx} (77%) rename packages/react-core/src/components/Tabs/examples/{TabsNavSecondary.tsx => TabsNavSubtab.tsx} (96%) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index d116f697a0b..23329c9b0a0 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.5.0" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.66", + "@patternfly/patternfly": "6.0.0-alpha.69", "@rollup/plugin-commonjs": "^25.0.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-replace": "^5.0.2", diff --git a/packages/react-core/src/components/Tabs/TabContent.tsx b/packages/react-core/src/components/Tabs/TabContent.tsx index ababc391f22..7645af08255 100644 --- a/packages/react-core/src/components/Tabs/TabContent.tsx +++ b/packages/react-core/src/components/Tabs/TabContent.tsx @@ -27,10 +27,10 @@ export interface TabContentProps extends Omit, 'ref ouiaSafe?: boolean; } -// TODO: Update with issue #9909 -// const variantStyle = { -// default: '' -// }; +const variantStyle = { + default: '', + secondary: styles.modifiers.secondary +}; const TabContentBase: React.FunctionComponent = ({ id, @@ -56,27 +56,30 @@ const TabContentBase: React.FunctionComponent = ({ return ( - {({ variant }: TabsContextProps) => ( - - )} + {({ variant }: TabsContextProps) => { + const variantClass = variantStyle[variant]; + + return ( + + ); + }} ); } diff --git a/packages/react-core/src/components/Tabs/TabTitleIcon.tsx b/packages/react-core/src/components/Tabs/TabTitleIcon.tsx index a7fe89656f3..d9f5503b5ad 100644 --- a/packages/react-core/src/components/Tabs/TabTitleIcon.tsx +++ b/packages/react-core/src/components/Tabs/TabTitleIcon.tsx @@ -14,7 +14,7 @@ export const TabTitleIcon: React.FunctionComponent = ({ className = '', ...props }: TabTitleIconProps) => ( - + {children} ); diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 5858f8ee285..2ffc1018cc4 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Tabs/tabs'; -import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; import { css } from '@patternfly/react-styles'; import { PickOptional } from '../../helpers/typeUtils'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; @@ -38,7 +37,7 @@ export interface TabsProps extends Omit { activeKey: 0, onSelect: () => undefined as any, isFilled: false, - isSecondary: false, + isSubtab: false, isVertical: false, isBox: false, hasNoBorderBottom: false, @@ -247,7 +246,6 @@ class Tabs extends React.Component { if (container && !this.props.isVertical && !isOverflowHorizontal) { // get first element and check if it is in view const overflowOnLeft = !isElementInView(container, container.firstChild as HTMLElement, false); - // get last element and check if it is in view const overflowOnRight = !isElementInView(container, container.lastChild as HTMLElement, false); @@ -392,7 +390,7 @@ class Tabs extends React.Component { defaultActiveKey, id, isFilled, - isSecondary, + isSubtab, isVertical, isBox, hasNoBorderBottom, @@ -473,7 +471,7 @@ class Tabs extends React.Component { className={css( styles.tabs, isFilled && styles.modifiers.fill, - isSecondary && styles.modifiers.secondary, + isSubtab && styles.modifiers.subtab, isVertical && styles.modifiers.vertical, isVertical && expandable && formatBreakpointMods(expandable, styles), isVertical && expandable && isExpandedLocal && styles.modifiers.expanded, @@ -518,33 +516,35 @@ class Tabs extends React.Component { )} {renderScrollButtons && ( - +
+ +
)}
    {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren} {hasOverflowTab && }
{renderScrollButtons && ( - +
+ +
)} {onAdd !== undefined && ( diff --git a/packages/react-core/src/components/Tabs/TabsContext.ts b/packages/react-core/src/components/Tabs/TabsContext.ts index 5e0726da692..018af907620 100644 --- a/packages/react-core/src/components/Tabs/TabsContext.ts +++ b/packages/react-core/src/components/Tabs/TabsContext.ts @@ -1,7 +1,7 @@ import * as React from 'react'; export interface TabsContextProps { - variant: 'default' | 'light300'; + variant: 'default' | 'secondary'; mountOnEnter: boolean; unmountOnExit: boolean; localActiveKey: string | number; diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index cf519f60f5b..9bcc4d919da 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -36,15 +36,13 @@ Tabs can be styled as 'default' or 'boxed': ```ts file="./TabsDefault.tsx" ``` -### Boxed light tabs +### Boxed secondary tabs -To change the background color of boxed tabs, use the `variant` property. +To change the background color of boxed tabs or the tab content, use the `variant` property. -The following example passes `variant={isTabsLightScheme ? 'light300' : 'default'}` into the `` component to style the tabs with a lighter color. +Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example. -Toggle the tab color by selecting the 'Tabs light variation' checkbox in the following example. - -```ts file="./TabsBoxLight.tsx" +```ts file="./TabsBoxSecondary.tsx" ``` ### Vertical tabs @@ -132,11 +130,11 @@ To add an icon to a tab, pass a `` component that contains the ico ```ts file="./TabsIconAndText.tsx" ``` -### Secondary tabs +### Subtabs -Use secondary tabs as "sub tabs" or within other components, like modals. Secondary tabs have less visually prominent styling. +Use subtabs within other components, like modals. Subtabs have less visually prominent styling. -To apply secondary styling to tabs, use the `isSecondary` property. +To apply subtab styling to tabs, use the `isSubtab` property. ```ts file="./TabsSubtabs.tsx" ``` @@ -157,11 +155,11 @@ Nav tabs should use the `href` property to link the tab to the URL of another pa ```ts file="./TabsNav.tsx" ``` -### Secondary tabs linked to nav elements +### Subtabs linked to nav elements -Secondary tabs can also link to nav elements. +Subtabs can also link to nav elements. -```ts file="./TabsNavSecondary.tsx" +```ts file="./TabsNavSubtab.tsx" ``` ### With separate content diff --git a/packages/react-core/src/components/Tabs/examples/TabsBoxLight.tsx b/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx similarity index 77% rename from packages/react-core/src/components/Tabs/examples/TabsBoxLight.tsx rename to packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx index 3a205fc245f..7024a509d3b 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsBoxLight.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; -export const TabsBoxLight: React.FunctionComponent = () => { +export const TabsBoxSecondary: React.FunctionComponent = () => { const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isTabsLightScheme, setIsTabsLightScheme] = React.useState(true); + const [isTabsBoxSecondary, setIsTabsBoxSecondary] = React.useState(true); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, @@ -13,7 +13,7 @@ export const TabsBoxLight: React.FunctionComponent = () => { }; const toggleScheme = (checked: boolean) => { - setIsTabsLightScheme(checked); + setIsTabsBoxSecondary(checked); }; const tooltip = ( @@ -24,8 +24,7 @@ export const TabsBoxLight: React.FunctionComponent = () => { {
toggleScheme(checked)} - aria-label="show light scheme variation checkbox" - id="toggle-scheme" - name="toggle-scheme" + id="toggle-tabs-variant" + name="toggle-tabs-variant" />
diff --git a/packages/react-core/src/components/Tabs/examples/TabsNavSecondary.tsx b/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx similarity index 96% rename from packages/react-core/src/components/Tabs/examples/TabsNavSecondary.tsx rename to packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx index 7102c5aca73..c454a3b71dd 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsNavSecondary.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; -export const TabsNavSecondary: React.FunctionComponent = () => { +export const TabsNavSubtab: React.FunctionComponent = () => { const [activeTabKey1, setActiveTabKey1] = React.useState(0); const [activeTabKey2, setActiveTabKey2] = React.useState(0); @@ -31,7 +31,7 @@ export const TabsNavSecondary: React.FunctionComponent = () => { Users} href="#" aria-label="Subtabs with nav content users"> { setActiveTabKey1(tabIndex); }; - // Toggle currently active secondary tab + // Toggle currently active subtab const handleTabClickSecond = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, tabIndex: string | number @@ -37,35 +37,35 @@ export const TabsSubtabs: React.FunctionComponent = () => { > Users} aria-label="Tabs with subtabs content users"> - Secondary tab item 1}> - Secondary tab item 1 item section + Subtab item 1}> + Subtab item 1 item section - Secondary tab item 2}> - Secondary tab item 2 section + Subtab item 2}> + Subtab item 2 section - Secondary tab item 3}> - Secondary tab item 3 section + Subtab item 3}> + Subtab item 3 section - Secondary tab item 4}> - Secondary tab item 4 section + Subtab item 4}> + Subtab item 4 section - Secondary tab item 5}> - Secondary tab item 5 section + Subtab item 5}> + Subtab item 5 section - Secondary tab item 6}> - Secondary tab item 6 section + Subtab item 6}> + Subtab item 6 section - Secondary tab item 7}> - Secondary tab item 7 section + Subtab item 7}> + Subtab item 7 section - Secondary tab item 8}> - Secondary tab item 8 section + Subtab item 8}> + Subtab item 8 section @@ -106,8 +106,8 @@ export const TabsSubtabs: React.FunctionComponent = () => { isChecked={isBox} onChange={(_event, checked) => toggleBox(checked)} aria-label="show box variation checkbox with sub tabs" - id="toggle-box-secondary" - name="toggle-box-secondary" + id="toggle-box-subtab" + name="toggle-box-subtab" /> diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index fb2698be262..82a49e11fba 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.66", + "@patternfly/patternfly": "6.0.0-alpha.69", "@patternfly/react-charts": "^8.0.0-alpha.10", "@patternfly/react-code-editor": "^6.0.0-alpha.20", "@patternfly/react-core": "^6.0.0-alpha.20", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index a0b8bafc91f..00183fefdde 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.66", + "@patternfly/patternfly": "6.0.0-alpha.69", "fs-extra": "^11.1.1", "glob": "^7.1.2", "rimraf": "^2.6.2", diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 02730fb7e56..dd77f600b2f 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.66", + "@patternfly/patternfly": "6.0.0-alpha.69", "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 0a860afbe65..dad056c26e6 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.66", + "@patternfly/patternfly": "6.0.0-alpha.69", "css": "^2.2.3", "fs-extra": "^11.1.1", "glob": "^7.1.2", diff --git a/yarn.lock b/yarn.lock index 34f818bb8aa..b5f18fc0dbf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3988,10 +3988,10 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@6.0.0-alpha.66": - version "6.0.0-alpha.66" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.66.tgz#e06e003a128050eb9b27e1d37ec9ebf61f663f24" - integrity sha512-pUKNGcKKyKwc9xb/ZQS27juxxRCewdji/Mvd6UQuLJxtiEIY/pRavNW7lDa3k4qqbD90tlWnsfSct4WRSwpRsg== +"@patternfly/patternfly@6.0.0-alpha.69": + version "6.0.0-alpha.69" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.69.tgz#26a2c474048b54fb592de1c8b245cf365e335bd5" + integrity sha512-05Dj2EkaaCKR3OjkcZnIHZ9YMYibQxsFoj6n5PDI/tjwI2lSPsgr07N/cVe3pQFZ4l8cLnXROThOfdYXTVoxhQ== "@pkgjs/parseargs@^0.11.0": version "0.11.0" From 0c51f8d65c38465e3e60676bc3a55455e02f27ed Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 25 Jan 2024 15:24:48 -0500 Subject: [PATCH 2/3] Updated unit tests --- .../__snapshots__/TabContent.test.tsx.snap | 2 +- .../components/Tabs/__tests__/Tabs.test.tsx | 32 +- .../__snapshots__/Tabs.test.tsx.snap | 424 +++++++++--------- 3 files changed, 229 insertions(+), 229 deletions(-) diff --git a/packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap index 268ee9e5316..9c5f6b1a919 100644 --- a/packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap +++ b/packages/react-core/src/components/Tabs/__tests__/Generated/__snapshots__/TabContent.test.tsx.snap @@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
{ expect(asFragment()).toMatchSnapshot(); }); -test('should render secondary tabs', () => { +test('should render subtabs', () => { const { asFragment } = render( "Tab item 1"}> - - "Secondary Tab item 1"}> - Secondary Tab 1 section + + "Subtab item 1"}> + Subtab 1 section - "Secondary Tab item 2"}> - Secondary Tab 2 section + "Subtab item 2"}> + Subtab 2 section - "Secondary Tab item 3"}> - Secondary Tab 3 section + "Subtab item 3"}> + Subtab 3 section @@ -338,9 +338,9 @@ test('should render tabs with separate content', () => { expect(asFragment()).toMatchSnapshot(); }); -test('should render box tabs of light variant', () => { +test('should render box tabs of secondary variant', () => { const { asFragment } = render( - + "Tab item 1"}> Tab 1 section @@ -372,9 +372,9 @@ test('should render tabs with no bottom border', () => { expect(asFragment()).toMatchSnapshot(); }); -test('should render secondary tabs with no bottom border when passed hasNoBorderBottom', () => { +test('should render subtabs with no bottom border when passed hasNoBorderBottom', () => { render( - + "Tab item 1"}> Tab 1 section @@ -387,14 +387,14 @@ test('should render secondary tabs with no bottom border when passed hasNoBorder ); - const tabsContainer = screen.queryByLabelText('Secondary bottom border'); + const tabsContainer = screen.queryByLabelText('Subtab bottom border'); expect(tabsContainer).toHaveClass('pf-m-no-border-bottom'); }); -test('should render secondary tabs with border bottom', () => { +test('should render subtabs with border bottom', () => { render( - + "Tab item 1"}> Tab 1 section @@ -407,7 +407,7 @@ test('should render secondary tabs with border bottom', () => { ); - const tabsContainer = screen.queryByLabelText('Secondary bottom border'); + const tabsContainer = screen.queryByLabelText('Subtab bottom border'); expect(tabsContainer).not.toHaveClass('pf-m-no-border-bottom'); }); diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap index 0a904e2f6df..40c9366efeb 100644 --- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -81,7 +81,7 @@ exports[`should render accessible tabs 1`] = `