[EUI+] Missing Utilities content

[weronikaolejniczak]

The purpose of this task is to add missing content to the EUI+. docs/Utilities section

These are all pages that could not be created automatically when running the initial port script.

The bulk of these pages can be ported via a script, but the examples will need to be manually added.

The script can be found here: https://gist.github.com/tkajtoch/8cae6ac11e82f4769b0861e56647edde

Missing content:

• Accessibility page
• Auto sizer page
• Beacon page
• Color palettes page
• Copy page
• CSS utility classes page
• Delay page
• Error boundary page
• Focus trap page
• Highlight and mark page
• HTML ID generator page
• Inner text page
• I18n page
• Mutation observer page
• Outside click detector page
• Overlay mask page
• Portal page
• Pretty duration page
• Provider page
• Resize observer page
• Scroll page
• Text diff page
• Text truncation page
• Window events page

Update links on other pages:

• packages/website/docs/components/forms/selection/combo_box.mdx:799
• packages/website/docs/components/forms/selection/selectable.mdx:693
• packages/website/docs/components/forms/selection/combo_box.mdx:1925
• packages/website/docs/components/display/skeleton.mdx:448
• packages/website/docs/components/guidelines/getting_started.mdx:42
• packages/website/docs/components/guidelines/getting_started.mdx:93
• packages/website/docs/components/guidelines/getting_started.mdx:225
• packages/website/docs/components/layout/header.mdx:676
• packages/website/docs/data_visualization/theming.mdx:35

[weronikaolejniczak]

@JasonStoltz @tkajtoch @acstll I updated the description to reflect the current status. I'm wrapping the task up, I'm leaving the remaining pages as they are but I have some notes:

• Color palettes - an easy page to migrate but I believe it might be more appropriate to place it in the Theming section. Additionally, there's a Sass variables section that we might want to substitute with token alternatives OR remove altogether.
• CSS utility classes - an easy page to migrate but I believe it might be more appropriate to place it in the Theming section.
• Provider - an easy page to migrate but I believe it might be more appropriate to place it in the Theming section.
• Scroll - didn't migrate yet due to the CSS-in-JS / SCSS toggle interactivity. Then, discussed it with Lene and Cee, and we decided to omit the toggle in the new docs because the SCSS code will still be available in the older version of documentation. We want to advocate for using Emotion. This is related to [New docs] Port dynamic documentation pages to docusaurus #7433

Whatever we decide to do about them, let's add those tasks to #8186 to not forget the potential improvements but not delay the EUI+ release.

[weronikaolejniczak]

I believe 8 was an overestimation - sure, it's a whole section that's missing but the pages themselves are relatively easy to migrate and there are no tricky bits apart from what I described above 👆🏻 I re-estimated it to 5.

[JasonStoltz]

Makes sense to me, ty Weronika

[JasonStoltz]

@weronikaolejniczak

Color palettes - an easy page to migrate but I believe it might be more appropriate to place it in the Theming section. Additionally, there's a Sass variables section that we might want to substitute with token alternatives OR remove altogether.

Yeah, this one probably needs an update to reflect the latest, since it's now theme-aware and we're deprioritizing Sass.

@mgadewoll Do you think you could take a quick stab at providing some updated content for Weronika to use here? Since we're not bringing any other Sass references over, and I don't think we covered the new vis tokens anywhere else in our docs (right?) it may be good to take care of this now.

CSS utility classes - an easy page to migrate but I believe it might be more appropriate to place it in the Theming section.

We should probably just deprecate and de-promote these entirely, but for now, let's just migrate it and enter a ticket to do something with it in M2.

Provider - an easy page to migrate but I believe it might be more appropriate to place it in the Theming section.

Yes, for sure. We should collapse those two sections, It's silly for them to be separate. Migrate as-is for now though, and add a ticket for M2.

Scroll - didn't migrate yet due to the CSS-in-JS / SCSS toggle interactivity. Then, discussed it with Lene and Cee, and we decided to omit the toggle in the new docs because the SCSS code will still be available in the older version of documentation. We want to advocate for using Emotion.

Sounds like we'll just remove the Sass toggle and migrate as-is?

P.S. Let me know if you'd like me to create any of those follow-up tickets or if you plan to create them.

[weronikaolejniczak]

@JasonStoltz no need for @mgadewoll to provide me with updated content, we already synced on this yesterday and created a task to mention vis palette tokens on the Theming > Colors page: #8340 It is a straightforward ticket.

All the other pages I have already migrated as they are. What I'm working on now is fixing broken examples because after moving them from the current docs to Docusaurus, they have to be redone to work with our <Demo> component.

EDIT:

I added tasks for the above-mentioned pages:

• [EUI+] Move Provider page to the Theming section #8344
• [EUI+] Consider removing and deprecating CSS utility classes #8345

[tkajtoch]

Hi @weronikaolejniczak! Is this work pushed somewhere? I can't find a PR

[weronikaolejniczak]

@tkajtoch I've just opened the PR here: #8348