Skip to content

Commit

Permalink
[EuiButtonEmpty] Adjust font size in Amsterdam and add more colors (#…
Browse files Browse the repository at this point in the history 
…4325)
  • Loading branch information
@andreadelrio
andreadelrio authored Dec 3, 2020
1 parent 76a1580 commit a1d469d
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 222 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Adjusted the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
- Added `success` and `warning` colors to `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))

**Bug fixes**

Expand All @@ -10,6 +11,7 @@
**Theme: Amsterdam**

- Removed the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
- Reduced font size for `xs` size in `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))

## [`30.5.1`](https://github.com/elastic/eui/tree/v30.5.1)

Expand Down
260 changes: 41 additions & 219 deletions src-docs/src/views/button/button_empty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,52 @@ import {
EuiFlexItem,
} from '../../../../src/components/';

const buttons = ['primary', 'success', 'warning', 'danger', 'text', 'disabled'];

export default () => (
<div>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={() => {}}>Primary</EuiButtonEmpty>
</EuiFlexItem>

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

<EuiFlexItem grow={false}>
<EuiButtonEmpty size="xs" onClick={() => {}}>
extra small
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
{buttons.map((value) => (
<>
<EuiFlexGroup gutterSize="s" key={value} alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
style={{
textTransform: 'capitalize',
}}
isDisabled={value === 'disabled' ? true : false}
color={value !== 'disabled' ? value : 'primary'}
onClick={() => {}}>
{value}
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
isDisabled={value === 'disabled' ? true : false}
color={value !== 'disabled' ? value : 'primary'}
size="s"
onClick={() => {}}>
small
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
isDisabled={value === 'disabled' ? true : false}
color={value !== 'disabled' ? value : 'primary'}
size="xs"
onClick={() => {}}>
extra small
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</>
))}

<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={() => {}} iconType="arrowDown">
Primary
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty size="s" onClick={() => {}} iconType="arrowDown">
small
Icon left
</EuiButtonEmpty>
</EuiFlexItem>

Expand All @@ -44,155 +60,7 @@ export default () => (
onClick={() => {}}
iconType="arrowDown"
iconSide="right">
Primary
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
onClick={() => {}}
iconType="arrowDown"
iconSide="right">
small
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="danger" onClick={() => {}}>
Danger
</EuiButtonEmpty>
</EuiFlexItem>

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

<EuiFlexItem grow={false}>
<EuiButtonEmpty color="danger" size="xs" onClick={() => {}}>
extra small
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="danger" onClick={() => {}} iconType="arrowDown">
Danger
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="danger"
size="s"
onClick={() => {}}
iconType="arrowDown">
small
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="danger"
onClick={() => {}}
iconType="arrowDown"
iconSide="right">
Danger
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="danger"
size="s"
onClick={() => {}}
iconType="arrowDown"
iconSide="right">
small
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="text" onClick={() => {}}>
Text
</EuiButtonEmpty>
</EuiFlexItem>

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

<EuiFlexItem grow={false}>
<EuiButtonEmpty color="text" size="xs" onClick={() => {}}>
extra small
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="text" onClick={() => {}} iconType="arrowDown">
Text
</EuiButtonEmpty>
</EuiFlexItem>

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

<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="text"
onClick={() => {}}
iconType="arrowDown"
iconSide="right">
Text
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="text"
size="s"
onClick={() => {}}
iconType="arrowDown"
iconSide="right">
small
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="danger" onClick={() => {}} isDisabled>
Disabled
</EuiButtonEmpty>
</EuiFlexItem>

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

<EuiFlexItem grow={false}>
<EuiButtonEmpty color="danger" size="xs" onClick={() => {}} isDisabled>
extra small
Icon right
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
Expand All @@ -210,51 +78,5 @@ export default () => (
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>

<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="danger"
onClick={() => {}}
iconType="arrowDown"
isDisabled>
Disabled
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="danger"
size="s"
onClick={() => {}}
iconType="arrowDown"
isDisabled>
small
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="danger"
onClick={() => {}}
iconType="arrowDown"
iconSide="right"
isDisabled>
Disabled
</EuiButtonEmpty>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="danger"
size="s"
onClick={() => {}}
iconType="arrowDown"
iconSide="right"
isDisabled>
small
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</div>
);
30 changes: 30 additions & 0 deletions src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,21 @@ exports[`EuiButtonEmpty props color primary is rendered 1`] = `
</button>
`;

exports[`EuiButtonEmpty props color success is rendered 1`] = `
<button
class="euiButtonEmpty euiButtonEmpty--success"
type="button"
>
<span
class="euiButtonContent euiButtonEmpty__content"
>
<span
class="euiButtonEmpty__text"
/>
</span>
</button>
`;

exports[`EuiButtonEmpty props color text is rendered 1`] = `
<button
class="euiButtonEmpty euiButtonEmpty--text"
Expand All @@ -79,6 +94,21 @@ exports[`EuiButtonEmpty props color text is rendered 1`] = `
</button>
`;

exports[`EuiButtonEmpty props color warning is rendered 1`] = `
<button
class="euiButtonEmpty euiButtonEmpty--warning"
type="button"
>
<span
class="euiButtonContent euiButtonEmpty__content"
>
<span
class="euiButtonEmpty__text"
/>
</span>
</button>
`;

exports[`EuiButtonEmpty props contentProps is rendered 1`] = `
<button
class="euiButtonEmpty euiButtonEmpty--primary"
Expand Down
6 changes: 4 additions & 2 deletions src/components/button/button_empty/_button_empty.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,13 @@

// Modifier naming and colors.
$euiButtonEmptyTypes: (
primary: $euiColorPrimary,
danger: $euiColorDanger,
primary: $euiColorPrimaryText,
danger: $euiColorDangerText,
disabled: $euiButtonColorDisabledText,
ghost: $euiColorGhost,
text: $euiTextColor,
success: $euiColorSecondaryText,
warning: $euiColorWarningText,
);

// Create button modifiers based upon the map.
Expand Down
10 changes: 9 additions & 1 deletion src/components/button/button_empty/button_empty.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,21 @@ import {
EuiButtonContentType,
} from '../button_content';

export type EuiButtonEmptyColor = 'primary' | 'danger' | 'text' | 'ghost';
export type EuiButtonEmptyColor =
| 'primary'
| 'danger'
| 'text'
| 'ghost'
| 'success'
| 'warning';

const colorToClassNameMap: { [color in EuiButtonEmptyColor]: string } = {
primary: 'euiButtonEmpty--primary',
danger: 'euiButtonEmpty--danger',
text: 'euiButtonEmpty--text',
ghost: 'euiButtonEmpty--ghost',
success: 'euiButtonEmpty--success',
warning: 'euiButtonEmpty--warning',
};

export const COLORS = keysOf(colorToClassNameMap);
Expand Down
4 changes: 4 additions & 0 deletions src/themes/eui-amsterdam/overrides/_button_empty.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
// so that they don't appear completely rounded
border-radius: $euiBorderRadius * .667;
}

&.euiButtonEmpty--xSmall {
font-size: $euiFontSizeXS;
}
}

@each $name, $color in $euiButtonTypes {
Expand Down

0 comments on commit a1d469d

Please sign in to comment.