[EuiBetaBadge] Add color and size props and support for click event #4798

andreadelrio · 2021-05-14T01:20:56Z

Summary

Added the color prop and added two more color options (subdued and accent) and turned previous default into hollow.
Added the size prop.
Allowed for the component to be clickable by accepting either onClick or href.
Adjusted styles so that when the label has one letter it is styled similarly to the "icon only" case.
Adjusted the background color of the accent variant to match our library on Figma.

Checklist

Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs and playground toggles
Added documentation
~~- [ ] Checked Code Sandbox works for the any docs examples~~
Added or updated jest tests
~~- [ ] Checked for breaking changes and labeled appropriately~~
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
A changelog entry exists and is marked appropriately

andreadelrio · 2021-05-14T01:27:25Z

@miukimiu I know you recently added the lensApp icon to the docs example but since now we're showing more sizes and colors I thought it was getting a bit crowded. Open to suggestions to bring it back.

kibanamachine · 2021-05-14T01:49:25Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4798/

miukimiu

Thanks @andreadelrio for improving the EuiBetaBadge. The new size looks great and also the new props to support click events. 🎉

I have a few suggestions.

Also noticed, that when passing a href with color hollow the link get's blue:

This PR can also close #4190. But we also need to allow passing these props to the EuiCard.

Right now we can only pass the following beta badge props:

So maybe we can allow passing all the rest of the beta badge props like betaBadgeProps.

miukimiu · 2021-05-14T13:41:23Z

src-docs/src/views/badge/beta_badge.js

@@ -2,23 +2,36 @@ import React from 'react';

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

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


Should we support all the badge colors and also allow to use custom color examples?

Hm I wonder if the beta badge's use cases are better suited for a limited set of colors. Likely @cchaos can weigh in as I think she's the one who proposed adding two more colors only.

I think it could sway either way, keeping it limited may help users notice it more since they tend to mark product features. If we were to change the set to accept the same as regular badges, are they then any different really? I would then consider if there's any real necessity to keep separate components. But I'd suggest starting a more targeted discussion for that and keep this PR scoped to the current changeset.

src-docs/src/views/badge/beta_badge.js

andreadelrio · 2021-05-18T20:33:56Z

@miukimiu I pushed some changes addressing feedback. There's a TS error I'll probably need Greg's (or your) help with.
I added betaBadgeProps to EuiCard and that raised the following question (also related to #4190):

Should EuiBetaBadge "follow" EuiCard's isDisabled state or override it? Right now it overrides it. I'm wondering if we should give EuiBetaBadge its own isDisabled state or if there's a better way to handle this scenario. Another alternative would be to have EuiBetaBadge override EuiCard's isDisabled state only if the badge has a click event associated with it.

miukimiu · 2021-05-19T10:33:54Z

By default, the EuiBetaBadge should respect the EuiCard's isDisabled state. We don't want to introduce changes to the default card with a EuiBetaBadge because this would impact all these types of cards being used in Kibana.

We just want to give more flexibility to consumers. So in case, consumers want a card with a EuiBetaBadge with a different color, click event, non-disabled state, they can override the default props with the EuiBetaBadgeProps. In the past, this wasn't possible.

cchaos · 2021-05-19T14:24:16Z

src/components/badge/beta_badge/beta_badge.tsx

    {
      'euiBetaBadge--iconOnly': iconType,
    },
+    {
+      'euiBetaBadge--singleLetter': singleLetter,
+    },
+    {
+      'euiBetaBadge-isClickable': onClick || href,
+    },


Quick suggestion 😉 . All of these can actually be combined in one object

Suggested change

{

'euiBetaBadge--iconOnly': iconType,

},

{

'euiBetaBadge--singleLetter': singleLetter,

},

{

'euiBetaBadge-isClickable': onClick || href,

},

{

'euiBetaBadge--iconOnly': iconType,

'euiBetaBadge--singleLetter': singleLetter,

'euiBetaBadge-isClickable': onClick || href,

},

cchaos · 2021-05-19T16:03:17Z

As a reminder, one of the use-cases for clickable beta badges on cards is to direct users towards license info/upgrade for disabled features. So we want to be sure that it's very easy to have a disabled card with a clickable beta badge.

andreadelrio · 2021-05-21T00:15:32Z

As a reminder, one of the use-cases for clickable beta badges on cards is to direct users towards license info/upgrade for disabled features. So we want to be sure that it's very easy to have a disabled card with a clickable beta badge.

Keeping this in mind and after discussing with @miukimiu we agreed to go with the EuiBetaBadge following EuiCard's isDisabled state unless the beta badge isClickable. I updated the examples on the "Cards with beta badges" section to show consumers this use case.

miukimiu

LGTM! 🎉

Tested again in different browsers and locally. You just need to do a small change to allow passing a custom CSS class.

I tried to look into the TS error, and this code seems to make it disappear:

const betaBadgeClickEventsProps = betaBadgeProps?.href
      ? {
          ...(betaBadgeProps as React.MouseEventHandler<HTMLAnchorElement>),
        }
      : {
          ...(betaBadgeProps as React.MouseEventHandler<HTMLButtonElement>),
        };

    optionalBetaBadge = (
      <span className="euiCard__betaBadgeWrapper">
        <EuiBetaBadge
          id={optionalBetaBadgeID}
          label={betaBadgeLabel}
          title={betaBadgeTitle}
          tooltipContent={betaBadgeTooltipContent}
          className="euiCard__betaBadge"
          {...betaBadgeClickEventsProps}
        />
      </span>
    );

But I'm not completely sure if this is the right solution, so it's better if @thompsongl takes a look! 😄

miukimiu · 2021-05-25T12:36:05Z

src/components/card/card.tsx

@@ -298,6 +303,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
          label={betaBadgeLabel}
          title={betaBadgeTitle}
          tooltipContent={betaBadgeTooltipContent}
+          {...betaBadgeProps}
          className="euiCard__betaBadge"


We also need to be able to pass a custom className:

Suggested change

className="euiCard__betaBadge"

className={classNames(

'euiCard__betaBadge',

betaBadgeProps?.className

)}

thompsongl · 2021-05-25T15:24:13Z

I'd like to propose that we deprecate betaBadgeLabel, betaBadgeTooltipContent, betaBadgeTitle in favor of using betaBadgeProps alone.
The API would be much more clear, and betaBadgeProps?: EuiBetaBadgeProps; resolves the TS error.
It is a breaking change, which is why I think deprecation and the option to specify label, tooltipContent, and title in betaBadgeProps right now is the best approach.

kibanamachine · 2021-05-25T20:20:05Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4798/

src/components/card/card.tsx

src/components/badge/beta_badge/beta_badge.tsx

thompsongl · 2021-05-26T17:24:14Z

There's an axe test failure, too:

15:12:34 Errors on tp://localhost:9999/#/display/badge
15:13:58 [button-name]: Ensures buttons have discernible text
15:13:58 Help: https://dequeuniversity.com/rules/axe/4.1/button-name?application=axe-puppeteer
15:13:58 Elements:
15:13:58 - .euiBetaBadge-isClickable.euiBetaBadge--iconOnly[title=""]
15:13:58 1 accessibility errors

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

kibanamachine · 2021-05-26T20:02:49Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4798/

thompsongl

andreadelrio#15 has a couple TS things I was working on
Otherwise just the additional comments

src/components/card/card.tsx

[EuiBetaBadge] A couple TS changes

kibanamachine · 2021-05-27T18:20:04Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_4798/

thompsongl

Code changes LGTM!

andreadelrio added 6 commits May 11, 2021 19:37

need cleanup

27b9433

update colors

16579ef

fix conflict

5873a6b

update snaps

ca3ae83

Merge remote-tracking branch 'upstream/master' into betabadge

38dcb1a

cl

b3dfaac

andreadelrio changed the title ~~[EuiBetaBadge] Add more colors and add support for click event~~ [EuiBetaBadge] Add color and size props and support for click event May 14, 2021

andreadelrio requested review from miukimiu and thompsongl May 14, 2021 01:26

miukimiu suggested changes May 14, 2021

View reviewed changes

feedback

308edca

andreadelrio force-pushed the betabadge branch from b68cf8b to 308edca Compare May 19, 2021 04:22

cchaos reviewed May 19, 2021

View reviewed changes

andreadelrio added 2 commits May 20, 2021 17:06

clickable badge, disabled card

d53379d

update cl

cb960ec

miukimiu approved these changes May 25, 2021

View reviewed changes

allowing for all props under EuiBetaBadgeProps

954d63c

thompsongl suggested changes May 26, 2021

View reviewed changes

src/components/card/card.tsx Outdated Show resolved Hide resolved

src/components/badge/beta_badge/beta_badge.tsx Outdated Show resolved Hide resolved

thompsongl mentioned this pull request May 26, 2021

[Meta] Deprecation schedule #1469

Open

33 tasks

andreadelrio and others added 2 commits May 26, 2021 11:20

Update src/components/card/card.tsx

b139957

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Update src/components/badge/beta_badge/beta_badge.tsx

b9c0e61

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

andreadelrio added 2 commits May 26, 2021 12:31

fix axe error

e7e478d

update cl

aeb3944

andreadelrio requested a review from thompsongl May 26, 2021 20:09

ts

36ea7ab

thompsongl suggested changes May 27, 2021

View reviewed changes

src/components/card/card.tsx Show resolved Hide resolved

andreadelrio added 2 commits May 27, 2021 10:46

Merge pull request #15 from thompsongl/betabadge

7724eb4

[EuiBetaBadge] A couple TS changes

add missing deprecation warnings and update cl

16be369

andreadelrio requested a review from thompsongl May 27, 2021 18:01

dborodyansky mentioned this pull request May 27, 2021

[Ingest Node Pipelines] Add extract_device_type option to user agent processor elastic/kibana#97466

Closed

thompsongl approved these changes May 28, 2021

View reviewed changes

thompsongl added the deprecations Contains deprecations. Add them to the deprecations meta ticket after merge. label May 28, 2021

andreadelrio merged commit 911bee4 into elastic:master May 28, 2021

miukimiu mentioned this pull request May 31, 2021

[EuiBetaBadge] Should also behave as a link #4190

Closed

alisonelizabeth mentioned this pull request Jun 1, 2021

[Ingest pipelines] add extract_device_type to user agent processor elastic/kibana#100986

Merged

thompsongl mentioned this pull request Jun 3, 2021

Upgrade EUI to v34.3.0 elastic/kibana#101334

Merged

thompsongl mentioned this pull request Oct 26, 2021

Deprecations, October 2021 Edition #5323

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiBetaBadge] Add color and size props and support for click event #4798

[EuiBetaBadge] Add color and size props and support for click event #4798

andreadelrio commented May 14, 2021 •

edited

andreadelrio commented May 14, 2021

kibanamachine commented May 14, 2021

miukimiu left a comment

miukimiu May 14, 2021

andreadelrio May 18, 2021

cchaos May 19, 2021

andreadelrio commented May 18, 2021 •

edited

miukimiu commented May 19, 2021

cchaos May 19, 2021

cchaos commented May 19, 2021

andreadelrio commented May 21, 2021 •

edited

miukimiu left a comment •

edited

miukimiu May 25, 2021

thompsongl commented May 25, 2021

kibanamachine commented May 25, 2021

thompsongl commented May 26, 2021

kibanamachine commented May 26, 2021

thompsongl left a comment

kibanamachine commented May 27, 2021

thompsongl left a comment

		@@ -2,23 +2,36 @@ import React from 'react';

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

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

-          className="euiCard__betaBadge"
+          className={classNames(
+            'euiCard__betaBadge',
+            betaBadgeProps?.className
+          )}

[EuiBetaBadge] Add color and size props and support for click event #4798

[EuiBetaBadge] Add color and size props and support for click event #4798

Conversation

andreadelrio commented May 14, 2021 • edited

Summary

Checklist

andreadelrio commented May 14, 2021

kibanamachine commented May 14, 2021

miukimiu left a comment

Choose a reason for hiding this comment

miukimiu May 14, 2021

Choose a reason for hiding this comment

andreadelrio May 18, 2021

Choose a reason for hiding this comment

cchaos May 19, 2021

Choose a reason for hiding this comment

andreadelrio commented May 18, 2021 • edited

miukimiu commented May 19, 2021

cchaos May 19, 2021

Choose a reason for hiding this comment

cchaos commented May 19, 2021

andreadelrio commented May 21, 2021 • edited

miukimiu left a comment • edited

Choose a reason for hiding this comment

miukimiu May 25, 2021

Choose a reason for hiding this comment

thompsongl commented May 25, 2021

kibanamachine commented May 25, 2021

thompsongl commented May 26, 2021

kibanamachine commented May 26, 2021

thompsongl left a comment

Choose a reason for hiding this comment

kibanamachine commented May 27, 2021

thompsongl left a comment

Choose a reason for hiding this comment

andreadelrio commented May 14, 2021 •

edited

andreadelrio commented May 18, 2021 •

edited

andreadelrio commented May 21, 2021 •

edited

miukimiu left a comment •

edited