[Playground] EuiBadge, EuiNotificationBadge, EuiBetaBadge

[anishagg17]

Summary

created playground for badges #3057

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• 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

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[thompsongl]

jenkins test this

[kibanamachine]

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

[thompsongl]

Nice to see an example of an array of playgrounds 👍

[cchaos]

So excited to have the playgrounds!!! This is my first time looking at the Playground stuff in general so some of these comments are not Badge specific.

1. Can we try to not add the props that are default to the code block? For instance, the default iconSide for EuiBadge is left. Making this line unnecessary.

2. Can you remove the fullScreen option from the code block. They should be quite small, and so full screen is unnecessary.

3. If a user tries to enter html into a text input, there's an inline error displayed. Can we handle this better?

4. The onClickAriaLabel and iconOnClickAriaLabel prop types look wrong to me. They should just be strings.

5. Can you add the default children content as the actual content of the display the input?

6. I noticed that the props table doesn't indicate required props. Can we add this parenthetically like: propName (required)?

7. I don't think placeholder text is necessary for simply duplicating the prop name. It's easier to scan empty inputs to know what is being applied. I'd remove all placeholders from props like

8. The indentation is a bit funky to me it displays as:

<EuiBadge
    iconSide="left"
    iconType="bolt"
    onClick={()=> console.log("Clicked")}
    >
    badge content
</EuiBadge>

But it should be

<EuiBadge
  iconSide="left"
  iconType="bolt"
  onClick={()=> console.log("Clicked")}>
  badge content
</EuiBadge>

[cchaos]

EuiBadge also poses an interesting scenario where:
When passing onClick to EuiBadge, you must also provide onClickAriaLabel

Is there a way we can couple props together? Meaning if:

1. The user toggles on to "simulate" onClick
2. By default, the Playground will automatically add a string to onClickAriaLabel
3. This string is also output into the Modify input for the prop onClickAriaLabel
4. If the user, deletes the content from the onClickAriaLabel input, the input itself turns invalid because it is required when onClick is added

That is very specific to EuiBadge, but I think a common scenario that will occur when we have props that are required if another prop exists.

[anishagg17]

If a user tries to enter html into a text input, there's an inline error displayed. Can we handle this better?

what should be the desired outcome?

The indentation is a bit funky to me it displays as:

This is how react-view renders out the component-code

[cchaos]

If a user tries to enter html into a text input, there's an inline error displayed. Can we handle this better?

what should be the desired outcome?

Can you sanitize the input and output it as a string?

[thompsongl]

1. Can we try to not add the props that are default to the code block? For instance, the default iconSide for EuiBadge is left. Making this line unnecessary.

4. The onClickAriaLabel and iconOnClickAriaLabel prop types look wrong to me. They should just be strings.

Both of these will be resolved automatically when #3554 merges and we have better docgen info to work with

[anishagg17]

Can you sanitize the input and output it as a string?

I did that but still it shows error while the html tag is incomplete , should the inline errors be removed ?

[cchaos]

should the inline errors be removed ?

If we think it's important enough to display the error inline, we should at least use the proper error message display like:

Otherwise, just output the error in the console.

[anishagg17]

When passing onClick to EuiBadge, you must also provide onClickAriaLabel

I have added such validation, but since it is an warning I don't think it is required.

[cchaos]

Still found a couple of broken pieces. But overall most of my suggestions look great, thanks for adding them. Also there seems to be a lot of commented out code, you'll want to remove those before merging.

[anishagg17]

Also there seems to be a lot of commented out code, you'll want to remove those before merging.

I will surely remove them when it will be ready to merged.

[cchaos]

retest

[kibanamachine]

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

[thompsongl]

Failed CI is a lint error in knobs.js

[thompsongl]

jenkins test this

[kibanamachine]

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

[cchaos]

One last thing, I think this error message is too invasive, and honestly not sure it is necessary. It will show on every keypress into the input so as I start to type a correct color like prima for primary every time I press a letter, the error pops pops up. I don't think the popup is necessary at all and I don't know where the UI for it is coming from as it doesn't match any EUI component.

[thompsongl]

I don't know where the UI for it is coming from as it doesn't match any EUI component

That comes from react-view. In all cases we'll want to either replace it with something in EUI or hide it entirely.

[thompsongl]

jenkins test this

[anishagg17]

In all cases we'll want to either replace it with something in EUI or hide it entirely.

that has already been replaced by form validation stuff.

[kibanamachine]

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

[thompsongl]

This is ready to go after cleaning up the code comments.

I made #3765 after noticing the console errors in this PR; the cause should be fixed in the component itself.

[thompsongl]

jenkins test this

[kibanamachine]

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