Skip to content

Commit 7060b3f

Browse files
author
cchaos
committed
Cleanup
1 parent c7c06f2 commit 7060b3f

15 files changed

Lines changed: 178 additions & 156 deletions

File tree

‎src/components/button/_index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// @import 'button';
21
@import 'button_content';
32
@import 'button_empty/index';
43
@import 'button_icon/index';

‎src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,21 @@ exports[`EuiButtonEmpty is rendered 1`] = `
1919
</button>
2020
`;
2121

22+
exports[`EuiButtonEmpty props color accent is rendered 1`] = `
23+
<button
24+
class="euiButtonEmpty css-1gezeiz-empty-accent"
25+
type="button"
26+
>
27+
<span
28+
class="euiButtonContent euiButtonEmpty__content"
29+
>
30+
<span
31+
class="euiButtonEmpty__text"
32+
/>
33+
</span>
34+
</button>
35+
`;
36+
2237
exports[`EuiButtonEmpty props color danger is rendered 1`] = `
2338
<button
2439
class="euiButtonEmpty css-hdemv5-empty-danger"

‎src/components/button/button_empty/button_empty.test.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@
99
import React from 'react';
1010
import { render, mount } from 'enzyme';
1111
import { requiredProps } from '../../../test/required_props';
12+
import { shouldRenderCustomStyles } from '../../../test/internal';
1213

13-
import { EuiButtonEmpty, COLORS, SIZES, FLUSH_TYPES } from './button_empty';
14+
import { EuiButtonEmpty, SIZES, FLUSH_TYPES } from './button_empty';
1415
import { ICON_SIDES } from '../_button_content_deprecated';
16+
import { BUTTON_COLORS } from '../../../themes/amsterdam/global_styling/mixins';
1517

1618
describe('EuiButtonEmpty', () => {
1719
test('is rendered', () => {
@@ -22,6 +24,10 @@ describe('EuiButtonEmpty', () => {
2224
expect(component).toMatchSnapshot();
2325
});
2426

27+
shouldRenderCustomStyles(
28+
<EuiButtonEmpty {...requiredProps}>Content</EuiButtonEmpty>
29+
);
30+
2531
describe('props', () => {
2632
describe('isDisabled', () => {
2733
it('is rendered', () => {
@@ -74,13 +80,19 @@ describe('EuiButtonEmpty', () => {
7480
});
7581

7682
describe('color', () => {
77-
COLORS.forEach((color) => {
83+
BUTTON_COLORS.forEach((color) => {
7884
test(`${color} is rendered`, () => {
7985
const component = render(<EuiButtonEmpty color={color} />);
8086

8187
expect(component).toMatchSnapshot();
8288
});
8389
});
90+
91+
test('ghost is rendered', () => {
92+
const component = render(<EuiButtonEmpty color={'ghost'} />);
93+
94+
expect(component).toMatchSnapshot();
95+
});
8496
});
8597

8698
describe('size', () => {

‎src/components/button/button_empty/button_empty.tsx‎

Lines changed: 15 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -24,27 +24,11 @@ import {
2424
EuiButtonContentType,
2525
} from '../_button_content_deprecated';
2626

27-
import { validateHref } from '../../../services/security/href_validator';
28-
import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
29-
30-
export type EuiButtonEmptyColor =
31-
| 'primary'
32-
| 'danger'
33-
| 'text'
34-
| 'ghost'
35-
| 'success'
36-
| 'warning';
37-
38-
const colorToClassNameMap: { [color in EuiButtonEmptyColor]: string } = {
39-
primary: 'euiButtonEmpty--primary',
40-
danger: 'euiButtonEmpty--danger',
41-
text: 'euiButtonEmpty--text',
42-
ghost: 'euiButtonEmpty--ghost',
43-
success: 'euiButtonEmpty--success',
44-
warning: 'euiButtonEmpty--warning',
45-
};
46-
47-
export const COLORS = keysOf(colorToClassNameMap);
27+
import {
28+
useEuiButtonColorCSS,
29+
_EuiButtonColor,
30+
} from '../../../themes/amsterdam/global_styling/mixins/button';
31+
import { isButtonDisabled } from '../button_display/_button_display';
4832

4933
const sizeToClassNameMap = {
5034
xs: 'euiButtonEmpty--xSmall',
@@ -74,7 +58,7 @@ export interface CommonEuiButtonEmptyProps
7458
/**
7559
* Any of our named colors
7660
*/
77-
color?: EuiButtonEmptyColor;
61+
color?: _EuiButtonColor | 'ghost';
7862
size?: EuiButtonEmptySizes;
7963
/**
8064
* Ensure the text of the button sits flush to the left, right, or both sides of its container
@@ -123,7 +107,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
123107
size = 'm',
124108
flush,
125109
isDisabled: _isDisabled,
126-
disabled: _disabled,
110+
disabled,
127111
isLoading,
128112
href,
129113
target,
@@ -135,31 +119,22 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
135119
isSelected,
136120
...rest
137121
}) => {
138-
const isHrefValid = !href || validateHref(href);
139-
const disabled = _disabled || !isHrefValid;
140-
const isDisabled = _isDisabled || !isHrefValid;
141-
142-
// If in the loading state, force disabled to true
143-
const buttonIsDisabled = isLoading || isDisabled || disabled;
122+
const isDisabled = isButtonDisabled({
123+
isDisabled: _isDisabled || disabled,
124+
href,
125+
isLoading,
126+
});
144127

145128
// eslint-disable-next-line no-nested-ternary
146-
const color = buttonIsDisabled
147-
? 'disabled'
148-
: _color === 'ghost'
149-
? 'text'
150-
: _color;
129+
const color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
151130
const buttonColorStyles = useEuiButtonColorCSS({
152131
display: 'empty',
153132
})[color];
154133

155134
const classes = classNames(
156135
'euiButtonEmpty',
157-
// colorToClassNameMap[color],
158136
size ? sizeToClassNameMap[size] : null,
159137
flush ? flushTypeToClassNameMap[flush] : null,
160-
{
161-
// 'euiButtonEmpty-isDisabled': buttonIsDisabled,
162-
},
163138
className
164139
);
165140

@@ -192,7 +167,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
192167

193168
// <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
194169
// this is a button and piggyback off its disabled styles.
195-
if (href && !buttonIsDisabled) {
170+
if (href && !isDisabled) {
196171
const secureRel = getSecureRelForTarget({ href, target, rel });
197172

198173
return (
@@ -212,7 +187,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
212187

213188
return (
214189
<button
215-
disabled={buttonIsDisabled}
190+
disabled={isDisabled}
216191
className={classes}
217192
css={cssStyles}
218193
type={type}

‎src/components/button/button_empty/index.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,5 @@
66
* Side Public License, v 1.
77
*/
88

9-
export type {
10-
EuiButtonEmptyColor,
11-
EuiButtonEmptyProps,
12-
EuiButtonEmptySizes,
13-
} from './button_empty';
14-
export { COLORS, EuiButtonEmpty } from './button_empty';
9+
export type { EuiButtonEmptyProps, EuiButtonEmptySizes } from './button_empty';
10+
export { EuiButtonEmpty } from './button_empty';

0 commit comments

Comments
 (0)