Skip to content
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

Jump to bottom

[Emotion] Convert EuiButton #6150

Merged
merged 4 commits into from
Aug 23, 2022
Merged

[Emotion] Convert EuiButton #6150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e8f7429
Converted `EuiButton` to emotion
miukimiu Aug 22, 2022
bb9f86a
Adding CL
miukimiu Aug 22, 2022
6fa9d1e
Improving example panel to have color `subdued`. Removing wrong `.scs…
miukimiu Aug 22, 2022
e24cf88
Merge remote-tracking branch 'upstream/main' into emotion-buttons
miukimiu Aug 23, 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
2 changes: 1 addition & 1 deletion src-docs/src/views/bottom_bar/bottom_bar_displacement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default () => {
<EuiFlexItem grow={false}>
<EuiButton
onClick={() => setToggleIdSelected(null)}
color="ghost"
color="text"
size="s"
iconType="cross"
>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/bottom_bar/playground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const bottomBarConfig = () => {

propsToUse.children = {
type: PropTypes.ReactNode,
value: '<EuiButton color="ghost">Save</EuiButton>',
value: '<EuiButton color="text">Save</EuiButton>',
};

propsToUse.position = {
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" borderRadius="none">
<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" borderRadius="none">
<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" borderRadius="none">
<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" borderRadius="none">
<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} color="subdued">
<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
4 changes: 2 additions & 2 deletions src-docs/src/views/theme/customizing/values.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export default () => {
<>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="ghost"
color="text"
iconType="cross"
onClick={clearOverrides}
>
Expand All @@ -157,7 +157,7 @@ export default () => {
<span>
<EuiButton
onClick={() => setJsonFlyoutIsOpen(true)}
color="ghost"
color="text"
>
View theme JSON
</EuiButton>
Expand Down
Loading