Skip to content

Commit 2e836f6

Browse files
elizabetdevcchaos
elizabetdev
and
cchaos
authored
[Emotion] Convert EuiFacetButton and EuiFacetGroup (#5878)
* Convert `EuiFacetButton` and `EuiFacetGroup` to emotion * Deleting `.scss` files * Moving buttons mixins to functions * Removed unused mixin. Adding CL. Improving gutter size func. * Improving example * Better code for calling `euiTheme` * Renaming `contentElementStyles` to `contentElementsStyles` * Fix typo. CL. * Better gap styles * Adding `euiCanAnimate` for transitions * Moving button functions and using `euiLinkFocusCSS` * Typo * Adding `logicalCSS` * Adding new EuiButtonDisplay * Adding `logicalTextAlignCSS` * Removing `EuiFlexGroup` * Better styles * Better `isDisabled` styles * Text`isSelected` style * Identantion * CL * Improving regex in render_custom_styles * Deprecating EuiButtonDisplay and EuiButtonContent components * Adding `euiLoadingSpinnerBorderColorsCSS` mixin * Adding `_buttonSize()` and renaming files to contain `_deprecated` * Keeping `EuiButtonDisplay_Deprecated` in button file * Improving text * Fixing error due to `euiFontSize` being updated in main * Preventing test to get `EuiButtonDisplay_Deprecated` * Renaming deprecated components * Addressing PR review * Added new `color` prop to `EuiLoadingSpinner` * Removing unnecessary prop comment * Making `EuiLoadingSpinnerProps['color']` show in props table * Better props table for `EuiLoadingSpinnerColor` * Update src/components/loading/loading_spinner.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src/components/loading/loading_spinner.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update upcoming_changelogs/5878.md Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Update src/components/button/button_display/_button_display.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * Moving CL entry out of `CSS-in-JS` Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
1 parent fcd96f3 commit 2e836f6

49 files changed

Lines changed: 768 additions & 304 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src-docs/src/views/facet/facet_layout.js‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import {
55
EuiFacetGroup,
66
EuiIcon,
77
EuiAvatar,
8-
EuiTitle,
9-
EuiSpacer,
108
} from '../../../../src/components';
119

1210
import { euiPaletteColorBlind } from '../../../../src/services';
@@ -146,22 +144,8 @@ export default () => {
146144
};
147145

148146
return (
149-
<div>
150-
<EuiTitle size="s">
151-
<h3>Vertical</h3>
152-
</EuiTitle>
153-
<EuiFacetGroup style={{ maxWidth: 200 }}>
154-
{facets('Vertical')}
155-
</EuiFacetGroup>
156-
157-
<EuiSpacer />
158-
159-
<EuiTitle size="s">
160-
<h3>Horizontal and large gutter</h3>
161-
</EuiTitle>
162-
<EuiFacetGroup layout="horizontal" gutterSize="l">
163-
{facets('Horizontal')}
164-
</EuiFacetGroup>
165-
</div>
147+
<EuiFacetGroup style={{ maxWidth: 200 }}>
148+
{facets('Vertical')}
149+
</EuiFacetGroup>
166150
);
167151
};

src-docs/src/views/loading/loading_example.js renamed to src-docs/src/views/loading/loading_example.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React from 'react';
1+
import React, { FunctionComponent } from 'react';
22
import { Link } from 'react-router-dom';
3-
3+
// @ts-ignore Importing from JS
44
import { GuideSectionTypes } from '../../components';
55

66
import {
@@ -12,14 +12,22 @@ import {
1212
EuiLoadingChart,
1313
EuiLoadingContent,
1414
} from '../../../../src/components';
15+
1516
import {
1617
loadingElasticConfig,
1718
loadingChartConfig,
1819
loadingLogoConfig,
1920
loadingSpinnerConfig,
2021
loadingContentConfig,
22+
// @ts-ignore Importing from JS
2123
} from './playground';
2224

25+
import { EuiLoadingSpinnerColor as EuiLoadingSpinnerColorProps } from '../../../../src/components/loading/loading_spinner';
26+
27+
export const EuiLoadingSpinnerColor: FunctionComponent<EuiLoadingSpinnerColorProps> = () => (
28+
<div />
29+
);
30+
2331
import LoadingLogo from './loading_kibana';
2432
const loadingLogoSource = require('!!raw-loader!./loading_kibana');
2533

@@ -129,7 +137,7 @@ export const LoadingExample = {
129137
loading contexts.
130138
</p>
131139
),
132-
props: { EuiLoadingSpinner },
140+
props: { EuiLoadingSpinner, EuiLoadingSpinnerColor },
133141
demo: <LoadingSpinner />,
134142
snippet: '<EuiLoadingSpinner size="m" />',
135143
playground: loadingSpinnerConfig,

‎src/components/accordion/__snapshots__/accordion.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -862,7 +862,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
862862
>
863863
<span
864864
aria-label="Loading"
865-
class="euiLoadingSpinner css-155ohbx-euiLoadingSpinner-m"
865+
class="euiLoadingSpinner css-192zz00-euiLoadingSpinner-m"
866866
role="progressbar"
867867
/>
868868
</div>
@@ -921,7 +921,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
921921
>
922922
<span
923923
aria-label="Loading"
924-
class="euiLoadingSpinner css-155ohbx-euiLoadingSpinner-m"
924+
class="euiLoadingSpinner css-192zz00-euiLoadingSpinner-m"
925925
role="progressbar"
926926
/>
927927
</div>
@@ -939,7 +939,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
939939
>
940940
<span
941941
aria-label="Loading"
942-
class="euiLoadingSpinner euiAccordion__spinner css-1v1n0rh-euiLoadingSpinner-m-euiAccordion__spinner"
942+
class="euiLoadingSpinner euiAccordion__spinner css-1fekohn-euiLoadingSpinner-m-euiAccordion__spinner"
943943
role="progressbar"
944944
/>
945945
<div

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,7 @@ exports[`EuiButton props isLoading is rendered 1`] = `
313313
>
314314
<span
315315
aria-label="Loading"
316-
class="euiLoadingSpinner euiButtonContent__spinner css-155ohbx-euiLoadingSpinner-m"
316+
class="euiLoadingSpinner euiButtonContent__spinner css-192zz00-euiLoadingSpinner-m"
317317
role="progressbar"
318318
/>
319319
<span

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ exports[`EuiButtonContent props isLoading is rendered 1`] = `
5252
>
5353
<span
5454
aria-label="Loading"
55-
class="euiLoadingSpinner euiButtonContent__spinner css-155ohbx-euiLoadingSpinner-m"
55+
class="euiLoadingSpinner euiButtonContent__spinner css-192zz00-euiLoadingSpinner-m"
5656
role="progressbar"
5757
/>
5858
<span />
@@ -65,7 +65,7 @@ exports[`EuiButtonContent props isLoading replaces iconType with spinner 1`] = `
6565
>
6666
<span
6767
aria-label="Loading"
68-
class="euiLoadingSpinner euiButtonContent__spinner css-155ohbx-euiLoadingSpinner-m"
68+
class="euiLoadingSpinner euiButtonContent__spinner css-192zz00-euiLoadingSpinner-m"
6969
role="progressbar"
7070
/>
7171
<span />

src/components/button/button_content.tsx renamed to src/components/button/_button_content_deprecated.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,10 @@ export const ICON_SIDES = keysOf(iconSideToClassNameMap);
2626
export type EuiButtonContentType = HTMLAttributes<HTMLSpanElement>;
2727

2828
/**
29-
* *INTERNAL ONLY*
29+
* *INTERNAL ONLY / DEPRECATED*
3030
* This component is simply a helper component for reuse within other button components
31+
* This component has been deprecated in favor of the new EuiButtonDisplayContent
32+
* that can be found in `src/components/button/button_display/_button_display_content.tsx`.
3133
*/
3234
export interface EuiButtonContentProps extends CommonProps {
3335
/**
@@ -40,7 +42,8 @@ export interface EuiButtonContentProps extends CommonProps {
4042
iconSide?: ButtonContentIconSide;
4143
isLoading?: boolean;
4244
/**
43-
* Object of props passed to the <span/> wrapping the content's text/children only (not icon)
45+
* Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
46+
* It doesn't apply to the icon.
4447
*/
4548
textProps?: HTMLAttributes<HTMLSpanElement> &
4649
CommonProps & {
@@ -50,7 +53,7 @@ export interface EuiButtonContentProps extends CommonProps {
5053
iconSize?: 's' | 'm';
5154
}
5255

53-
export const EuiButtonContent: FunctionComponent<
56+
export const EuiButtonContentDeprecated: FunctionComponent<
5457
EuiButtonContentType & EuiButtonContentProps
5558
> = ({
5659
children,

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import { render, mount } from 'enzyme';
1111
import { requiredProps } from '../../test/required_props';
1212

1313
import { EuiButton, COLORS, SIZES } from './button';
14-
import { ICON_SIDES } from './button_content';
14+
15+
import { ICON_SIDES } from './_button_content_deprecated';
1516

1617
describe('EuiButton', () => {
1718
test('is rendered', () => {

‎src/components/button/button.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ import { getSecureRelForTarget } from '../../services';
3030
import {
3131
EuiButtonContentProps,
3232
EuiButtonContentType,
33-
EuiButtonContent,
34-
} from './button_content';
33+
EuiButtonContentDeprecated as EuiButtonContent,
34+
} from './_button_content_deprecated';
3535
import { validateHref } from '../../services/security/href_validator';
3636

3737
export type ButtonColor =
@@ -174,7 +174,8 @@ export const EuiButton: FunctionComponent<Props> = ({
174174
}
175175

176176
return (
177-
<EuiButtonDisplay
177+
// eslint-disable-next-line react/jsx-pascal-case
178+
<EuiButtonDisplayDeprecated
178179
element={element}
179180
baseClassName="euiButton"
180181
ref={buttonRef}
@@ -199,13 +200,19 @@ export type EuiButtonDisplayProps = EuiButtonProps &
199200
};
200201

201202
/**
203+
* *DEPRECATED*
202204
* EuiButtonDisplay is an internal-only component used for displaying
203205
* any element as a button.
204206
* NOTE: This component *must* be below EuiButton in the file and
205207
* EuiButton must also set a displayName for react-docgen-typescript
206208
* to correctly set EuiButton's docgenInfo and display a props table.
209+
* This component has been deprecated in favor of the new EuiButtonDisplay
210+
* that can be found in `src/components/button/button_display/_button_display.tsx`
207211
*/
208-
export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
212+
export const EuiButtonDisplayDeprecated = forwardRef<
213+
HTMLElement,
214+
EuiButtonDisplayProps
215+
>(
209216
(
210217
{
211218
element = 'button',
@@ -295,4 +302,4 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
295302
);
296303
}
297304
);
298-
EuiButtonDisplay.displayName = 'EuiButtonDisplay';
305+
EuiButtonDisplayDeprecated.displayName = 'EuiButtonDisplay';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import React from 'react';
1010
import { render } from 'enzyme';
1111
import { requiredProps } from '../../test/required_props';
1212

13-
import { EuiButtonContent } from './button_content';
13+
import { EuiButtonContentDeprecated as EuiButtonContent } from './_button_content_deprecated';
1414

1515
describe('EuiButtonContent', () => {
1616
test('is rendered', () => {

‎src/components/button/button_display/_button_display.styles.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
import { css } from '@emotion/react';
9+
import { UseEuiTheme } from '../../../services';
10+
import {
11+
euiFontSize,
12+
logicalCSS,
13+
logicalTextAlignStyle,
14+
} from '../../../global_styling';
15+
16+
// Provides a solid reset and base for handling sizing layout
17+
// Does not include any visual styles
18+
export const euiButtonBaseCSS = () => {
19+
return `
20+
display: inline-block;
21+
appearance: none;
22+
cursor: pointer;
23+
${logicalTextAlignStyle('center')};
24+
white-space: nowrap;
25+
${logicalCSS('max-width', '100%')};
26+
vertical-align: middle;
27+
`;
28+
};
29+
30+
const _buttonSize = (size: string) => {
31+
return `
32+
${logicalCSS('height', size)};
33+
// prevents descenders from getting cut off
34+
line-height: ${size};
35+
`;
36+
};
37+
38+
export const euiButtonDisplayStyles = (
39+
euiThemeContext: UseEuiTheme,
40+
minWidth: string
41+
) => {
42+
const { euiTheme } = euiThemeContext;
43+
44+
return {
45+
// Base
46+
euiButtonDisplay: css`
47+
${euiButtonBaseCSS()};
48+
${minWidth && logicalCSS('min-width', minWidth)};
49+
`,
50+
// States
51+
isDisabled: css`
52+
cursor: not-allowed;
53+
`,
54+
fullWidth: css`
55+
display: block;
56+
width: 100%;
57+
`,
58+
// Sizes
59+
xs: css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs')),
60+
s: css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's')),
61+
m: css(_buttonSize(euiTheme.size.xxl), euiFontSize(euiThemeContext, 's')),
62+
};
63+
};

0 commit comments

Comments
 (0)