feat(tabs): add secondary border-bottom variation, update demos #7311

wise-king-sullyman · 2022-04-28T17:21:20Z

What: Closes #7259

Additional issues:

Convenience link to the updated demo:
https://patternfly-react-pr-7311.surge.sh/components/tabs/react-demos/open-tabs-with-secondary-tabs/

patternfly-build · 2022-04-28T17:29:05Z

Preview: https://patternfly-react-pr-7311.surge.sh

A11y report: https://patternfly-react-pr-7311-a11y.surge.sh

nicolethoen · 2022-04-28T23:33:34Z

packages/react-core/src/components/Tabs/Tabs.tsx

  /** Enables no border bottom tab styling */
  hasBorderBottom?: boolean;
+  /** Enables border bottom styling for secondary tabs */
+  hasSecondaryBorderBottom?: boolean;


Is a new prop necessary? if the consumer specifies isSecondary and hasBorderBottom, could it do the same thing?

I debated that myself, but since hasBorderBottom defaults to true I worried that doing so would cause visual changes to applications that currently use secondary tabs which may not want the bottom border.

Maybe we can update this with the next breaking change release? Assuming we want secondary tabs to also default to having a bottom border like default tabs.

@kmcfaul I think that would be ideal.

mcoker

LGTM! Just a couple of comments.

mcoker · 2022-04-28T17:33:54Z

packages/react-core/src/components/Tabs/__tests__/Tabs.test.tsx


+test('should not render tabs with secondary border bottom when not passed hasSecondaryBorderBottom', () => {
+  render(
+    <Tabs id="noBottomBorderTabs" aria-label="secondary bottom border">


nit - do we care about sentence case in these tests?

Suggested change

<Tabs id="noBottomBorderTabs" aria-label="secondary bottom border">

<Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border">

It isn't consumer or user facing so it shouldn't make a big difference IMO. I'm not against making these sentence case though.

mcoker · 2022-05-02T21:02:10Z

packages/react-core/src/components/Tabs/Tabs.tsx

            !hasBorderBottom && styles.modifiers.noBorderBottom,
+            hasSecondaryBorderBottom && styles.modifiers.borderBottom,


~~would this work to keep a single prop?~~ Nope! I see the issue with it now.

Suggested change

!hasBorderBottom && styles.modifiers.noBorderBottom,

hasSecondaryBorderBottom && styles.modifiers.borderBottom,

!isSecondary && !hasBorderBottom && styles.modifiers.noBorderBottom,

isSecondary && hasBorderBottom && styles.modifiers.borderBottom,

I think that would still cause breaking changes since hasBorderBottom defaults to true, so it would require consumers to add hasBorderBottom={false} if they want to keep their secondary tabs without a bottom border.

jenny-s51

These changes are looking good @wise-king-sullyman! I did a lot of investigating here and have suggestions for changes that will help us get this merged without breaking anything! These changes should ease the breaking change updates down the road as well. Here's what we'd have to do:

Add a hasNoBorderBottom prop. Tabs (.pf-c-tabs) already have a bottom border by default, so instead of hasBorderBottom we'd want hasNoBorderBottom which will apply the CSS class .pf-m-no-border-bottom to the tabs.
Set hasSecondaryBorderBottom to false under defaultProps. Based on the core docs isSecondary i.e. (pf-m-secondary) styles the tabs with no border. So when a user sets hasSecondaryBorderBottom it should add the .pf-m-border-bottom to the secondary variant of Tabs.

The stuff we'd have left to do in a breaking change release would be to either:

Delete the hasBorderBottom prop completely (functionality is replaced by hasNoBorderBottom) OR
Rename hasSecondaryBorderBottom to hasBorderBottom and it would serve the same purpose -- based on the core docs the .pf-m-border-bottom class is only applied to secondary tabs anyway. Though leaving it as hasSecondaryBorderBottom would likely make more sense to a consumer as it tells them directly what Tabs variant that prop should be used with.

WDYT @wise-king-sullyman ? @mcoker please comment if you have any thoughts - I think I've interpreted the core side correctly 😄

jenny-s51 · 2022-05-03T19:11:45Z

packages/react-core/src/components/Tabs/Tabs.tsx

  /** Enables vertical tab styling */
  isVertical?: boolean;
  /** Enables no border bottom tab styling */
  hasBorderBottom?: boolean;


Suggested change

hasBorderBottom?: boolean;

hasNoBorderBottom?: boolean;

Based on the prop description, I'm guessing you tested a hasNoBorderBottom prop, which is what we want based on the core docs: https://patternfly-pr-4774.surge.sh/components/tabs/

The (default, non-secondary) tabs have a bottom border by default, so it makes sense to have a prop that lets a consumer remove the bottom border.

Yeah hasBorderBottom was originally hasNoBorderBottom in #7183 when I first PR'd it. @kmcfaul @nicolethoen I'd appreciate your thoughts on this suggestion. I'm a fan but since you both advocated for hasBorderBottom I'm hesitant to change it before getting your input.

Thank you for putting this much thought into it!

I still like hasBorderBottom over hasNoBorderBottom personally, where passing false adds the modifier css. I don't think it needs to match core's modifiers 1:1 in this case.

Ah okay, thank you for linking the comment thread @wise-king-sullyman and for sharing your input @kmcfaul !

Avoiding the double negative makes sense. If that's the case then we would want to keep both hasBorderBottom and hasSecondaryBorderBottom for the styling to work as expected. I've added a suggestion to update the prop description which would clarify the use case of hasBorderBottom a bit better - WDYT @wise-king-sullyman?

That suggestion looks great to me @jenny-s51, thank you for doing it!

packages/react-core/src/components/Tabs/Tabs.tsx

Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

mcoker

LGTM!

jenny-s51

👍👍

tlabaj

LGTM

chore(deps): update dependency theme-patternfly-org to v0.11.31 (patternfly#7265) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.45.5 - @patternfly/react-catalog-view-extension@4.57.5 - @patternfly/react-charts@6.59.5 - @patternfly/react-code-editor@4.47.5 - @patternfly/react-console@4.57.5 - @patternfly/react-core@4.206.5 - @patternfly/react-docs@5.67.5 - @patternfly/react-icons@4.57.5 - @patternfly/react-inline-edit-extension@4.51.5 - demo-app-ts@4.166.5 - @patternfly/react-integration@4.168.5 - @patternfly/react-log-viewer@4.51.5 - @patternfly/react-styles@4.56.5 - @patternfly/react-table@4.75.5 - @patternfly/react-tokens@4.58.5 - @patternfly/react-topology@4.53.5 - @patternfly/react-virtualized-extension@4.53.5 - transformer-cjs-imports@4.44.5 Catalog extension: Add a little bit spacing between title and items (patternfly#7060) * Run sass build and copy commands in row * Add spacing between catalog title and items chore: Add setup to always include jest-dom extended matchers, cleanup (patternfly#7240) * chore: Add setup to always include jest-dom extended matchers, cleanup * rename DropdownToggle 'describe' title, remove unnecessary data-testid's remove unused imports and functions (patternfly#7279) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.45.6 - @patternfly/react-catalog-view-extension@4.57.6 - @patternfly/react-charts@6.59.6 - @patternfly/react-code-editor@4.47.6 - @patternfly/react-console@4.57.6 - @patternfly/react-core@4.206.6 - @patternfly/react-docs@5.67.6 - @patternfly/react-icons@4.57.6 - @patternfly/react-inline-edit-extension@4.51.6 - demo-app-ts@4.166.6 - @patternfly/react-integration@4.168.6 - @patternfly/react-log-viewer@4.51.6 - @patternfly/react-styles@4.56.6 - @patternfly/react-table@4.75.6 - @patternfly/react-tokens@4.58.6 - @patternfly/react-topology@4.53.6 - @patternfly/react-virtualized-extension@4.53.6 - transformer-cjs-imports@4.44.6 chore(DateTimePicker): convert demo to typescript (patternfly#7268) feat(CodeBlock): add class to code component (patternfly#7281) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.46.0 - @patternfly/react-catalog-view-extension@4.58.0 - @patternfly/react-charts@6.60.0 - @patternfly/react-code-editor@4.48.0 - @patternfly/react-console@4.58.0 - @patternfly/react-core@4.207.0 - @patternfly/react-docs@5.68.0 - @patternfly/react-icons@4.58.0 - @patternfly/react-inline-edit-extension@4.52.0 - demo-app-ts@4.167.0 - @patternfly/react-integration@4.169.0 - @patternfly/react-log-viewer@4.52.0 - @patternfly/react-styles@4.57.0 - @patternfly/react-table@4.76.0 - @patternfly/react-tokens@4.59.0 - @patternfly/react-topology@4.54.0 - @patternfly/react-virtualized-extension@4.54.0 - transformer-cjs-imports@4.45.0 chore(deps): update dependency @patternfly/patternfly to v4.192.2 (patternfly#7324) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(deps): update dependency theme-patternfly-org to v0.11.32 (patternfly#7306) Co-authored-by: Renovate Bot <bot@renovateapp.com> Fix error when a group has no visible children (patternfly#7304) Also small fix for flickering cursor on edge drag. chore(deps): update dependency theme-patternfly-org to v0.11.33 (patternfly#7326) Co-authored-by: Renovate Bot <bot@renovateapp.com> update paths chore(deps): update dependency @patternfly/patternfly to v4.192.4 (patternfly#7327) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(deps): update dependency theme-patternfly-org to v0.11.34 (patternfly#7336) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(Page): update centered example to match Core (patternfly#7269) feat(divider): add support for switching orientation at various breakpoints (patternfly#7285) * add support for switching orientation at various breakpoints * deprecate isVertical, update demos and prop descriptions * PR feedback from mcoker * PR feedback from mcoker chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.0 - @patternfly/react-catalog-view-extension@4.59.0 - @patternfly/react-charts@6.61.0 - @patternfly/react-code-editor@4.49.0 - @patternfly/react-console@4.59.0 - @patternfly/react-core@4.208.0 - @patternfly/react-docs@5.69.0 - @patternfly/react-icons@4.59.0 - @patternfly/react-inline-edit-extension@4.53.0 - demo-app-ts@4.168.0 - @patternfly/react-integration@4.170.0 - @patternfly/react-log-viewer@4.53.0 - @patternfly/react-styles@4.58.0 - @patternfly/react-table@4.77.0 - @patternfly/react-tokens@4.60.0 - @patternfly/react-topology@4.55.0 - @patternfly/react-virtualized-extension@4.55.0 - transformer-cjs-imports@4.46.0 Topology dark theme (patternfly#7294) * feature(topology): style dark theme * feature(topology): node and label colors all states * feature(topology): groups * feature(topology): rebase * feature(topology): before scrubthrough * feature(topology): replace empty selector * feature(topology): remove extra stroke-width * Add labelIcon setting to topology demo * feature(topology): fix node label icon color * feature(topology): fix selected state labels Co-authored-by: Jeffrey Phillips <jephilli@redhat.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.1 - @patternfly/react-catalog-view-extension@4.59.1 - @patternfly/react-charts@6.61.1 - @patternfly/react-code-editor@4.49.1 - @patternfly/react-console@4.59.1 - @patternfly/react-core@4.208.1 - @patternfly/react-docs@5.69.1 - @patternfly/react-icons@4.59.1 - @patternfly/react-inline-edit-extension@4.53.1 - demo-app-ts@4.168.1 - @patternfly/react-integration@4.170.1 - @patternfly/react-log-viewer@4.53.1 - @patternfly/react-styles@4.58.1 - @patternfly/react-table@4.77.1 - @patternfly/react-tokens@4.60.1 - @patternfly/react-topology@4.55.1 - @patternfly/react-virtualized-extension@4.55.1 - transformer-cjs-imports@4.46.1 chore(DragAndDrop): convert examples to TS (patternfly#7244) * convert DnD to TS * make param required * PR feedback from Titani * remove extra space chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.2 - @patternfly/react-catalog-view-extension@4.59.2 - @patternfly/react-charts@6.61.2 - @patternfly/react-code-editor@4.49.2 - @patternfly/react-console@4.59.2 - @patternfly/react-core@4.208.2 - @patternfly/react-docs@5.69.2 - @patternfly/react-icons@4.59.2 - @patternfly/react-inline-edit-extension@4.53.2 - demo-app-ts@4.168.2 - @patternfly/react-integration@4.170.2 - @patternfly/react-log-viewer@4.53.2 - @patternfly/react-styles@4.58.2 - @patternfly/react-table@4.77.2 - @patternfly/react-tokens@4.60.2 - @patternfly/react-topology@4.55.2 - @patternfly/react-virtualized-extension@4.55.2 - transformer-cjs-imports@4.46.2 docs(Wizard): Added WizardStep interface to documentation (patternfly#7299) Co-authored-by: Titani <tlabaj@redaht.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.3 - @patternfly/react-catalog-view-extension@4.59.3 - @patternfly/react-charts@6.61.3 - @patternfly/react-code-editor@4.49.3 - @patternfly/react-console@4.59.3 - @patternfly/react-core@4.208.3 - @patternfly/react-docs@5.69.3 - @patternfly/react-icons@4.59.3 - @patternfly/react-inline-edit-extension@4.53.3 - demo-app-ts@4.168.3 - @patternfly/react-integration@4.170.3 - @patternfly/react-log-viewer@4.53.3 - @patternfly/react-styles@4.58.3 - @patternfly/react-table@4.77.3 - @patternfly/react-tokens@4.60.3 - @patternfly/react-topology@4.55.3 - @patternfly/react-virtualized-extension@4.55.3 - transformer-cjs-imports@4.46.3 chore(docs):cleanup dead link (patternfly#7270) * chore(docs):cleanup dead link * hardcode path Co-authored-by: Titani <tlabaj@redaht.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.4 - @patternfly/react-catalog-view-extension@4.59.4 - @patternfly/react-charts@6.61.4 - @patternfly/react-code-editor@4.49.4 - @patternfly/react-console@4.59.4 - @patternfly/react-core@4.208.4 - @patternfly/react-docs@5.69.4 - @patternfly/react-icons@4.59.4 - @patternfly/react-inline-edit-extension@4.53.4 - demo-app-ts@4.168.4 - @patternfly/react-integration@4.170.4 - @patternfly/react-log-viewer@4.53.4 - @patternfly/react-styles@4.58.4 - @patternfly/react-table@4.77.4 - @patternfly/react-tokens@4.60.4 - @patternfly/react-topology@4.55.4 - @patternfly/react-virtualized-extension@4.55.4 - transformer-cjs-imports@4.46.4 fix(Tabs): update key to not use index (patternfly#7276) chore(ClipboardCopy): update types used for tooltip positioning (patternfly#7295) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.5 - @patternfly/react-catalog-view-extension@4.59.5 - @patternfly/react-charts@6.61.5 - @patternfly/react-code-editor@4.49.5 - @patternfly/react-console@4.59.5 - @patternfly/react-core@4.208.5 - @patternfly/react-docs@5.69.5 - @patternfly/react-icons@4.59.5 - @patternfly/react-inline-edit-extension@4.53.5 - demo-app-ts@4.168.5 - @patternfly/react-integration@4.170.5 - @patternfly/react-log-viewer@4.53.5 - @patternfly/react-styles@4.58.5 - @patternfly/react-table@4.77.5 - @patternfly/react-tokens@4.60.5 - @patternfly/react-topology@4.55.5 - @patternfly/react-virtualized-extension@4.55.5 - transformer-cjs-imports@4.46.5 Feat(Table): Adds full screen demo for basic/bulk select (patternfly#7264) * full screen demo for bulk-select example * format chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.6 - @patternfly/react-catalog-view-extension@4.59.6 - @patternfly/react-charts@6.61.6 - @patternfly/react-code-editor@4.49.6 - @patternfly/react-console@4.59.6 - @patternfly/react-core@4.208.6 - @patternfly/react-docs@5.69.6 - @patternfly/react-icons@4.59.6 - @patternfly/react-inline-edit-extension@4.53.6 - demo-app-ts@4.168.6 - @patternfly/react-integration@4.170.6 - @patternfly/react-log-viewer@4.53.6 - @patternfly/react-styles@4.58.6 - @patternfly/react-table@4.77.6 - @patternfly/react-tokens@4.60.6 - @patternfly/react-topology@4.55.6 - @patternfly/react-virtualized-extension@4.55.6 - transformer-cjs-imports@4.46.6 Add ColaGroupsLayout (patternfly#7308) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.7 - @patternfly/react-catalog-view-extension@4.59.7 - @patternfly/react-charts@6.61.7 - @patternfly/react-code-editor@4.49.7 - @patternfly/react-console@4.59.7 - @patternfly/react-core@4.208.7 - @patternfly/react-docs@5.69.7 - @patternfly/react-icons@4.59.7 - @patternfly/react-inline-edit-extension@4.53.7 - demo-app-ts@4.168.7 - @patternfly/react-integration@4.170.7 - @patternfly/react-log-viewer@4.53.7 - @patternfly/react-styles@4.58.7 - @patternfly/react-table@4.77.7 - @patternfly/react-tokens@4.60.7 - @patternfly/react-topology@4.55.7 - @patternfly/react-virtualized-extension@4.55.7 - transformer-cjs-imports@4.46.7 chore(deps): update dependency @patternfly/patternfly to v4.192.6 (patternfly#7352) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.8 - @patternfly/react-catalog-view-extension@4.59.8 - @patternfly/react-charts@6.61.8 - @patternfly/react-code-editor@4.49.8 - @patternfly/react-console@4.59.8 - @patternfly/react-core@4.208.8 - @patternfly/react-docs@5.69.8 - @patternfly/react-icons@4.59.8 - @patternfly/react-inline-edit-extension@4.53.8 - demo-app-ts@4.168.8 - @patternfly/react-integration@4.170.8 - @patternfly/react-log-viewer@4.53.8 - @patternfly/react-styles@4.58.8 - @patternfly/react-table@4.77.8 - @patternfly/react-tokens@4.60.8 - @patternfly/react-topology@4.55.8 - @patternfly/react-virtualized-extension@4.55.8 - transformer-cjs-imports@4.46.8 Add correct types for class components using context API (patternfly#7282) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.9 - @patternfly/react-catalog-view-extension@4.59.9 - @patternfly/react-charts@6.61.9 - @patternfly/react-code-editor@4.49.9 - @patternfly/react-console@4.59.9 - @patternfly/react-core@4.208.9 - @patternfly/react-docs@5.69.9 - @patternfly/react-icons@4.59.9 - @patternfly/react-inline-edit-extension@4.53.9 - demo-app-ts@4.168.9 - @patternfly/react-integration@4.170.9 - @patternfly/react-log-viewer@4.53.9 - @patternfly/react-styles@4.58.9 - @patternfly/react-table@4.77.9 - @patternfly/react-tokens@4.60.9 - @patternfly/react-topology@4.55.9 - @patternfly/react-virtualized-extension@4.55.9 - transformer-cjs-imports@4.46.9 fix(charts): Add style for tooltip cursor (patternfly#7361) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.10 - @patternfly/react-catalog-view-extension@4.59.10 - @patternfly/react-charts@6.61.10 - @patternfly/react-code-editor@4.49.10 - @patternfly/react-console@4.59.10 - @patternfly/react-core@4.208.10 - @patternfly/react-docs@5.69.10 - @patternfly/react-icons@4.59.10 - @patternfly/react-inline-edit-extension@4.53.10 - demo-app-ts@4.168.10 - @patternfly/react-integration@4.170.10 - @patternfly/react-log-viewer@4.53.10 - @patternfly/react-styles@4.58.10 - @patternfly/react-table@4.77.10 - @patternfly/react-tokens@4.60.10 - @patternfly/react-topology@4.55.10 - @patternfly/react-virtualized-extension@4.55.10 - transformer-cjs-imports@4.46.10 chore(AlertGroup): convert examples to TypeScript/functional components (patternfly#7273) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.11 - @patternfly/react-catalog-view-extension@4.59.11 - @patternfly/react-charts@6.61.11 - @patternfly/react-code-editor@4.49.11 - @patternfly/react-console@4.59.11 - @patternfly/react-core@4.208.11 - @patternfly/react-docs@5.69.11 - @patternfly/react-icons@4.59.11 - @patternfly/react-inline-edit-extension@4.53.11 - demo-app-ts@4.168.11 - @patternfly/react-integration@4.170.11 - @patternfly/react-log-viewer@4.53.11 - @patternfly/react-styles@4.58.11 - @patternfly/react-table@4.77.11 - @patternfly/react-tokens@4.60.11 - @patternfly/react-topology@4.55.11 - @patternfly/react-virtualized-extension@4.55.11 - transformer-cjs-imports@4.46.11 chore(deps): update dependency @patternfly/patternfly to v4.193.0 (patternfly#7362) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.12 - @patternfly/react-catalog-view-extension@4.59.12 - @patternfly/react-charts@6.61.12 - @patternfly/react-code-editor@4.49.12 - @patternfly/react-console@4.59.12 - @patternfly/react-core@4.208.12 - @patternfly/react-docs@5.69.12 - @patternfly/react-icons@4.59.12 - @patternfly/react-inline-edit-extension@4.53.12 - demo-app-ts@4.168.12 - @patternfly/react-integration@4.170.12 - @patternfly/react-log-viewer@4.53.12 - @patternfly/react-styles@4.58.12 - @patternfly/react-table@4.77.12 - @patternfly/react-tokens@4.60.12 - @patternfly/react-topology@4.55.12 - @patternfly/react-virtualized-extension@4.55.12 - transformer-cjs-imports@4.46.12 feat(tabs): add secondary border-bottom variation, update demos (patternfly#7311) * feat(tabs): add secondary border-bottom variation, update demos * improve prop description Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com> * sentence case test aria labels Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com> fix(Wixard): Fixed id not being applied to wizard step (patternfly#7349) * fix(Wixard): Fixed id not being applied to wizard step * add id to tests Co-authored-by: Titani <tlabaj@redaht.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.47.13 - @patternfly/react-catalog-view-extension@4.59.13 - @patternfly/react-charts@6.61.13 - @patternfly/react-code-editor@4.49.13 - @patternfly/react-console@4.59.13 - @patternfly/react-core@4.208.13 - @patternfly/react-docs@5.69.13 - @patternfly/react-icons@4.59.13 - @patternfly/react-inline-edit-extension@4.53.13 - demo-app-ts@4.168.13 - @patternfly/react-integration@4.170.13 - @patternfly/react-log-viewer@4.53.13 - @patternfly/react-styles@4.58.13 - @patternfly/react-table@4.77.13 - @patternfly/react-tokens@4.60.13 - @patternfly/react-topology@4.55.13 - @patternfly/react-virtualized-extension@4.55.13 - transformer-cjs-imports@4.46.13 Add missing 'children' prop in several places (patternfly#7363) fix(ClipboardCopy): dynamic tooltip updates get announced (patternfly#7335) feat(drawer): convert examples to TS (patternfly#7329) * wip drawer demos * convert drawer examples to TS * PR feedback from Eric chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.48.0 - @patternfly/react-catalog-view-extension@4.60.0 - @patternfly/react-charts@6.62.0 - @patternfly/react-code-editor@4.50.0 - @patternfly/react-console@4.60.0 - @patternfly/react-core@4.209.0 - @patternfly/react-docs@5.70.0 - @patternfly/react-icons@4.60.0 - @patternfly/react-inline-edit-extension@4.54.0 - demo-app-ts@4.169.0 - @patternfly/react-integration@4.171.0 - @patternfly/react-log-viewer@4.54.0 - @patternfly/react-styles@4.59.0 - @patternfly/react-table@4.78.0 - @patternfly/react-tokens@4.61.0 - @patternfly/react-topology@4.56.0 - @patternfly/react-virtualized-extension@4.56.0 - transformer-cjs-imports@4.47.0 feat(charts): Deprecate themeVariant prop for light / dark themes (patternfly#7372) patternfly#7369 chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.49.0 - @patternfly/react-catalog-view-extension@4.61.0 - @patternfly/react-charts@6.63.0 - @patternfly/react-code-editor@4.51.0 - @patternfly/react-console@4.61.0 - @patternfly/react-core@4.210.0 - @patternfly/react-docs@5.71.0 - @patternfly/react-icons@4.61.0 - @patternfly/react-inline-edit-extension@4.55.0 - demo-app-ts@4.170.0 - @patternfly/react-integration@4.172.0 - @patternfly/react-log-viewer@4.55.0 - @patternfly/react-styles@4.60.0 - @patternfly/react-table@4.79.0 - @patternfly/react-tokens@4.62.0 - @patternfly/react-topology@4.57.0 - @patternfly/react-virtualized-extension@4.57.0 - transformer-cjs-imports@4.48.0 feat(tokens): Variables now include a fallback value for charts (patternfly#7374) patternfly#7373 chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.0 - @patternfly/react-catalog-view-extension@4.62.0 - @patternfly/react-charts@6.64.0 - @patternfly/react-code-editor@4.52.0 - @patternfly/react-console@4.62.0 - @patternfly/react-core@4.211.0 - @patternfly/react-docs@5.72.0 - @patternfly/react-icons@4.62.0 - @patternfly/react-inline-edit-extension@4.56.0 - demo-app-ts@4.171.0 - @patternfly/react-integration@4.173.0 - @patternfly/react-log-viewer@4.56.0 - @patternfly/react-styles@4.61.0 - @patternfly/react-table@4.80.0 - @patternfly/react-tokens@4.63.0 - @patternfly/react-topology@4.58.0 - @patternfly/react-virtualized-extension@4.58.0 - transformer-cjs-imports@4.49.0 chore(deps): update dependency @patternfly/patternfly to v4.194.0 (patternfly#7375) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.1 - @patternfly/react-catalog-view-extension@4.62.1 - @patternfly/react-charts@6.64.1 - @patternfly/react-code-editor@4.52.1 - @patternfly/react-console@4.62.1 - @patternfly/react-core@4.211.1 - @patternfly/react-docs@5.72.1 - @patternfly/react-icons@4.62.1 - @patternfly/react-inline-edit-extension@4.56.1 - demo-app-ts@4.171.1 - @patternfly/react-integration@4.173.1 - @patternfly/react-log-viewer@4.56.1 - @patternfly/react-styles@4.61.1 - @patternfly/react-table@4.80.1 - @patternfly/react-tokens@4.63.1 - @patternfly/react-topology@4.58.1 - @patternfly/react-virtualized-extension@4.58.1 - transformer-cjs-imports@4.49.1 fix: tree view menu keyboard handling (patternfly#7334) * fix: tree view menu keyboard handling * refactor to panel * add comments to helper functions, remove unused keyboard override from menu fix(Page): add tabindex to components with hasOverflowScroll (patternfly#7274) * fix(PageSection): make content scrollable via keyboard with hasOverflowScroll * Add tabindex to remaining Page components with hasOverflowScroll chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.2 - @patternfly/react-catalog-view-extension@4.62.2 - @patternfly/react-charts@6.64.2 - @patternfly/react-code-editor@4.52.2 - @patternfly/react-console@4.62.2 - @patternfly/react-core@4.211.2 - @patternfly/react-docs@5.72.2 - @patternfly/react-icons@4.62.2 - @patternfly/react-inline-edit-extension@4.56.2 - demo-app-ts@4.171.2 - @patternfly/react-integration@4.173.2 - @patternfly/react-log-viewer@4.56.2 - @patternfly/react-styles@4.61.2 - @patternfly/react-table@4.80.2 - @patternfly/react-tokens@4.63.2 - @patternfly/react-topology@4.58.2 - @patternfly/react-virtualized-extension@4.58.2 - transformer-cjs-imports@4.49.2 fix(Tooltip): make ref variant announced by assistive tech (patternfly#7332) * fix(Tooltip): make ref variant announced by assistive tech * Make suggested changes * Add aria-describedby back to example for NVDA and JAWS support fix(LogViewer): clear ANSI cache when resetting the log window (patternfly#7355) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.3 - @patternfly/react-catalog-view-extension@4.62.3 - @patternfly/react-charts@6.64.3 - @patternfly/react-code-editor@4.52.3 - @patternfly/react-console@4.62.3 - @patternfly/react-core@4.211.3 - @patternfly/react-docs@5.72.3 - @patternfly/react-icons@4.62.3 - @patternfly/react-inline-edit-extension@4.56.3 - demo-app-ts@4.171.3 - @patternfly/react-integration@4.173.3 - @patternfly/react-log-viewer@4.56.3 - @patternfly/react-styles@4.61.3 - @patternfly/react-table@4.80.3 - @patternfly/react-tokens@4.63.3 - @patternfly/react-topology@4.58.3 - @patternfly/react-virtualized-extension@4.58.3 - transformer-cjs-imports@4.49.3 chore(deps): update dependency @patternfly/patternfly to v4.194.1 (patternfly#7386) Co-authored-by: Renovate Bot <bot@renovateapp.com> docs(Modal): add example preserving a11y when content overflows (patternfly#7293) * docs(Modal): add example preserving a11y when content overflows * update overflow example copy * add additional props to enable better a11y for scrollable content * add tests for new aria props * expand on body aria prop descriptions chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.4 - @patternfly/react-catalog-view-extension@4.62.4 - @patternfly/react-charts@6.64.4 - @patternfly/react-code-editor@4.52.4 - @patternfly/react-console@4.62.4 - @patternfly/react-core@4.211.4 - @patternfly/react-docs@5.72.4 - @patternfly/react-icons@4.62.4 - @patternfly/react-inline-edit-extension@4.56.4 - demo-app-ts@4.171.4 - @patternfly/react-integration@4.173.4 - @patternfly/react-log-viewer@4.56.4 - @patternfly/react-styles@4.61.4 - @patternfly/react-table@4.80.4 - @patternfly/react-tokens@4.63.4 - @patternfly/react-topology@4.58.4 - @patternfly/react-virtualized-extension@4.58.4 - transformer-cjs-imports@4.49.4 fix(Popper): update Popper modifiers when child DOM changes (patternfly#7385) * fix(Popper): update Popper modifiers when child DOM changes * update comments * fix build error * udpate comment chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.5 - @patternfly/react-catalog-view-extension@4.62.5 - @patternfly/react-charts@6.64.5 - @patternfly/react-code-editor@4.52.5 - @patternfly/react-console@4.62.5 - @patternfly/react-core@4.211.5 - @patternfly/react-docs@5.72.5 - @patternfly/react-icons@4.62.5 - @patternfly/react-inline-edit-extension@4.56.5 - demo-app-ts@4.171.5 - @patternfly/react-integration@4.173.5 - @patternfly/react-log-viewer@4.56.5 - @patternfly/react-styles@4.61.5 - @patternfly/react-table@4.80.5 - @patternfly/react-tokens@4.63.5 - @patternfly/react-topology@4.58.5 - @patternfly/react-virtualized-extension@4.58.5 - transformer-cjs-imports@4.49.5 chore(deps): update dependency theme-patternfly-org to v0.11.38 (patternfly#7381) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.50.6 - @patternfly/react-catalog-view-extension@4.62.6 - @patternfly/react-charts@6.64.6 - @patternfly/react-code-editor@4.52.6 - @patternfly/react-console@4.62.6 - @patternfly/react-core@4.211.6 - @patternfly/react-docs@5.72.6 - @patternfly/react-icons@4.62.6 - @patternfly/react-inline-edit-extension@4.56.6 - demo-app-ts@4.171.6 - @patternfly/react-integration@4.173.6 - @patternfly/react-log-viewer@4.56.6 - @patternfly/react-styles@4.61.6 - @patternfly/react-table@4.80.6 - @patternfly/react-tokens@4.63.6 - @patternfly/react-topology@4.58.6 - @patternfly/react-virtualized-extension@4.58.6 - transformer-cjs-imports@4.49.6 feat(charts): added PF dark theme support (patternfly#7310) * feat(charts): added PF dark theme support * chore(charts): use single theme colorscale vars * chore(charts): update react-tokens to test fallback * chore(charts): merge cleanup * chore(charts): cleanup * chore(charts): revert token name change * chore(charts): remove newlines * chore(charts): snapshots * chore(charts): updated colors to use react tokens var chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.51.0 - @patternfly/react-catalog-view-extension@4.63.0 - @patternfly/react-charts@6.65.0 - @patternfly/react-code-editor@4.53.0 - @patternfly/react-console@4.63.0 - @patternfly/react-core@4.212.0 - @patternfly/react-docs@5.73.0 - @patternfly/react-icons@4.63.0 - @patternfly/react-inline-edit-extension@4.57.0 - demo-app-ts@4.172.0 - @patternfly/react-integration@4.174.0 - @patternfly/react-log-viewer@4.57.0 - @patternfly/react-styles@4.62.0 - @patternfly/react-table@4.81.0 - @patternfly/react-tokens@4.64.0 - @patternfly/react-topology@4.59.0 - @patternfly/react-virtualized-extension@4.59.0 - transformer-cjs-imports@4.50.0 feat(Tabs): allow dynamic close/add (patternfly#7297) * feat(Tabs): allow dynamic close/add * add button names * change to buttons, add disabled for close button, update demo * focus added tabs, update snap * update default aria * update new tab naming * update aria names, fix logic for empty tabs * update test with new prop names * update prop name in desc, prevent single tab close * update aria label, reabase * add update check for children * add beta flags chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.0 - @patternfly/react-catalog-view-extension@4.64.0 - @patternfly/react-charts@6.66.0 - @patternfly/react-code-editor@4.54.0 - @patternfly/react-console@4.64.0 - @patternfly/react-core@4.213.0 - @patternfly/react-docs@5.74.0 - @patternfly/react-icons@4.64.0 - @patternfly/react-inline-edit-extension@4.58.0 - demo-app-ts@4.173.0 - @patternfly/react-integration@4.175.0 - @patternfly/react-log-viewer@4.58.0 - @patternfly/react-styles@4.63.0 - @patternfly/react-table@4.82.0 - @patternfly/react-tokens@4.65.0 - @patternfly/react-topology@4.60.0 - @patternfly/react-virtualized-extension@4.60.0 - transformer-cjs-imports@4.51.0 chore(deps): update dependency @patternfly/patternfly to v4.194.2 (patternfly#7394) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.1 - @patternfly/react-catalog-view-extension@4.64.1 - @patternfly/react-charts@6.66.1 - @patternfly/react-code-editor@4.54.1 - @patternfly/react-console@4.64.1 - @patternfly/react-core@4.213.1 - @patternfly/react-docs@5.74.1 - @patternfly/react-icons@4.64.1 - @patternfly/react-inline-edit-extension@4.58.1 - demo-app-ts@4.173.1 - @patternfly/react-integration@4.175.1 - @patternfly/react-log-viewer@4.58.1 - @patternfly/react-styles@4.63.1 - @patternfly/react-table@4.82.1 - @patternfly/react-tokens@4.65.1 - @patternfly/react-topology@4.60.1 - @patternfly/react-virtualized-extension@4.60.1 - transformer-cjs-imports@4.51.1 Revert "docs(Dropdown): expose menuAppendTo in Dropdown prop docs (patternfly#7173)" (patternfly#7395) This reverts commit fdbf6f9. chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.2 - @patternfly/react-catalog-view-extension@4.64.2 - @patternfly/react-charts@6.66.2 - @patternfly/react-code-editor@4.54.2 - @patternfly/react-console@4.64.2 - @patternfly/react-core@4.213.2 - @patternfly/react-docs@5.74.2 - @patternfly/react-icons@4.64.2 - @patternfly/react-inline-edit-extension@4.58.2 - demo-app-ts@4.173.2 - @patternfly/react-integration@4.175.2 - @patternfly/react-log-viewer@4.58.2 - @patternfly/react-styles@4.63.2 - @patternfly/react-table@4.82.2 - @patternfly/react-tokens@4.65.2 - @patternfly/react-topology@4.60.2 - @patternfly/react-virtualized-extension@4.60.2 - transformer-cjs-imports@4.51.2 fix(Card): indicate card selectivity and status if using a screen reader (patternfly#7144) * fix(Card): indicate card selectivity and status if using a screen reader * rework hidden input implementation to fix a11y structure issues * Add temporary styling on hidden input focus for PR demo purposes * add automatic aria label determination * replace spaces with dashes in component ids * update to only pass an id when that id isn't empty * update snapshots * refactor aria label determination to use the effect hook * fix bug causing unintended warnings to be printed to the console * add aria label to demo galleries * remove temporary demonstration styling * improve hasHiddenInput prop description * rename hiddenInput props * add tests for new a11y functionality * refactor card title registering tests to be pure unit tests * add example to better explain selectable a11y props * improve new example copy chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.3 - @patternfly/react-catalog-view-extension@4.64.3 - @patternfly/react-charts@6.66.3 - @patternfly/react-code-editor@4.54.3 - @patternfly/react-console@4.64.3 - @patternfly/react-core@4.213.3 - @patternfly/react-docs@5.74.3 - @patternfly/react-icons@4.64.3 - @patternfly/react-inline-edit-extension@4.58.3 - demo-app-ts@4.173.3 - @patternfly/react-integration@4.175.3 - @patternfly/react-log-viewer@4.58.3 - @patternfly/react-styles@4.63.3 - @patternfly/react-table@4.82.3 - @patternfly/react-tokens@4.65.3 - @patternfly/react-topology@4.60.3 - @patternfly/react-virtualized-extension@4.60.3 - transformer-cjs-imports@4.51.3 fix(topology): fix variables (patternfly#7364) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.4 - @patternfly/react-catalog-view-extension@4.64.4 - @patternfly/react-charts@6.66.4 - @patternfly/react-code-editor@4.54.4 - @patternfly/react-console@4.64.4 - @patternfly/react-core@4.213.4 - @patternfly/react-docs@5.74.4 - @patternfly/react-icons@4.64.4 - @patternfly/react-inline-edit-extension@4.58.4 - demo-app-ts@4.173.4 - @patternfly/react-integration@4.175.4 - @patternfly/react-log-viewer@4.58.4 - @patternfly/react-styles@4.63.4 - @patternfly/react-table@4.82.4 - @patternfly/react-tokens@4.65.4 - @patternfly/react-topology@4.60.4 - @patternfly/react-virtualized-extension@4.60.4 - transformer-cjs-imports@4.51.4 fix(charts): support customizing tooltip border for dark theme (patternfly#7393) chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.5 - @patternfly/react-catalog-view-extension@4.64.5 - @patternfly/react-charts@6.66.5 - @patternfly/react-code-editor@4.54.5 - @patternfly/react-console@4.64.5 - @patternfly/react-core@4.213.5 - @patternfly/react-docs@5.74.5 - @patternfly/react-icons@4.64.5 - @patternfly/react-inline-edit-extension@4.58.5 - demo-app-ts@4.173.5 - @patternfly/react-integration@4.175.5 - @patternfly/react-log-viewer@4.58.5 - @patternfly/react-styles@4.63.5 - @patternfly/react-table@4.82.5 - @patternfly/react-tokens@4.65.5 - @patternfly/react-topology@4.60.5 - @patternfly/react-virtualized-extension@4.60.5 - transformer-cjs-imports@4.51.5 chore(deps): update dependency @patternfly/patternfly to v4.194.4 (patternfly#7404) Co-authored-by: Renovate Bot <bot@renovateapp.com> chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.52.6 - @patternfly/react-catalog-view-extension@4.64.6 - @patternfly/react-charts@6.66.6 - @patternfly/react-code-editor@4.54.6 - @patternfly/react-console@4.64.6 - @patternfly/react-core@4.213.6 - @patternfly/react-docs@5.74.6 - @patternfly/react-icons@4.64.6 - @patternfly/react-inline-edit-extension@4.58.6 - demo-app-ts@4.173.6 - @patternfly/react-integration@4.175.6 - @patternfly/react-log-viewer@4.58.6 - @patternfly/react-styles@4.63.6 - @patternfly/react-table@4.82.6 - @patternfly/react-tokens@4.65.6 - @patternfly/react-topology@4.60.6 - @patternfly/react-virtualized-extension@4.60.6 - transformer-cjs-imports@4.51.6 feat(table): expandable table demo (patternfly#7277) * full screen demo for bulk-select example * format * convert to full page demo * rename column * revert bulk selct * revert imports * format * add imports * add isFullscreen flag * remove select all * PR feedback from Matt * remove toolbar chore(release): releasing packages [ci skip] - eslint-plugin-patternfly-react@4.53.0 - @patternfly/react-catalog-view-extension@4.65.0 - @patternfly/react-charts@6.67.0 - @patternfly/react-code-editor@4.55.0 - @patternfly/react-console@4.65.0 - @patternfly/react-core@4.214.0 - @patternfly/react-docs@5.75.0 - @patternfly/react-icons@4.65.0 - @patternfly/react-inline-edit-extension@4.59.0 - demo-app-ts@4.174.0 - @patternfly/react-integration@4.176.0 - @patternfly/react-log-viewer@4.59.0 - @patternfly/react-styles@4.64.0 - @patternfly/react-table@4.83.0 - @patternfly/react-tokens@4.66.0 - @patternfly/react-topology@4.61.0 - @patternfly/react-virtualized-extension@4.61.0 - transformer-cjs-imports@4.52.0 Revert BaseLayout startLayout method back to protected. (patternfly#7407) fix(Tabs): make close handler optional (patternfly#7405) expose prop info

feat(tabs): add secondary border-bottom variation, update demos

a26435f

nicolethoen reviewed Apr 28, 2022

View reviewed changes

mcoker reviewed May 2, 2022

View reviewed changes

jenny-s51 self-requested a review May 3, 2022 14:55

jenny-s51 suggested changes May 3, 2022

View reviewed changes

jenny-s51 reviewed May 4, 2022

View reviewed changes

packages/react-core/src/components/Tabs/Tabs.tsx Outdated Show resolved Hide resolved

wise-king-sullyman and others added 2 commits May 4, 2022 16:19

improve prop description

f37f2f1

Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

sentence case test aria labels

5a69d30

wise-king-sullyman requested review from jenny-s51, kmcfaul, mcoker and nicolethoen May 4, 2022 21:10

mcoker approved these changes May 5, 2022

View reviewed changes

nicolethoen approved these changes May 5, 2022

View reviewed changes

jenny-s51 approved these changes May 5, 2022

View reviewed changes

tlabaj approved these changes May 5, 2022

View reviewed changes

tlabaj merged commit 3532fc6 into patternfly:main May 5, 2022

wise-king-sullyman deleted the tabs-add-border-bottom branch May 5, 2022 20:24

wise-king-sullyman mentioned this pull request Sep 27, 2022

Tabs - change border bottom API #8104

Closed

	<Tabs id="noBottomBorderTabs" aria-label="secondary bottom border">
	<Tabs id="noBottomBorderTabs" aria-label="Secondary bottom border">

		!hasBorderBottom && styles.modifiers.noBorderBottom,
		hasSecondaryBorderBottom && styles.modifiers.borderBottom,

feat(tabs): add secondary border-bottom variation, update demos #7311

feat(tabs): add secondary border-bottom variation, update demos #7311

Uh oh!

Conversation

wise-king-sullyman commented Apr 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patternfly-build commented Apr 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mcoker May 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jenny-s51 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jenny-s51 May 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

jenny-s51 left a comment

Choose a reason for hiding this comment

Uh oh!

tlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

wise-king-sullyman commented Apr 28, 2022 •

edited

Loading

patternfly-build commented Apr 28, 2022 •

edited

Loading

mcoker May 2, 2022 •

edited

Loading

jenny-s51 left a comment •

edited

Loading

jenny-s51 May 3, 2022 •

edited

Loading