-
Notifications
You must be signed in to change notification settings - Fork 842
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Emotion] Nested
EuiThemeProviders now render a wrapper setting the…
… correct inherited text `color` (#6775) * Set up nested theme context provider/consumer + `span` wrapper context sets up: - whether the current theme should render a `span` (i.e., is global theme or is nested) - sets up a resable `className` string that can be reused across both React elements and DOM nodes (important for portals) * Update docs to remove now-unnecessary `color` CSS + document new behavior * Add `wrapperProps` customization for new span wrapper * Add `cloneElement` support - for consumers who have a single child / where an extra rendered wrapper will cause layout issues + update `EuiButton`s with `color="ghost"` to use cloneElement * [misc] fix incorrect `color="ghost"` usage in docs skip link * [misc cleanup] remove mounted snapshot - it's causing a snapshot diff when it shouldn't/doesn't need to; in general we should no longer be taking mounted snapshots * [docs] Update colorMode demo to include portals for testing + add a 3rd level nested demo w/ `cloneElement` * Fix portals not correctly inheriting `color` from its parent EuiTheme - there's already a `data-euiportal` wrapper around all portals to bogart, so no need to create one - in an attempt to reduce snapshot churn in Kibana's side of things, I've opted to only render a CSS class if the theme color is different from the `body` color + [tech debt] switch `portal.test.tsx` tests to RTL render * Fix portals with overlay masks overriding theme color - e.g., EuiModal, EuiFlyout + [tech debt] Add missing overlay mask tests using RTL * Update EuiBottomBar - should use `cloneElement` behavior instead of a wrapper - no longer needs to set `color` + [tech debt] update tests to use RTL * [docs][cleanup] Remove unused `inverse` src-docs file - appears to have been replaced by `color_mode/inverse` instead * changelog
- Loading branch information
Showing
27 changed files
with
914 additions
and
3,740 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,47 +1,181 @@ | ||
| import React from 'react'; | ||
| import React, { useState, FC } from 'react'; | ||
| import { | ||
| EuiThemeProvider, | ||
| useEuiTheme, | ||
| EuiIcon, | ||
| EuiSpacer, | ||
| EuiText, | ||
| EuiThemeProvider, | ||
| EuiCode, | ||
| EuiPanel, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiButton, | ||
| EuiPopover, | ||
| EuiModal, | ||
| EuiModalHeader, | ||
| EuiModalHeaderTitle, | ||
| EuiModalBody, | ||
| EuiModalFooter, | ||
| EuiFlyout, | ||
| EuiFlyoutHeader, | ||
| EuiTitle, | ||
| EuiFlyoutBody, | ||
| } from '../../../../../src'; | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <> | ||
| <EuiThemeProvider colorMode="light"> | ||
| <EuiPanel> | ||
| <EuiText color="default"> | ||
| <p> | ||
| <EuiIcon type="faceHappy" /> The colors of this panel will always | ||
| be in <strong>light</strong> mode | ||
| </p> | ||
| </EuiText> | ||
| </EuiPanel> | ||
| <ThemedChildren /> | ||
| </EuiThemeProvider> | ||
| <EuiSpacer /> | ||
|
|
||
| <EuiThemeProvider colorMode="dark"> | ||
| <EuiPanel> | ||
| <EuiText color="default"> | ||
| <p> | ||
| <EuiIcon type="faceHappy" /> The colors of this panel will always | ||
| be in <strong>dark</strong> mode | ||
| </p> | ||
| </EuiText> | ||
| </EuiPanel> | ||
| <ThemedChildren /> | ||
| </EuiThemeProvider> | ||
| <EuiSpacer /> | ||
|
|
||
| <EuiThemeProvider colorMode="inverse"> | ||
| <EuiPanel> | ||
| <EuiText color="default"> | ||
| <ThemedChildren> | ||
| <EuiSpacer size="m" /> | ||
| <EuiText> | ||
| <p> | ||
| <EuiIcon type="faceHappy" /> The colors of this panel are the | ||
| opposite (<strong>inverse</strong>) of the current color mode | ||
| This panel is in <strong>inverse</strong> mode (the opposite of | ||
| the global color mode), and renders a 3rd level nested theme | ||
| provider that inverses color mode yet again. | ||
| </p> | ||
| </EuiText> | ||
| </EuiPanel> | ||
| <EuiSpacer size="m" /> | ||
|
|
||
| <EuiThemeProvider | ||
| colorMode="inverse" | ||
| wrapperProps={{ cloneElement: true }} | ||
| > | ||
| <ThemedChildren> | ||
| <EuiText> | ||
| <p> | ||
| This panel demonstrates the <EuiCode>cloneElement</EuiCode>{' '} | ||
| property. | ||
| </p> | ||
| </EuiText> | ||
| </ThemedChildren> | ||
| </EuiThemeProvider> | ||
| </ThemedChildren> | ||
| </EuiThemeProvider> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const ThemedChildren: FC = ({ children, ...rest }) => { | ||
| const { colorMode: _colorMode } = useEuiTheme(); | ||
| const colorMode = _colorMode.toLowerCase(); | ||
| return ( | ||
| <EuiPanel {...rest}> | ||
| <EuiFlexGroup gutterSize="m"> | ||
| <EuiFlexItem> | ||
| <EuiText> | ||
| <p> | ||
| <EuiIcon type="faceHappy" /> The colors of this panel and its | ||
| portalled content are in <strong>{colorMode}</strong> mode. | ||
| </p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <Popover> | ||
| This popover should render in <strong>{colorMode}</strong> mode. | ||
| </Popover> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <Modal> | ||
| This modal should render in <strong>{colorMode}</strong> mode. | ||
| </Modal> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <Flyout> | ||
| This flyout should render in <strong>{colorMode}</strong> mode. | ||
| </Flyout> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| {children} | ||
| </EuiPanel> | ||
| ); | ||
| }; | ||
|
|
||
| const Popover: FC = ({ children }) => { | ||
| const [isPopoverOpen, setIsPopoverOpen] = useState(false); | ||
| return ( | ||
| <EuiPopover | ||
| isOpen={isPopoverOpen} | ||
| closePopover={() => setIsPopoverOpen(false)} | ||
| button={ | ||
| <EuiButton | ||
| onClick={() => setIsPopoverOpen((isOpen) => !isOpen)} | ||
| fullWidth | ||
| size="s" | ||
| > | ||
| Open popover | ||
| </EuiButton> | ||
| } | ||
| display="block" | ||
| > | ||
| {children} | ||
| </EuiPopover> | ||
| ); | ||
| }; | ||
|
|
||
| const Modal: FC = ({ children }) => { | ||
| const [isModalOpen, setIsModalOpen] = useState(false); | ||
| return ( | ||
| <> | ||
| <EuiButton onClick={() => setIsModalOpen(true)} size="s"> | ||
| Open modal | ||
| </EuiButton> | ||
| {isModalOpen && ( | ||
| <EuiModal onClose={() => setIsModalOpen(false)}> | ||
| <EuiModalHeader> | ||
| <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle> | ||
| </EuiModalHeader> | ||
| <EuiModalBody> | ||
| <EuiText> | ||
| <p>{children}</p> | ||
| </EuiText> | ||
| </EuiModalBody> | ||
| <EuiModalFooter> | ||
| <EuiButton onClick={() => setIsModalOpen(false)} fill> | ||
| Close | ||
| </EuiButton> | ||
| </EuiModalFooter> | ||
| </EuiModal> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const Flyout: FC = ({ children }) => { | ||
| const [isFlyoutOpen, setIsFlyoutOpen] = useState(false); | ||
| return ( | ||
| <> | ||
| <EuiButton onClick={() => setIsFlyoutOpen(true)} size="s"> | ||
| Open flyout | ||
| </EuiButton> | ||
| {isFlyoutOpen && ( | ||
| <EuiFlyout | ||
| ownFocus | ||
| onClose={() => setIsFlyoutOpen(false)} | ||
| aria-labelledby="flyoutTitle" | ||
| > | ||
| <EuiFlyoutHeader hasBorder> | ||
| <EuiTitle size="m"> | ||
| <h2 id="flyoutTitle">Flyout title</h2> | ||
| </EuiTitle> | ||
| </EuiFlyoutHeader> | ||
| <EuiFlyoutBody> | ||
| <EuiText> | ||
| <p>{children}</p> | ||
| </EuiText> | ||
| </EuiFlyoutBody> | ||
| </EuiFlyout> | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.