[Docs] Last move of tokens, Colors, to single page #5378

cchaos · 2021-11-15T21:45:17Z

Docs

Added `Colors` token page

Also moved & simplified the "Contrast checker" here and hooked up to Language toggle

Added `Color mode` specific page

For now it just contains the the example of swapping color mode at lower levels. Eventually this should contain instructions on how to setup the color switcher.

Changed “Global values” to “Customizing” to focus on just adjusting values

I'm still not completely happy with this page, I think it could be simpler, but I didn't want to bog down the token description pages with customization, and it also doesn't keep across pages. Maybe someday we could merge them.

HELP: Something has happened to the updater again where the calculated color pickers aren't updating downstream

Updated `Color functions` page to utilize the language switcher

In doing so, I also create a new doc tab type of SASS for easily passing in those snippets.

Removed Sass page

All these parts were moved to either the token pages or "Customizing" page knowing that even more docs about setup and such are coming in #5121.

Move Sass vis tokens to Color palettes page

The only part that didn't really fit into tokens were the visualization token colors which have been moved to /utilities/color-palettes#sass-variables.

Rearranged a bunch of files and converted what was possible to TSX

A lot of files were touched because I spent some time re-organizing them a bit better and converting what I could to typescript.

Components

[EuiToolTip] Force nested EuiHorizontalRule backgrounds to be more subdued (match that of the title border)

Checklist

Check against all themes for compatibility in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs and playground toggles
Added documentation
Checked Code Sandbox works for any docs examples
[ ] Added or updated jest and cypress tests
~~[ ] Checked for breaking changes and labeled appropriately~~
~~[ ] Checked for accessibility including keyboard-only and screenreader modes~~
A changelog entry exists and is marked appropriately

…alues

…bdued (match that of the title border)

kibanamachine · 2021-11-15T22:35:40Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5378/

cee-chen · 2021-11-18T21:56:16Z

Re:

HELP: Need to hook these tabs into routing

Does it make sense to wait for @miukimiu's guidelines PR to merge in since you'll get a tabbed page API that auto-hooks into routing & search at that point?

cchaos · 2021-11-18T22:35:19Z

Does it make sense to wait

Yep! I'll remove that item from the PR summary.

kibanamachine · 2021-11-18T23:06:46Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5378/

elizabetdev

Looked at "Color" and "Color functions" respective pages in Chrome, Safari, Edge, and, Firefox. Also looked at the code.

LGTM! 🎉

elizabetdev · 2021-11-22T18:54:50Z

src-docs/src/views/theme/color/_color_js.tsx

+          return {
+            id: color,
+            token: `colors.${color}`,
+            type: props[color],


The last two colors from this table are not getting the type:

They don't technically have a type because they're hard-coded to these values.

thompsongl · 2021-11-22T20:48:58Z

HELP: Something has happened to the updater again where the calculated color pickers aren't updating downstream

Looking into this. Not much changed so I'm not quite sure what's going on yet

cchaos · 2021-11-22T21:19:17Z

Not much changed so I'm not quite sure what's going on yet

Yeah, it's actually existing in master right now. The rendered hash color values as text updates, but the EuiColorPicker does not.

kibanamachine · 2021-11-22T21:56:07Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5378/

thompsongl

LGTM!

cchaos · 2021-11-22T23:03:28Z

Thanks @miukimiu ! And thanks @thompsongl for also fixing customize page. I think it's a little wonky that the color picker's popover auto closes after every change (it also makes it near impossible to use the keyboard), but maybe that's a limitation of the EuiColorPicker itself that would need to be fixed there?

thompsongl · 2021-11-23T15:21:38Z

Oh I didn't notice that. But it is not a limitation of the color picker itself. I forced ThemeValue to rerender on updates (it wasn't previously) and it's resetting the popover open state. I'll take another look.

thompsongl · 2021-11-23T15:54:08Z

9e6c79b resolves the color picker state issues

kibanamachine · 2021-11-23T16:17:41Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5378/

cchaos · 2021-11-23T17:27:29Z

Works perfectly, thank you @thompsongl !

kibanamachine · 2021-11-23T17:52:44Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5378/

…olors # Conflicts: # CHANGELOG.md # src-docs/src/routes.js

kibanamachine · 2021-11-23T21:53:28Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5378/

kibanamachine · 2021-11-23T22:32:33Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5378/

cchaos and others added 14 commits November 6, 2021 16:30

Move Sass vis tokens to Color palettes page

60cbd18

Added Color mode specific page

a37e71d

Added Colors token page

de836ac

Changed “Global values” to “Customizing” to focus on just adjusting v…

0f0d9fe

…alues

Added the more options to the GuideSectionTypes

92b88d3

More emphasis on top level navs that match search

564bf07

Moving files out of Guidelines folder

d6ba8be

Converted contrast files to TSX

b16c3c5

Cleanup of Contrast files/layout and make work with EuiTheme

e88eb87

[EuiToolTip] Force nested EuiHorizontalRule backgrounds to be more su…

ed350aa

…bdued (match that of the title border)

REvert back to values as initial selected tab

802f62c

Cleanup

108b914

Merge branch 'elastic:main' into theme_languages/6_colors

3f3fb63

cl

e901dc4

cchaos marked this pull request as ready for review November 15, 2021 22:10

elizabetdev mentioned this pull request Nov 19, 2021

[Guidelines] Add writing examples page #4720

Merged

3 tasks

cchaos requested review from thompsongl and elizabetdev November 22, 2021 16:33

elizabetdev approved these changes Nov 22, 2021

View reviewed changes

thompsongl approved these changes Nov 22, 2021

View reviewed changes

cchaos enabled auto-merge (squash) November 23, 2021 17:29

Merge remote-tracking branch 'upstream/main' into theme_languages/6_c…

620ef83

…olors # Conflicts: # CHANGELOG.md # src-docs/src/routes.js

cchaos force-pushed the theme_languages/6_colors branch from 44a49b4 to 620ef83 Compare November 23, 2021 21:22

Fix routes :oi:

309a3f6

cchaos merged commit 7b64d73 into elastic:main Nov 23, 2021

cchaos deleted the theme_languages/6_colors branch November 23, 2021 23:01

cee-chen mentioned this pull request Dec 3, 2021

[Docs] Fix broken TSX demos/CodeSandbox links #5443

Merged

3 tasks

thompsongl mentioned this pull request Dec 9, 2021

Upgrade EUI to v43.1.1 elastic/kibana#120935

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Docs] Last move of tokens, Colors, to single page #5378

[Docs] Last move of tokens, Colors, to single page #5378

cchaos commented Nov 15, 2021 •

edited by thompsongl

Loading

kibanamachine commented Nov 15, 2021

cee-chen commented Nov 18, 2021

cchaos commented Nov 18, 2021

kibanamachine commented Nov 18, 2021

elizabetdev left a comment

elizabetdev Nov 22, 2021

cchaos Nov 22, 2021

thompsongl commented Nov 22, 2021

cchaos commented Nov 22, 2021

kibanamachine commented Nov 22, 2021

thompsongl left a comment

cchaos commented Nov 22, 2021

thompsongl commented Nov 23, 2021

thompsongl commented Nov 23, 2021

kibanamachine commented Nov 23, 2021

cchaos commented Nov 23, 2021

kibanamachine commented Nov 23, 2021

kibanamachine commented Nov 23, 2021

kibanamachine commented Nov 23, 2021

[Docs] Last move of tokens, Colors, to single page #5378

[Docs] Last move of tokens, Colors, to single page #5378

Conversation

cchaos commented Nov 15, 2021 • edited by thompsongl Loading

Docs

Added Colors token page

Also moved & simplified the "Contrast checker" here and hooked up to Language toggle

Added Color mode specific page

Changed “Global values” to “Customizing” to focus on just adjusting values

Updated Color functions page to utilize the language switcher

Removed Sass page

Move Sass vis tokens to Color palettes page

Rearranged a bunch of files and converted what was possible to TSX

Components

[EuiToolTip] Force nested EuiHorizontalRule backgrounds to be more subdued (match that of the title border)

Checklist

kibanamachine commented Nov 15, 2021

cee-chen commented Nov 18, 2021

cchaos commented Nov 18, 2021

kibanamachine commented Nov 18, 2021

elizabetdev left a comment

Choose a reason for hiding this comment

elizabetdev Nov 22, 2021

Choose a reason for hiding this comment

cchaos Nov 22, 2021

Choose a reason for hiding this comment

thompsongl commented Nov 22, 2021

cchaos commented Nov 22, 2021

kibanamachine commented Nov 22, 2021

thompsongl left a comment

Choose a reason for hiding this comment

cchaos commented Nov 22, 2021

thompsongl commented Nov 23, 2021

thompsongl commented Nov 23, 2021

kibanamachine commented Nov 23, 2021

cchaos commented Nov 23, 2021

kibanamachine commented Nov 23, 2021

kibanamachine commented Nov 23, 2021

kibanamachine commented Nov 23, 2021

cchaos commented Nov 15, 2021 •

edited by thompsongl

Loading

Added `Colors` token page

Added `Color mode` specific page

Updated `Color functions` page to utilize the language switcher