Skip to content

[EuiButton] Convert to Emotion #5989

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 20 commits into from
Closed

[EuiButton] Convert to Emotion #5989

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
fb72b85
WIP: keys are working
Jun 3, 2022
3ae838c
WIP: All colors working for base and empty buttons
Jun 3, 2022
9d7da0d
WIP: Updating icon button and removing more amsterdam overrides
Jun 4, 2022
7ef4061
WIP: Cleanup and some snaps
Jun 4, 2022
85669ec
WIP: Button groups mostly updated and overrides removed
Jun 4, 2022
4f7a811
Fixing snaps
Jun 6, 2022
b8ba2fd
Merge remote-tracking branch 'origin/main' into emotion/button_colors
Jun 17, 2022
0dd3a51
[EuiButton] Fully converted to Emotion
Jun 17, 2022
c7c06f2
Added some navigation cards to button example page
Jun 17, 2022
7060b3f
Cleanup
Jun 21, 2022
c12dd0e
Moar snaps
Jun 21, 2022
ba8d863
Clean up styles functions and us EuiThemeProvider around ghost buttons
Jun 24, 2022
f9c17b3
Merge remote-tracking branch 'origin/main' into emotion/button_colors
Jun 24, 2022
ad78752
Merge remote-tracking branch origin/main into emotion/button_colors
Jun 27, 2022
ee7c0a7
Cleanup and CL
Jun 27, 2022
f425cf5
Merge remote-tracking branch 'origin/main' into emotion/button_colors
Jun 29, 2022
cbeb27a
Fixed button panel links and updated bottom bar usages of `ghost` to …
Jun 29, 2022
36531ee
Merge branch 'elastic:main' into emotion/button_colors
cchaos Jul 26, 2022
6d91a09
[Emotion] Convert global `className` utilities (#6124)
constancecchen Aug 16, 2022
4326a56
Merge remote-tracking branch 'upstream/main' into emotion/button_colors
elizabetdev Aug 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src-docs/src/views/bottom_bar/bottom_bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ export default () => {
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="help">
<EuiButton color="text" size="s" iconType="help">
Help
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="user">
<EuiButton color="text" size="s" iconType="user">
Add user
</EuiButton>
</EuiFlexItem>
Expand All @@ -39,7 +39,7 @@ export default () => {
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="ghost" size="s" iconType="cross">
<EuiButtonEmpty color="text" size="s" iconType="cross">
Discard
</EuiButtonEmpty>
</EuiFlexItem>
Expand Down
100 changes: 92 additions & 8 deletions src-docs/src/views/button/button_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ import {
EuiCallOut,
EuiLink,
EuiText,
EuiFlexGroup,
EuiFlexItem,
EuiCard,
EuiPanel,
EuiSpacer,
} from '../../../../src/components';

import { EuiButtonGroupOptionProps } from '!!prop-loader!../../../../src/components/button/button_group/button_group';
Expand Down Expand Up @@ -256,6 +261,81 @@ export const ButtonExample = {
),
sections: [
{
text: (
<>
<EuiSpacer size="xl" />
<EuiFlexGroup wrap>
<EuiFlexItem>
<EuiCard
hasBorder
href="/#/navigation/button#basic-button"
image={
<EuiPanel color="subdued">
<EuiPanel color="subdued">
<EuiButton fill>Primary action</EuiButton>
</EuiPanel>
</EuiPanel>
}
title="EuiButton"
titleSize="xs"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
hasBorder
href="/#/navigation/button#basic-button"
image={
<EuiPanel color="subdued">
<EuiPanel color="subdued">
<EuiButton>Secondary action</EuiButton>
</EuiPanel>
</EuiPanel>
}
title="EuiButton"
titleSize="xs"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
hasBorder
href="/#/navigation/button#empty-button"
image={
<EuiPanel color="subdued">
<EuiPanel color="subdued">
<EuiButtonEmpty>Tertiary action</EuiButtonEmpty>
</EuiPanel>
</EuiPanel>
}
title="EuiButtonEmpty"
titleSize="xs"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
hasBorder
href="/#/navigation/button#icon-buttons"
image={
<EuiPanel color="subdued">
<EuiPanel color="subdued">
<EuiButtonIcon
display="base"
size="m"
iconType="refresh"
aria-label="Button icon example with refresh icon"
/>
</EuiPanel>
</EuiPanel>
}
title="EuiButtonIcon"
titleSize="xs"
/>
</EuiFlexItem>
</EuiFlexGroup>
</>
),
},
{
title: 'Basic button',
source: [
{
type: GuideSectionTypes.JS,
Expand Down Expand Up @@ -624,8 +704,7 @@ export const ButtonExample = {
demoPanelProps: { color: 'subdued' },
},
{
title: 'Ghost',
ghostBackground: true,
title: 'Ghost vs. dark mode',
source: [
{
type: GuideSectionTypes.JS,
Expand All @@ -634,19 +713,24 @@ export const ButtonExample = {
],
text: (
<p>
For buttons on dark color backgrounds, you can pass{' '}
<EuiCode language="js">{'color="ghost"'}</EuiCode> to any of the
button components on this page. These should be used extremely rarely,
and are only for placing buttons on top of dark or image-based
backgrounds. A good example of their use is in the{' '}
For buttons on dark color backgrounds, it is recommended to wrap the
entire area in{' '}
<EuiCode language="js">
{'<EuiThemeProvider colorMode="dark">'}
</EuiCode>{' '}
to invert all colors to dark mode. The legacy{' '}
<EuiCode language="js">{'color="ghost"'}</EuiCode> now uses this
method and is set for deprecation. An example usage of inverted
buttons is in combination with{' '}
<Link to="/layout/bottom-bar">
<strong>EuiBottomBar</strong>
</Link>{' '}
component.
which already wraps its children in dark mode.
</p>
),
snippet: buttonGhostSnippet,
demo: <ButtonGhost />,
demoPanelProps: { paddingSize: 'none' },
},
],
guidelines: <Guidelines />,
Expand Down
110 changes: 58 additions & 52 deletions src-docs/src/views/button/button_ghost.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import {
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
} from '../../../../src/components';
import { EuiThemeProvider } from '../../../../src/services';

export default () => {
const [toggle0On, setToggle0On] = useState(false);
Expand All @@ -16,63 +18,67 @@ export default () => {
};

return (
<EuiFlexGroup wrap gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButton color="ghost" onClick={() => {}}>
Ghost
</EuiButton>
</EuiFlexItem>
<EuiThemeProvider colorMode="dark">
<EuiPanel borderRadius="none" hasShadow={false}>
<EuiFlexGroup wrap gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButton color="text" onClick={() => {}}>
Ghost
</EuiButton>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButton
fill
color="ghost"
size="s"
iconType="check"
onClick={() => {}}
>
Filled
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
fill
color="text"
size="s"
iconType="check"
onClick={() => {}}
>
Filled
</EuiButton>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty size="s" color="ghost" onClick={() => {}}>
small
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty size="s" color="text" onClick={() => {}}>
small
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonIcon
size="s"
color="ghost"
iconType="user"
onClick={() => {}}
aria-label="Your account"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
size="s"
color="text"
iconType="user"
onClick={() => {}}
aria-label="Your account"
/>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButton color="ghost" isLoading fill size="s">
Loading&hellip;
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="text" isLoading fill size="s">
Loading&hellip;
</EuiButton>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButton color="ghost" isLoading>
Loading&hellip;
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="text" isLoading>
Loading&hellip;
</EuiButton>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButton
color="ghost"
isSelected={toggle0On}
fill={toggle0On}
onClick={onToggle0Change}
>
Toggle me
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButton
color="text"
isSelected={toggle0On}
fill={toggle0On}
onClick={onToggle0Change}
>
Toggle me
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiThemeProvider>
);
};
8 changes: 4 additions & 4 deletions src-docs/src/views/theme/color/contrast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,10 +338,10 @@ export default () => {
<ColorSectionJS
key={color}
color={color as keyof _EuiThemeColorsMode}
colorValue={euiButtonColor(
color as _EuiButtonColor,
euiTheme
)}
colorValue={
euiButtonColor(euiTheme, color as _EuiButtonColor)
.backgroundColor
}
hookName="useEuiButtonColorCSS"
minimumContrast={contrastValue}
showTextVariants={showTextVariants}
Expand Down
Loading