[EuiText] Set default color to `inherit` #6267

elizabetdev · 2022-09-27T17:32:23Z

Summary

There was an issue with EuiText where the inherit prop was not showing in the props table and it was difficult to tell what the default color was being applied to EuiText.

So this PR:

Fixes EuiTextProps to show the color type option inherit as default.

Checklist

Checked in both light and dark modes
A changelog entry exists and is marked appropriately

kibanamachine · 2022-09-27T17:59:27Z

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

kibanamachine · 2022-09-28T14:10:17Z

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

kibanamachine · 2022-09-28T15:21:51Z

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

elizabetdev · 2022-09-28T15:52:44Z

src/components/text/text_color.tsx

@@ -38,7 +38,7 @@ export type EuiTextColorProps = CommonProps &
    /**
     * Any of our named colors or a `hex`, `rgb` or `rgba` value.
     */
-    color?: TextColor | CSSProperties['color'];
+    color?: TextColor | Exclude<CSSProperties['color'], 'inherit'>;


@chandlerprall before this is what it was showing:

With the Exclude<CSSProperties['color'], 'inherit'>; now the inherit shows. But much more options... So not sure if there is something better than the Exclude

Can we try this instead to see how react docgen handles the output?

Suggested change

color?: TextColor | Exclude<CSSProperties['color'], 'inherit'>;

color?: TextColor | CSSProperties['color'] | 'inherit';

edit: lol disregard me, definitely doesn't work 😐

@constancecchen that's the output (inherit doesn't show):

@constancecchen The thought I was going to try out was if we could parse out @type: A | B | C from the description comment and override react docgen. Should work, but not positive it's a pattern we want to follow.

😬 Yeah, I'm also a little leery of tinkering with docgen for this specific case. I leaving the options alone and using @default for inherit is clear enough, just IMO.

Sounds good to me

src/components/text/text.tsx

src/components/text/text.styles.ts

src/components/text/text.tsx

elizabetdev · 2022-09-30T10:33:13Z

jenkins test this

kibanamachine · 2022-09-30T11:02:14Z

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

elizabetdev · 2022-09-30T12:01:33Z

jenkins test this

The CI got stuck for 1h30 on the following test:

12:09:58 > @elastic/[email protected] test-a11y
12:09:58 > node ./scripts/a11y-testing

kibanamachine · 2022-09-30T12:30:15Z

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

…-color-to-inherit

kibanamachine · 2022-09-30T16:09:02Z

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

## Summary `[email protected]` ⏩ `[email protected]` ⚠️ Note: This upgrade contains breaking changes to `EuiFlexGroup` and `EuiFlexGrid`, primarily around switching margins and negative margins to `gap`. Please do a quick QA pass of your app to scan for any issues. We're happy to help resolve minor fixes, or potentially follow up after PR merges. You can find us over in #eui! ## [`70.2.4`](https://github.com/elastic/eui/tree/v70.2.4) **Bug fixes** - Fixed visual bug in nested `EuiFlexGroup`s, where the parent `EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not ([#6381](elastic/eui#6381)) ## [`70.2.3`](https://github.com/elastic/eui/tree/v70.2.3) **Bug fixes** - Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change ([#6380](elastic/eui#6380)) ## [`70.2.2`](https://github.com/elastic/eui/tree/v70.2.2) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) ## [`70.2.1`](https://github.com/elastic/eui/tree/v70.2.1) **Bug fixes** - Re-fixed `EuiPageSection` not correctly merging `contentProps.css` ([#6365](elastic/eui#6365)) - Fixed `EuiTab` not defaulting to size `m` ([#6366](elastic/eui#6366)) ## [`70.2.0`](https://github.com/elastic/eui/tree/v70.2.0) - Added a keyboard shortcuts popover to `EuiDataGrid`'s toolbar. This can be visually hidden via `toolbarVisibility.showKeyboardShortcuts`, but will always remain accessible to keyboard and screen reader users. ([#6036](elastic/eui#6036)) - `EuiScreenReaderOnly`'s `showOnFocus` prop now also shows on focus within its children ([#6036](elastic/eui#6036)) - Added `onFocus` prop callback to `EuiSuperDatePicker` ([#6320](elastic/eui#6320)) **Bug fixes** - Fixed `EuiSelectable` to ensure the full options list is re-displayed when the search bar is controlled and cleared using `searchProps.value` ([#6317](elastic/eui#6317)) - Fixed incorrect padding on `xl`-sized `EuiTabs` ([#6336](elastic/eui#6336)) - Fixed `EuiCard` not correctly merging `css` on its child `icon`s ([#6341](elastic/eui#6341)) - Fixed `EuiCheckableCard` not setting `css` on the correct DOM node ([#6341](elastic/eui#6341)) - Fixed a webkit rendering issue with `EuiModal`s containing `EuiBasicTable`s tall enough to scroll ([#6343](elastic/eui#6343)) - Fixed bug in `to_initials` that truncates custom initials ([#6346](elastic/eui#6346)) - Fix bug in `EuiCard` where layout breaks when `horizontal` and `selectable` are both passed ([#6348](elastic/eui#6348)) ## [`70.1.0`](https://github.com/elastic/eui/tree/v70.1.0) - Added the `hint` prop to the `<EuiSearchBar />`. This prop lets the consumer render a hint below the search bar that will be displayed on focus. ([#6319](elastic/eui#6319)) - Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your popover contains `EuiDragDropContext`. ([#6329](elastic/eui#6329)) **Bug fixes** - Fixed `EuiButton`'s cursor style when the button is disabled ([#6323](elastic/eui#6323)) - Fixed `EuiPageTemplate` not recognizing child `EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props ([#6324](elastic/eui#6324)) - Fixed `EuiBetaBadge` to always respect its `anchorProps` values, including when there is no tooltip content ([#6326](elastic/eui#6326)) - Temporarily patched `EuiModal` to not cause scroll-jumping issues on modal open ([#6327](elastic/eui#6327)) - Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns & sorting toolbar popovers ([#6329](elastic/eui#6329)) - Fixed `EuiButton` not correctly passing `textProps` for children inside fragments or i18n components ([#6332](elastic/eui#6332)) - Fixed `EuiButton` not correctly respecting `minWidth={0}` ([#6332](elastic/eui#6332)) **CSS-in-JS conversions** - Converted `EuiTabs` to Emotion ([#6311](elastic/eui#6311)) ## [`70.0.0`](https://github.com/elastic/eui/tree/v70.0.0) - Added the `enabled` option to the `<EuiInMemoryTable />` `executeQueryOptions` prop. This option prevents the Query from being executed when controlled by the consumer. ([#6284](elastic/eui#6284)) **Bug fixes** - Fixed `EuiOverlayMask` to set a `[data-relative-to-header=above|below]` attribute to replace the `--aboveHeader` and `--belowHeader` classNames removed in its Emotion conversion ([#6289](elastic/eui#6289)) - Fixed `EuiHeader` CSS using removed `EuiOverlayMask` class modifiers ([#6293](elastic/eui#6293)) - Fixed `EuiToolTip` not respecting reduced motion preferences ([#6295](elastic/eui#6295)) - Fixed a bug with `EuiTour` where passing any `panelProps` would cause the beacon to disappear ([#6298](elastic/eui#6298)) **Breaking changes** - `@emotion/css` is now a required peer dependency, alongside `@emotion/react` ([#6288](elastic/eui#6288)) - `@emotion/cache` is no longer required peer dependency, although your project must still use it if setting custom cache/injection locations ([#6288](elastic/eui#6288)) **CSS-in-JS conversions** - Converted `EuiCode` and `EuiCodeBlock` to Emotion; Removed `euiCodeSyntaxTokens` Sass mixin and `$euiCodeBlockPaddingModifiers`; ([#6263](elastic/eui#6263)) - Converted `EuiResizableContainer` and `EuiResizablePanel` to Emotion ([#6287](elastic/eui#6287)) ## [`69.0.0`](https://github.com/elastic/eui/tree/v69.0.0) - Added support for `fullWidth` prop on EuiForm, which will be the default for all rows/controls within ([#6229](elastic/eui#6229)) - Added support for `onResizeStart` and `onResizeEnd` callbacks to `EuiResizableContainer` ([#6236](elastic/eui#6236)) - Added optional case sensitive option matching to `EuiComboBox` with the `isCaseSensitive` prop ([#6268](elastic/eui#6268)) - `EuiFlexItem` now supports `grow={0}` ([#6270](elastic/eui#6270)) - Added the `alignItems` prop to `EuiFlexGrid` ([#6281](elastic/eui#6281)) - Added `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `indexTemporary`, `infinity`, `sortAscending`, and `sortDescending` glyphs to `EuiIcon` ([#6282](elastic/eui#6282)) **Bug fixes** - Fixed `EuiTextProps` to show the `color` type option `inherit` as default ([#6267](elastic/eui#6267)) - `EuiFlexGroup` now correctly respects `gutterSize` when responsive ([#6270](elastic/eui#6270)) - Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array not respecting `truncate` overrides ([#6280](elastic/eui#6280)) **Breaking changes** - `EuiFlexGrid` no longer supports `columns={0}`. Use `EuiFlexGroup` instead for normal flex display ([#6270](elastic/eui#6270)) - `EuiFlexGrid` now uses modern `display: grid` CSS ([#6270](elastic/eui#6270)) - `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` now use modern `gap` CSS instead of margins and negative margins ([#6270](elastic/eui#6270)) - `EuiFlexGroup` no longer applies responsive styles to `column` or `columnReverse` directions ([#6270](elastic/eui#6270)) **CSS-in-JS conversions** - Converted `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` to Emotion ([#6270](elastic/eui#6270)) ## [`68.0.0`](https://github.com/elastic/eui/tree/v68.0.0) - Added `beta` glyph to `EuiIcon` ([#6250](elastic/eui#6250)) - Added `launch` and `spaces` glyphs to `EuiIcon` ([#6260](elastic/eui#6260)) - Added the `fallbackDestination` prop to `EuiSkipLink`, which accepts a string of query selectors to fall back to if the `destinationId` does not have a valid target. Defaults to `main` ([#6261](elastic/eui#6261)) - `EuiSkipLink` is now always an `a` tag to ensure that it is always placed within screen reader link menus. ([#6261](elastic/eui#6261)) **Bug fixes** - Fixed `EuiSuperDatePicker` not correctly merging passed `className`s ([#6253](elastic/eui#6253)) - Fixed `EuiColorStops` not correctly merging in passed `data-test-subj`s, `style`s, or `...rest` ([#6255](elastic/eui#6255)) - Fixed `EuiResizablePanel` incorrectly passing `style` to the wrapper instead of the panel. Use `wrapperProps.style` to pass styles to the wrapper. ([#6255](elastic/eui#6255)) - Fixed custom `onClick`s passed to `EuiSkipLink` overriding `overrideLinkBehavior` ([#6261](elastic/eui#6261)) **Breaking changes** - Removed `inherit` and `ghost` color from `EuiListGroupItem` ([#6207](elastic/eui#6207)) - Changed default color to `text` instead of `inherit` ([#6207](elastic/eui#6207)) **CSS-in-JS conversions** - Converted `EuiListGroup` and `EuiListGroupItem` to Emotion; Removed `$euiListGroupGutterTypes`, `$euiListGroupItemColorTypes` and `$euiListGroupItemSizeTypes`; ([#6207](elastic/eui#6207)) - Converted `EuiBadgeGroup` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiBetaBadge` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiNotificationBadge` to Emotion ([#6258](elastic/eui#6258)) Co-authored-by: Elizabet Oliveira <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

[EuiText] Set default color to inherit

bfee66b

elizabetdev added 2 commits September 28, 2022 14:29

Adding CL

ac3f0ee

Fix typo

7105e4f

Exclude inherit from CSSProperties['color']

f278593

elizabetdev commented Sep 28, 2022

View reviewed changes

src/components/text/text.tsx Outdated Show resolved Hide resolved

elizabetdev commented Sep 28, 2022

View reviewed changes

src/components/text/text.styles.ts Outdated Show resolved Hide resolved

elizabetdev marked this pull request as ready for review September 28, 2022 16:31

cee-chen reviewed Sep 28, 2022

View reviewed changes

src/components/text/text.tsx Outdated Show resolved Hide resolved

elizabetdev added 2 commits September 28, 2022 19:45

Revert color type

df9f0f1

Reverting line changes

2825643

cee-chen approved these changes Sep 28, 2022

View reviewed changes

elizabetdev enabled auto-merge (squash) September 30, 2022 10:37

Merge remote-tracking branch 'upstream/main' into change-text-default…

a229acf

…-color-to-inherit

elizabetdev merged commit 4b91139 into elastic:main Sep 30, 2022

cee-chen mentioned this pull request Nov 8, 2022

Upgrade EUI to v70.2.4 elastic/kibana#144845

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiText] Set default color to `inherit` #6267

[EuiText] Set default color to `inherit` #6267

elizabetdev commented Sep 27, 2022 •

edited

Loading

kibanamachine commented Sep 27, 2022

kibanamachine commented Sep 28, 2022

kibanamachine commented Sep 28, 2022

elizabetdev Sep 28, 2022

cee-chen Sep 28, 2022 •

edited

Loading

elizabetdev Sep 28, 2022

chandlerprall Sep 28, 2022

cee-chen Sep 29, 2022

chandlerprall Sep 29, 2022

elizabetdev commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

elizabetdev commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

	color?: TextColor \| Exclude<CSSProperties['color'], 'inherit'>;
	color?: TextColor \| CSSProperties['color'] \| 'inherit';

[EuiText] Set default color to inherit #6267

[EuiText] Set default color to inherit #6267

Conversation

elizabetdev commented Sep 27, 2022 • edited Loading

Summary

Checklist

kibanamachine commented Sep 27, 2022

kibanamachine commented Sep 28, 2022

kibanamachine commented Sep 28, 2022

elizabetdev Sep 28, 2022

Choose a reason for hiding this comment

cee-chen Sep 28, 2022 • edited Loading

Choose a reason for hiding this comment

elizabetdev Sep 28, 2022

Choose a reason for hiding this comment

chandlerprall Sep 28, 2022

Choose a reason for hiding this comment

cee-chen Sep 29, 2022

Choose a reason for hiding this comment

chandlerprall Sep 29, 2022

Choose a reason for hiding this comment

elizabetdev commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

elizabetdev commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

kibanamachine commented Sep 30, 2022

[EuiText] Set default color to `inherit` #6267

[EuiText] Set default color to `inherit` #6267

elizabetdev commented Sep 27, 2022 •

edited

Loading

cee-chen Sep 28, 2022 •

edited

Loading