[docs] Create a handy dandy version switcher #7298

cee-chen · 2023-10-19T04:22:28Z

Summary

closes #566

QA

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- [ ] Added documentation
- [ ] Props have proper autodocs (using @default if default values are missing) and playground toggles
~~- [ ] Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest ~~and cypress tests~~
Release checklist
- A changelog entry exists and is marked appropriately.
  ~~- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist - N/A

- popover is incredibly slow to load otherwise :') - this requires passing the top level `style` prop to the `<li>` element (was previously going to the inner content)

… action button

- for some reason they're rendering a full scrollbar and cutting into the item width when FF doesn't

cee-chen · 2023-10-19T04:47:16Z

@1Copenut Any chance I can have you take a quick gander at the SR accessibility of this before I move any further with it? https://eui.elastic.co/pr_7298/ (click the version badge in the top left hand corner)

The list group component is using <ul> and <li> under the hood but because we're using virtualization, the number count is off (and doesn't seem to improve if I add aria-setsize to it 😕). Also on Safari+VO the list semantics seem to get skipped entirely in favor of just announcing links? Am I not using VO correctly?

I debated using EuiSelectable for this component (which would add the ability to search, which could be nice) but I'm hesitating because I really want that extra button that sends users to the GH release notes (vs the deployed site), and I'm not sure the selectable component would allow for that.

JasonStoltz · 2023-10-19T13:08:07Z

Heck yeah @cee-chen! We've been long overdue for this. Thank you for taking the initiative.

1Copenut

Thank you for putting this together @cee-chen. I added a couple of code suggestions for screen readers. Holler at me if you want to discuss them. I'll retest when new versions are up in EUI preview links.

src-docs/src/components/guide_page/guide_page_header.tsx

cee-chen · 2023-10-19T17:18:53Z

Thanks Trevor, I'll push up some SR copy improvements here in a bit! Just curious, were you able to get the <ul> <li> semantic implications working or do you think the SR experience was sufficient without it?

Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com>

+ improve variable names

kibanamachine · 2023-10-20T01:59:37Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7298/
Storybook: https://eui.elastic.co/pr_7298/storybook

elasticmachine · 2023-10-20T01:59:42Z

💚 Build Succeeded

Buildkite Build
Commit: 4202455

History

💚 Build #862 succeeded b9bb771
💚 Build #858 succeeded 6a52384

1Copenut · 2023-10-23T19:04:47Z

Just curious, were you able to get the <ul> <li> semantic implications working or do you think the SR experience was sufficient without it?

I wasn't able to get these working reliably with Safari. I think the issue is related to Safari removing list and listitem roles from lists that override default styling. I'm pulling from Scott O'Hara's article "Fixing Lists" for this reference.

I mocked a quick demo that has two lists, one with roles and one without for control, and two more lists with links, again one with roles and one without. The links in list items do not announce as list items even with roles applied, so I think the experience is as good as it's going to be in Safari without some additional discovery.

1Copenut

LGTM! I ran this back through the big three screen readers. NVDA is reading the versions as we'd like now, and NVDA and JAWS honor the list items perfectly. I added a separate quote comment about Safari + VO findings, and how we're probably not going to get that experience as perfect as we'd like without more work.

cee-chen · 2023-10-23T19:22:44Z

Super interesting to hear that the list behavior works in JAWS/NVDA but not VO! I'll remember that for the future!

`v89.1.0`⏩`v90.0.0` The majority of changes in this PR come from: - **EuiContextMenu** being converted to Emotion (elastic/eui#7312). If your usage of `EuiContextMenu` was significantly affected, we recommend pulling down this PR and QAing it locally. - `defaultProps` being removed from some very widespread components, particularly **EuiButton**, in anticipation of React's upcoming deprecation. (elastic/eui@b7dc9b4) **NOTE**: This only affected Enzyme snapshots, and did not affect production behavior. [Commits](https://github.com/elastic/kibana/pull/170179/commits) have been broken up by component changes as well as types of changes. --- ## [`90.0.0`](https://github.com/elastic/eui/tree/v90.0.0) - Updated the `eventColor` prop on `EuiCommentEvent` to apply the color to the entire comment header. ([#7288](elastic/eui#7288)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support a new controlled selection API: `selection.selected` ([#7321](elastic/eui#7321)) **Bug fixes** - Fixed controlled `EuiFieldNumbers` not correctly updating native validity state ([#7291](elastic/eui#7291)) - Fixed `EuiListGroupItem` to pass `style` props to the wrapping `<li>` element alongside `className` and `css`. All other props will be passed to the underlying content. ([#7298](elastic/eui#7298)) - Fixed `EuiListGroupItem`'s non-transitioned transform on hover/focus ([#7298](elastic/eui#7298)) - Fixed `EuiDataGrid`s with `gridStyle.stripes` sometimes showing buggy row striping after being sorted ([#7301](elastic/eui#7301)) - Fixed `EuiDataGrid`'s `gridStyle.rowClasses` API to not conflict with `gridStyle.stripes` if dynamically updated ([#7301](elastic/eui#7301)) - Fixed `EuiDataGrid`'s `gridStyle.rowClasses` API to support multiple space-separated classes ([#7301](elastic/eui#7301)) - Fixed `EuiInputPopover` not calling `onPanelResize` callback prop ([#7305](elastic/eui#7305)) - Fixed `EuiDualRange` incorrectly positioning highlights when rendered with `showInput="inputWithPopover"` ([#7305](elastic/eui#7305)) - Fixed `EuiTabs` incorrectly wrapping text when it should instead either scroll or truncate ([#7309](elastic/eui#7309)) - `EuiContextMenu` now renders text colors correctly when used within an `EuiBottomBar` ([#7312](elastic/eui#7312)) - Fixed the width of `EuiSuperDatePicker`'s Absolute date picker ([#7313](elastic/eui#7313)) - Fixed `EuiDataGrid` cells visually cutting off overflowing content a little too quickly ([#7320](elastic/eui#7320)) **Deprecations** - Deprecated `EuiBasicTable` and `EuiInMemoryTable`'s ref `setSelection` API. Use the new `selection.selected` API instead. ([#7321](elastic/eui#7321)) **Breaking changes** - Removed `EuiPageTemplate_Deprecated`, `EuiPageSideBar_Deprecated`, and `EuiPageContent*_Deprecated` ([#7265](elastic/eui#7265)) - Removed the `ghost` color option from `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon`. Use an `<EuiThemeProvider colorMode="dark">` wrapper and `color="text"` instead. ([#7296](elastic/eui#7296)) **Dependency updates** - Updated `refractor` to v3.6.0 ([#7127](elastic/eui#7127)) - Updated `rehype-raw` to v5.1.0 ([#7127](elastic/eui#7127)) - Updated `vfile` to v4.2.1 ([#7127](elastic/eui#7127)) **Accessibility** - `EuiContextMenu` now correctly respects reduced motion preferences ([#7312](elastic/eui#7312)) - `EuiAccordion`s no longer attempt to focus child content when the accordion is externally opened via `forceState`, but will continue to focus expanded content when users click the toggle button. ([#7314](elastic/eui#7314)) **CSS-in-JS conversions** - Converted `EuiContextMenu`, `EuiContextMenuPanel`, and `EuiContextMenuItem` to Emotion; Removed `$euiContextMenuWidth` ([#7312](elastic/eui#7312))

cee-chen added 5 commits October 18, 2023 21:12

[misc cleanup] remove unnecessary functions in favor of memoized JSX

8218e3c

Add popover to version badge with list of versions and links

318add1

Set up file with all deployed versions & release script automation

2009924

Virtualize version switcher list

07460c4

- popover is incredibly slow to load otherwise :') - this requires passing the top level `style` prop to the `<li>` element (was previously going to the inner content)

[EuiListGroupItem][opinionated] remove hover/focus transform on extra…

0a212ac

… action button

cee-chen force-pushed the version-switcher branch from 996703d to 0a212ac Compare October 19, 2023 04:22

Fix text truncation/available width on webkit browsers

6a52384

- for some reason they're rendering a full scrollbar and cutting into the item width when FF doesn't

cee-chen added the documentation Issues or PRs that only affect documentation - will not need changelog entries label Oct 19, 2023

1Copenut reviewed Oct 19, 2023

View reviewed changes

src-docs/src/components/guide_page/guide_page_header.tsx Outdated Show resolved Hide resolved

src-docs/src/components/guide_page/guide_page_header.tsx Show resolved Hide resolved

cee-chen and others added 2 commits October 19, 2023 10:27

[PR feedback] SR UX

4cb0fba

Co-authored-by: Trevor Pierce <1Copenut@users.noreply.github.com>

[PR feedback] Improve SR UX for versions

b9bb771

+ improve variable names

cee-chen force-pushed the version-switcher branch from d4e6294 to b9bb771 Compare October 19, 2023 17:42

Changelog for EuiListGroupItem changes

4202455

cee-chen marked this pull request as ready for review October 20, 2023 01:29

cee-chen requested a review from a team as a code owner October 20, 2023 01:29

1Copenut approved these changes Oct 23, 2023

View reviewed changes

cee-chen merged commit afcdac4 into elastic:main Oct 23, 2023
8 checks passed

cee-chen deleted the version-switcher branch October 23, 2023 19:22

cee-chen mentioned this pull request Oct 30, 2023

Upgrade EUI to v90.0.0 elastic/kibana#170179

Merged

cee-chen mentioned this pull request Nov 7, 2023

[docs] Add header badge for PR staging instances #7347

Merged

cee-chen mentioned this pull request Feb 2, 2024

[docs] Fix Colors > Contrast docs page #7506

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Create a handy dandy version switcher #7298

[docs] Create a handy dandy version switcher #7298

cee-chen commented Oct 19, 2023 •

edited

Loading

cee-chen commented Oct 19, 2023 •

edited

Loading

JasonStoltz commented Oct 19, 2023

1Copenut left a comment

cee-chen commented Oct 19, 2023 •

edited

Loading

kibanamachine commented Oct 20, 2023

elasticmachine commented Oct 20, 2023

1Copenut commented Oct 23, 2023

1Copenut left a comment

cee-chen commented Oct 23, 2023

[docs] Create a handy dandy version switcher #7298

[docs] Create a handy dandy version switcher #7298

Conversation

cee-chen commented Oct 19, 2023 • edited Loading

Summary

QA

General checklist

cee-chen commented Oct 19, 2023 • edited Loading

JasonStoltz commented Oct 19, 2023

1Copenut left a comment

Choose a reason for hiding this comment

cee-chen commented Oct 19, 2023 • edited Loading

kibanamachine commented Oct 20, 2023

elasticmachine commented Oct 20, 2023

💚 Build Succeeded

History

1Copenut commented Oct 23, 2023

1Copenut left a comment

Choose a reason for hiding this comment

cee-chen commented Oct 23, 2023

cee-chen commented Oct 19, 2023 •

edited

Loading

cee-chen commented Oct 19, 2023 •

edited

Loading

cee-chen commented Oct 19, 2023 •

edited

Loading