feat(Tabs): allow dynamic close/add #7297

kmcfaul · 2022-04-25T15:10:41Z

What: Closes #7199

Adds onClose and onAdd callbacks to Tabs. Adding these props will add their respective buttons.
Adds addAriaLabel and closeAriaLabel to Tabs/Tab to control aria label of buttons.

patternfly-build · 2022-04-25T15:20:05Z

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

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

mcoker

Looks great! Left a few comments for review. Also it looks like adding/removing tabs doesn't trigger the detection of overflow in the tab list and toggle the scroll buttons - should it?

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

mcarrano

@kmcfaul overall this looks good, but I find the example a bit confusing. When I click add (+) the new tabs are not immediately visible, but shouldn't they be? I would expect the new tab to be placed into view and be selected, I think. That's how browsers work. It might make sense to have examples with and without overflow to add clarity.

@christianvogt perhaps you can also take a look and make sure this will work for your use case in OpenShift.

kmcfaul · 2022-04-28T17:11:23Z

Updated to refine how tabs are selected when new tabs are added/removed and reducing the starting number of tabs in the demo. The scroll buttons will pop up after overflowing, but only after you scroll the tabs manually first, and they don't seem to disappear when the tabs shrink enough. I'm not sure about a way to force the scroll buttons to update, any thoughts @tlabaj @nicolethoen?

Edit: I think I've figured it out by keeping the focus on the current active tab (which updates whenever a tab is added or removed), which causes the scrollbar to recalculate.

mcarrano · 2022-04-28T18:28:03Z

This is looking much better @kmcfaul ! In navigating this with the keyboard, I noticed something weird about how the focus rectangle gets drawn around the Add button.

This is Firefox. @mcoker ideas?

mcoker · 2022-04-29T15:48:03Z

@mcarrano good catch, added a core PR to fix - patternfly/patternfly#4820

mcoker

Looking good! Left a couple of comments about aria-labels. Also if you don't pass closeAriaLabel, the autogenerated one is aria-label="[object Object] close button".

There are a couple of edge cases where disabled tabs are made active. I'm assuming we would want to check first and not make a disabled tab active?

If you add a disabled tab (why would you do that? I dunno...) it makes the tab current and turns the text black. I added a core issue to fix the text color - patternfly/patternfly#4824
If you have a disabled tab and a non-disabled/active tab, and close the active tab, the disabled tab is made active.

I'm assuming in both cases that we don't want to make a tab current if its disabled?

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

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

kmcfaul · 2022-05-03T15:58:21Z

I'm guessing with the disabled tab issue would have to be handled in the demo code by expanding the tabs data array to track the disabled state of each tab, versus using an index (because that will dynamically change when something is removed). It should be possible without additional changes to the component.

Will update the aria labels.

nicolethoen

Couple quirks i've noticed:

I think that the number used in the new tab name should be something that is incrementing everytime i click the add button. Right now, if I have tabs 1 - 4 and delete tab three, then add a new tab, it creates another tab 4 I'd expect it to add a tab 5.
@mcarrano @mcoker should the cursor change to the 'no action' cursor when hovering over a disabled tab button?

mcarrano · 2022-05-04T15:46:50Z

@mcarrano @mcoker should the cursor change to the 'no action' cursor when hovering over a disabled tab button?

Good question. Are we doing that in other places for disabled elements? I can't remember, but think we should be consistent.

mcoker · 2022-05-04T16:24:48Z

@mcarrano it's come up before and we aren't able to implement it consistently because with a lot of disabled (things a browser can disable - basically form elements that support the disabled attribute - buttons, inputs, etc) and "disabled" (things we disable manually that aren't disabled by the browser, such as links) elements we use CSS to disable click/hover/etc mouse interactions with the element via pointer-events: none, and that disables a cursor change on hover since we're basically disabling hovering the thing using pointer-events.

Here is an example with the cursor set to not-allowed on different disabled things - https://codepen.io/mcoker/pen/rNJVYZO

"Disabled button" uses the disabled attribute and "Disabled link" uses .pf-m-disabled - both of these we disable mouse interaction via pointer-events: none; so the cursor doesn't change.

"ARIA disabled", however, preserves mouse interactions (doesn't use pointer-events: none) so that you can trigger a tooltip or popover on the element when hovered, so you see the cursor change there.

If we wanted to universally set the cursor on disabled things across the library, we would likely need to start with enabling pointer-events on these elements, then looking at other ways of keeping the user from interacting with them.

mcarrano · 2022-05-04T17:15:48Z

Thanks for the detailed explanation of that @mcoker . In that case I'm OK with not having the cursor change for disabled tabs.

tlabaj · 2022-05-05T20:25:21Z

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

  /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
  tooltip?: React.ReactElement<any>;
+  /** Aria-label for the close button added by passing the onClose property to Tabs. */
+  closeAriaLabel?: string;


Can we call this closeButtonAriaLabel instead. Other components have this.

tlabaj · 2022-05-05T20:27:51Z

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

+  /** Callback for the add button. Passing this property inserts the add button */
+  onAdd?: () => void;
+  /** Aria-label for the add button */
+  addAriaLabel?: string;


addButtonAriaLabel

tlabaj · 2022-05-05T20:39:02Z

@kmcfaul there is an error when you remove that last tab.
@mcarrano what would you expect when the last tab is remove? I would expect to still see the add button.

mcarrano · 2022-05-05T20:53:15Z

@mcarrano what would you expect when the last tab is remove? I would expect to still see the add button.

Thanks a great question. Yes, at a minimum the user should be able to add new tabs, but I think this is also highly context dependent. I could see dropping the user into some type of empty state, for example. Can we just attach this to a callback function to also the consumer to handle this as they see fit? @christianvogt I'm curious what you you would expect to in your terminal view if the user deletes the last remaining tab.

tlabaj

@kmcfaul we spoke about the last at being removed at the leads meeting today. WE talked about how this might be a product/context specific implementation decision. For the purposes our examples, it was proposed that we have the last tab not closable.

tlabaj · 2022-05-06T18:17:32Z

packages/react-core/src/components/Tabs/examples/Tabs.md

+
+### Dynamic
+
+To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable the add button, pass the `onAdd` property to `Tabs`. Aria labels may be controlled manually by passing `closeAriaLabel` to `Tab` and `addAriaLabel` to `Tabs`.


the prop names need to be updated here.

mcarrano

Looks great @kmcfaul ! Thanks for making these changes to the example.

mcoker

LGTM! Just one question but it isn't a blocker.

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

tlabaj

LGTM

nicolethoen

LGTM! Just needs a rebase.

christianvogt · 2022-05-09T17:04:31Z

If you create many tabs until the scroll buttons appear, then select the first tab and start to remove the tabs. You can get into a situation where the buttons remain but aren't necessary.

kmcfaul · 2022-05-09T18:15:37Z

@christianvogt I can't reproduce this behavior currently, after removing several tabs when the scroll bars appear they disappear for me. Maybe any older surge was cached?

Trying out an update method rq to see if it improves the behavior.

christianvogt · 2022-05-09T18:28:12Z

@kmcfaul follow these steps:

click the + button 5 times
scroll all the way to the left
select tab 1
close tab 1
continue closing the first until 1 remains

kmcfaul · 2022-05-09T18:30:03Z

@christianvogt Added some extra logic when children change, this should improve the behavior for scroll buttons being added/removed when the build is done.

nicolethoen

LGTM!

tlabaj · 2022-05-09T19:43:12Z

@christianvogt can you please verify the update looks good to you.

christianvogt · 2022-05-09T19:45:12Z

The issue I observed has been fixed.

gitdallas

looks like you have some unused consts in the tests but otherwise lgtm

wise-king-sullyman

I think that some tests to ensure that the added callbacks and aria-label props function as expected (i.e. testing that the onClose callback fires when that tab's close button is clicked) would be beneficial here. I won't block this PR for them though.

Everything else looks great! 🚀

patternfly-build · 2022-05-10T14:16:52Z

Your changes have been released in:

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

Thanks for your contribution! 🎉

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

tlabaj added ux review labels Apr 26, 2022

tlabaj requested review from mcarrano, mcoker and mmenestr April 26, 2022 21:10

mcoker requested changes Apr 27, 2022

View reviewed changes

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

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

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

mcarrano suggested changes Apr 27, 2022

View reviewed changes

kmcfaul force-pushed the tabs-dynamic branch 2 times, most recently from b2c92ef to 5786bfd Compare April 28, 2022 17:07

mcoker mentioned this pull request Apr 29, 2022

Tabs - add button focus outline cut off patternfly/patternfly#4819

Closed

mcoker mentioned this pull request May 3, 2022

Tabs - a disabled/current tab has wrong text color patternfly/patternfly#4824

Closed

mcoker requested changes May 3, 2022

View reviewed changes

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

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

nicolethoen reviewed May 4, 2022

View reviewed changes

tlabaj added the A11y label May 5, 2022

tlabaj requested a review from jessiehuff May 5, 2022 20:22

tlabaj requested changes May 5, 2022

View reviewed changes

tlabaj requested changes May 6, 2022

View reviewed changes

tlabaj reviewed May 6, 2022

View reviewed changes

mcarrano approved these changes May 6, 2022

View reviewed changes

mcoker approved these changes May 6, 2022

View reviewed changes

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

tlabaj approved these changes May 9, 2022

View reviewed changes

nicolethoen approved these changes May 9, 2022

View reviewed changes

kmcfaul added 10 commits May 9, 2022 10:48

feat(Tabs): allow dynamic close/add

a37f05e

add button names

df266d4

change to buttons, add disabled for close button, update demo

1da8f7c

focus added tabs, update snap

2c9e98c

update default aria

6b8b371

update new tab naming

ff2b5c3

update aria names, fix logic for empty tabs

37155d4

update test with new prop names

b8fa56b

update prop name in desc, prevent single tab close

8923eaf

update aria label, reabase

aafc4dc

kmcfaul force-pushed the tabs-dynamic branch from 850784c to aafc4dc Compare May 9, 2022 14:50

add update check for children

478bba6

nicolethoen approved these changes May 9, 2022

View reviewed changes

gitdallas approved these changes May 9, 2022

View reviewed changes

add beta flags

9fd0a5d

wise-king-sullyman approved these changes May 9, 2022

View reviewed changes

tlabaj merged commit 51dd66c into patternfly:main May 10, 2022


		### Dynamic

		To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable the add button, pass the `onAdd` property to `Tabs`. Aria labels may be controlled manually by passing `closeAriaLabel` to `Tab` and `addAriaLabel` to `Tabs`.

feat(Tabs): allow dynamic close/add #7297

feat(Tabs): allow dynamic close/add #7297

Uh oh!

Conversation

kmcfaul commented Apr 25, 2022

Uh oh!

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

Uh oh!

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mcarrano left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

mcarrano commented Apr 28, 2022

Uh oh!

mcoker commented Apr 29, 2022

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kmcfaul commented May 3, 2022

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

mcarrano commented May 4, 2022

Uh oh!

mcoker commented May 4, 2022

Uh oh!

mcarrano commented May 4, 2022

Uh oh!

tlabaj May 5, 2022

Choose a reason for hiding this comment

Uh oh!

tlabaj May 5, 2022

Choose a reason for hiding this comment

Uh oh!

tlabaj commented May 5, 2022

Uh oh!

mcarrano commented May 5, 2022

Uh oh!

tlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

tlabaj May 6, 2022

Choose a reason for hiding this comment

Uh oh!

mcarrano left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

tlabaj left a comment

Choose a reason for hiding this comment

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

christianvogt commented May 9, 2022

Uh oh!

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

Uh oh!

Uh oh!

christianvogt commented May 9, 2022

Uh oh!

kmcfaul commented May 9, 2022

Uh oh!

nicolethoen left a comment

patternfly-build commented Apr 25, 2022 •

edited

Loading

kmcfaul commented Apr 28, 2022 •

edited

Loading

kmcfaul commented May 9, 2022 •

edited

Loading