[Emotion] Add new focus.transparency and focus.backgroundColor theme tokens#6984
[Emotion] Add new focus.transparency and focus.backgroundColor theme tokens#6984cee-chen merged 4 commits intoelastic:mainfrom
focus.transparency and focus.backgroundColor theme tokens#6984Conversation
- remove unused `outline` var, unlikely we'll use this at any point - removed TODO esque comment
|
This PR does not convert any existing components that use the existing I'll be converting |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6984/ |
|
CI failures are unrelated to this PR and are already failing in main. Please ignore them for now :) |
breehall
left a comment
There was a problem hiding this comment.
Given the fact that there are multiple usages of $euiFocusBackgroundColor in Kibana, I think this is definitely the correct approach. When the day comes where we have no Sass in our library, will our deprecation plan be to just remove the mixin and replace usages with the token?
Also thank you for adding additional comments to the styling. Our Sass can be difficult to work with in some places 😅
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_6984/ |
Yep, that's correct! Thanks Bree! |
`85.0.0` ➡️ `85.1.0`⚠️ The biggest change in this PR by far is the **removal** of several `EuiFilterSelectItem` CSS classes and styles associated with those classes. EUI has previously exported component-specific CSS classes for usage such as `.euiFilterSelect__items`, `.euiFilterGroup__popoverPanel`, or `.euiAccordionForm`. ❌ **As of our move to CSS-in-JS, we are actively moving away from this architecture**. The goal is to either provide either a component or prop directly to you instead of a CSS class. As a reminder, our classNames are not guaranteed APIs and are subject to change without warning - should you need to tweak or customize EUI's styling, we strongly recommend passing in your own `className`. 💬 Moving forward, EUI will attempted to convert any usages of removed CSS classes and their direct usages in Kibana for you. In most cases, we'll hopefully be able to take the correct path of using a component or prop instead. In cases where we cannot or significant/complex changes are required, we may temporarily convert the CSS to a static CSS-in-JS usage instead and add a TODO asking the relevant team to address this in their own time (for example, the deprecation of `EuiFilterSelectItem` and its conversion to `EuiSelectable`). ## [`85.1.0`](https://github.com/elastic/eui/tree/v85.1.0) - Updated `EuiComboBox`'s `options` to accept `option.append` and `option.prepend` props ([#6953](elastic/eui#6953)) - Updated deprecated `.substr()` usages to `.substring()` ([#6954](elastic/eui#6954)) - Updated `EuiInlineEdit`'s read mode button to include a title tooltip, increasing readability of truncated text ([#6966](elastic/eui#6966)) **Bug fixes** - Fixed `EuiFilterGroup`'s responsive styles ([#6983](elastic/eui#6983)) **Deprecations** - Deprecated `EuiFilterSelectItem`; Use `EuiSelectable` instead ([#6982](elastic/eui#6982)) **CSS-in-JS conversions** - Converted `EuiFilterSelectItem` to Emotion ([#6982](elastic/eui#6982)) - Removed `.euiFilterSelect__items` CSS; Use `EuiSelectable` instead ([#6982](elastic/eui#6982)) - Removed `.euiFilterSelect__note` and `.euiFilterSelect__noteContent` CSS; Use `EuiSelectableMessage` instead ([#6982](elastic/eui#6982)) - Added `focus.transparency` and `focus.backgroundColor` theme tokens ([#6984](elastic/eui#6984)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Summary
Adds
focus.transparency(mostly just needed forfocus.backgroundColor) andfocus.backgroundColoreuiFocusBackgroundSass mixin exists (link). This mixin allows customizing the background color used (defaulting toprimary). I did not convert this mixin to a CSS-in-JS util, and opted to go this route (theme tokens) instead. I did this for several reasons:$euiFocusBackgroundColorusages (which uses the defaultprimarycolor) and has 0 usages of custom focus background colors. Based on this, consumers will want an easier-to-grab theme token vs. a util they have to specifically importtransparentizeutil (which does all the heavy lifting) and then thefocus.transparencytoken at that point.Updated various comments in the focus states files, including removing a hypothetical
outlinetoken (our theme tokens already suffice for building this CSS, we have aneuiOutline()which essentially already does this and more, and there are zero consumer usages of outline-related CSS)QA
focus.transparencyandfocus.backgroundColorexistGeneral checklist
[ ] Added documentation- I don't see any docs listed for the focus ring tokens, so going to skip any specific docs (other than the above QA links) for this[ ] Added or updated jest and cypress tests- Caroline and Greg apparently did not write any tests to snapshot EUI theme output, so there's no tests to update here$euiFocusBackgroundColorto justFocus background color