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

[Emotion] Convert EuiBadgeGroup, EuiBetaBadge, and EuiNotificationBadge #6258

Merged
merged 8 commits into from
Sep 23, 2022
Merged

[Emotion] Convert EuiBadgeGroup, EuiBetaBadge, and EuiNotificationBadge #6258

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
441dec2
Convert EuiBadgeGroup to Emotion
cee-chen Sep 21, 2022
9c99675
Convert EuiBetaBadge to Emotion
cee-chen Sep 21, 2022
0aa36ae
[docs] beta badge docs improvement
cee-chen Sep 21, 2022
6ac237d
Convert EuiNotificationBadge to Emotion
cee-chen Sep 21, 2022
3175424
changelog
cee-chen Sep 21, 2022
feb1bb6
[PR feedback] euiTextTruncate
cee-chen Sep 22, 2022
e3ddcd0
[PR feedback] Create internal color util for badge colors
cee-chen Sep 22, 2022
9f81e53
[PR feedback] Remove ` `s from beta badge docs
cee-chen Sep 22, 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
2 changes: 1 addition & 1 deletion src-docs/src/views/badge/badge_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export const BadgeExample = {
title: 'Beta badge type',
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: betaBadgeSource,
},
],
Expand Down
41 changes: 25 additions & 16 deletions src-docs/src/views/badge/beta_badge.js → src-docs/src/views/badge/beta_badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react';
import { css } from '@emotion/react';

import { EuiBetaBadge, EuiSpacer, EuiTitle } from '../../../../src/components';

const colors = ['hollow', 'accent', 'subdued'];
const colors = ['hollow', 'accent', 'subdued'] as const;

export default () => (
<div>
<>
{colors.map((item, index) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of having the horizontal spaces between each EuiBetaBadge with a &emsp; what do you think of wrapping the colors.map() with a div with a gap: 0.5rem;?

<div
  css={css`
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  `}
>
  {colors.map((item, index) => (
    <div key={index}>
      <EuiBetaBadge />
      <EuiBetaBadge />
      <EuiBetaBadge />
      <EuiSpacer size="s" />
    </div>
  ))}
</div>;

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this will work quite the way you expect because the gap will only apply to the immediate child divs and not to the grandchild EuiBetaBadges (meaning there will no longer be a slight horizontal gap).

To get this working with gap and without the &emsp;s I think we should use a grid (which I'm happy to play around with!)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

9f81e53

<div key={index}>
<EuiBetaBadge
Expand Down Expand Up @@ -41,20 +42,28 @@ export default () => (
/>
</h3>
</EuiTitle>
<EuiTitle size="xxs">
<h4>Clickable beta badges</h4>
<EuiSpacer />
<EuiTitle size="xs">
<h3>Clickable beta badges</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiBetaBadge
label="Lens"
iconType="lensApp"
onClick={() => alert('Goes to Lens')}
/>
&emsp;
<EuiBetaBadge
label="Basic"
href="http://www.elastic.co/subscriptions"
target="_blank"
/>
</div>
<div
css={css`
display: flex;
align-items: center;
gap: 0.5rem;
`}
>
<EuiBetaBadge
label="Lens"
iconType="lensApp"
onClick={() => alert('Goes to Lens')}
/>
Comment on lines +60 to +64
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed in CodeSandbox that still has the .scss this example doesn't get a circular EuiBetaBadge:

Screenshot 2022-09-22 at 11 54 24

If I copy the new styles and add them in Chrome developer tool the beta badge doesn't get circular. So not sure if this issue keeps persisting with the new styles.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CodeSandbox doesn't update until our releases, so I can't say for sure. If the staging/local example works, I think this should work.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you look at the current version (https://elastic.github.io/eui/#/display/badge#beta-badge-type) it works in staging/local but it looks different in CodeSandbox. The beta badge with the lens icon doesn't get circular.

So I'm not sure this problem will persist. But we can take a look after this PR is merged and there's a new release.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's wait until the release, it's a little too hard for me to debug right now with the different styles. If it persists after release I think I may have a solution however!

<EuiBetaBadge
label="Basic"
href="http://www.elastic.co/subscriptions"
target="_blank"
/>
</div>
</>
);
3 changes: 0 additions & 3 deletions src/components/badge/_index.scss
View file
Open in desktop

This file was deleted.

22 changes: 9 additions & 13 deletions src/components/badge/badge_group/__snapshots__/badge_group.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,43 +2,39 @@

exports[`EuiBadgeGroup gutterSize none is rendered 1`] = `
<div
class="euiBadgeGroup"
class="euiBadgeGroup emotion-euiBadgeGroup-none"
/>
`;

exports[`EuiBadgeGroup gutterSize s is rendered 1`] = `
<div
class="euiBadgeGroup euiBadgeGroup--gutterSmall"
class="euiBadgeGroup emotion-euiBadgeGroup-s"
/>
`;

exports[`EuiBadgeGroup gutterSize xs is rendered 1`] = `
<div
class="euiBadgeGroup euiBadgeGroup--gutterExtraSmall"
class="euiBadgeGroup emotion-euiBadgeGroup-xs"
/>
`;

exports[`EuiBadgeGroup is rendered 1`] = `
<div
aria-label="aria-label"
class="euiBadgeGroup euiBadgeGroup--gutterExtraSmall testClass1 testClass2"
class="euiBadgeGroup testClass1 testClass2 emotion-euiBadgeGroup-xs"
data-test-subj="test subject string"
>
<span
class="euiBadgeGroup__item"
class="euiBadge emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
>
<span
class="euiBadge emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
class="euiBadge__content emotion-euiBadge__content"
>
<span
class="euiBadge__content emotion-euiBadge__content"
class="euiBadge__text emotion-euiBadge__text"
>
<span
class="euiBadge__text emotion-euiBadge__text"
>
Content
</span>
Content
</span>
</span>
</span>
Expand Down
23 changes: 0 additions & 23 deletions src/components/badge/badge_group/_badge_group.scss
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/components/badge/badge_group/_index.scss
View file
Open in desktop

This file was deleted.

34 changes: 34 additions & 0 deletions src/components/badge/badge_group/badge_group.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { css } from '@emotion/react';
import { logicalCSS } from '../../../global_styling';
import { UseEuiTheme } from '../../../services';

export const euiBadgeGroupStyles = ({ euiTheme }: UseEuiTheme) => {
return {
euiBadgeGroup: css`
display: inline-flex;
flex-wrap: wrap;
${logicalCSS('max-width', '100%')}

// Override the .euiBadge + .euiBadge CSS in badge.styles.ts
.euiBadge {
${logicalCSS('margin-left', 0)}
}
`,
// Gutter sizes
none: css``,
s: css`
gap: ${euiTheme.size.s};
`,
xs: css`
gap: ${euiTheme.size.xs};
`,
};
};
3 changes: 3 additions & 0 deletions src/components/badge/badge_group/badge_group.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../../test/required_props';
import { shouldRenderCustomStyles } from '../../../test/internal';

import { EuiBadge } from '../badge';
import { EuiBadgeGroup, GUTTER_SIZES } from './badge_group';

describe('EuiBadgeGroup', () => {
shouldRenderCustomStyles(<EuiBadgeGroup />);

test('is rendered', () => {
const component = render(
<EuiBadgeGroup {...requiredProps}>
Expand Down
33 changes: 14 additions & 19 deletions src/components/badge/badge_group/badge_group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,21 @@

import React, { forwardRef, HTMLAttributes, Ref, ReactNode } from 'react';
import classNames from 'classnames';
import { CommonProps, keysOf } from '../../common';
import { CommonProps } from '../../common';
import { useEuiTheme } from '../../../services';

const gutterSizeToClassNameMap = {
none: null,
xs: 'euiBadgeGroup--gutterExtraSmall',
s: 'euiBadgeGroup--gutterSmall',
};
import { euiBadgeGroupStyles } from './badge_group.styles';

export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
type BadgeGroupGutterSize = keyof typeof gutterSizeToClassNameMap;
export const GUTTER_SIZES = ['none', 'xs', 's'] as const;
type BadgeGroupGutterSize = typeof GUTTER_SIZES[number];

export interface EuiBadgeGroupProps {
/**
* Space between badges
*/
gutterSize?: BadgeGroupGutterSize;
/**
* Should be a list of EuiBadge's but can also be any other element
* Will apply an extra class to add spacing
* Should be a list of `EuiBadge`s, but can also be any other element
*/
children?: ReactNode;
}
Expand All @@ -39,17 +35,16 @@ export const EuiBadgeGroup = forwardRef<
{ children, className, gutterSize = 'xs', ...rest },
ref: Ref<HTMLDivElement>
) => {
const classes = classNames(
'euiBadgeGroup',
gutterSizeToClassNameMap[gutterSize as BadgeGroupGutterSize],
className
);
const euiTheme = useEuiTheme();

const styles = euiBadgeGroupStyles(euiTheme);
const cssStyles = [styles.euiBadgeGroup, styles[gutterSize]];

const classes = classNames('euiBadgeGroup', className);

return (
<div className={classes} ref={ref} {...rest}>
{React.Children.map(children, (child: ReactNode) => (
<span className="euiBadgeGroup__item">{child}</span>
))}
<div css={cssStyles} className={classes} ref={ref} {...rest}>
{children}
</div>
);
}
Expand Down
37 changes: 30 additions & 7 deletions src/components/badge/beta_badge/__snapshots__/beta_badge.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`EuiBetaBadge is rendered 1`] = `
<span
aria-label="aria-label"
class="euiBetaBadge euiBetaBadge--hollow testClass1 testClass2"
class="euiBetaBadge testClass1 testClass2 emotion-euiBetaBadge-hollow-m"
data-test-subj="test subject string"
title="Beta"
>
Expand All @@ -13,7 +13,7 @@ exports[`EuiBetaBadge is rendered 1`] = `

exports[`EuiBetaBadge props color accent is rendered 1`] = `
<span
class="euiBetaBadge euiBetaBadge--accent"
class="euiBetaBadge emotion-euiBetaBadge-accent-m"
title="Beta"
>
Beta
Expand All @@ -22,7 +22,7 @@ exports[`EuiBetaBadge props color accent is rendered 1`] = `

exports[`EuiBetaBadge props color hollow is rendered 1`] = `
<span
class="euiBetaBadge euiBetaBadge--hollow"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
title="Beta"
>
Beta
Expand All @@ -31,16 +31,39 @@ exports[`EuiBetaBadge props color hollow is rendered 1`] = `

exports[`EuiBetaBadge props color subdued is rendered 1`] = `
<span
class="euiBetaBadge euiBetaBadge--subdued"
class="euiBetaBadge emotion-euiBetaBadge-subdued-m"
title="Beta"
>
Beta
</span>
`;

exports[`EuiBetaBadge props iconType 1`] = `
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
title="Beta"
>
<span
aria-hidden="true"
class="euiBetaBadge__icon emotion-euiBetaBadge__icon"
color="inherit"
data-euiicon-type="beta"
/>
</span>
`;

exports[`EuiBetaBadge props single letter 1`] = `
<span
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
title="B"
>
B
</span>
`;

exports[`EuiBetaBadge props size m is rendered 1`] = `
<span
class="euiBetaBadge euiBetaBadge--hollow"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
title="Beta"
>
Beta
Expand All @@ -49,7 +72,7 @@ exports[`EuiBetaBadge props size m is rendered 1`] = `

exports[`EuiBetaBadge props size s is rendered 1`] = `
<span
class="euiBetaBadge euiBetaBadge--hollow euiBetaBadge--small"
class="euiBetaBadge emotion-euiBetaBadge-hollow-s"
title="Beta"
>
Beta
Expand All @@ -62,7 +85,7 @@ exports[`EuiBetaBadge props tooltip and anchorProps are rendered 1`] = `
data-test-subj="DTS"
>
<span
class="euiBetaBadge euiBetaBadge--hollow"
class="euiBetaBadge emotion-euiBetaBadge-hollow-m"
role="button"
tabindex="0"
>
Expand Down
Loading