Skip to content

Commit

Permalink
[EuiNotificationBadge] Add success color (#6864)
Browse files Browse the repository at this point in the history 
* add success color to notification badge

* add badgeColor to EuiFilterButton

* add cl file

* [PR feedback] DRY out `badgeColor` type

* [Cleanup] Create new color utilities file + set up a shared map of Emotion colors

+ convert basic EuiBadge to use emotion CSS as opposed to inline styles for named colors - color contrast is already handled automatically by our button utils

+ misc clean up/linting for various function naming, comments, syntax

* Update downstream snapshots

* Convert EuiBetaBadge and EuiNotificationBadge to use new `euiBadgeColors` util

- this automatically shares (e.g.) `success` and `hollow` styles and makes colors more consistent across multiple badges

- this architecture matches how EuiButtons use a separate color map/util to determine color as opposed to each button component having its own color CSS

* [docs] Tweak `EuiNotificationBadge` example to show all colors

* changelog for refactor

---------

Co-authored-by: Cee Chen <[email protected]>
  • Loading branch information
@andreadelrio @cee-chen
andreadelrio and cee-chen authored Jun 23, 2023
1 parent 72751b6 commit 746f3d7
Show file tree
Hide file tree
Showing 17 changed files with 232 additions and 204 deletions.
10 changes: 8 additions & 2 deletions src-docs/src/views/badge/notification_badge.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import React from 'react';

import { EuiNotificationBadge } from '../../../../src/components/badge/notification_badge';
import { EuiFlexGroup, EuiNotificationBadge } from '../../../../src/components';

export default () => <EuiNotificationBadge>3</EuiNotificationBadge>;
export default () => (
<EuiFlexGroup responsive={false} gutterSize="s">
<EuiNotificationBadge>1</EuiNotificationBadge>
<EuiNotificationBadge color="success">2</EuiNotificationBadge>
<EuiNotificationBadge color="subdued">3</EuiNotificationBadge>
</EuiFlexGroup>
);
1 change: 1 addition & 0 deletions src-docs/src/views/filter_group/filter_group_multi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export default () => {
const button = (
<EuiFilterButton
iconType="arrowDown"
badgeColor="success"
onClick={onButtonClick}
isSelected={isPopoverOpen}
numFilters={items.filter((item) => item.checked !== 'off').length}
Expand Down
79 changes: 31 additions & 48 deletions src/components/badge/__snapshots__/badge.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
exports[`EuiBadge is disabled 1`] = `
<span
aria-label="aria-label"
class="euiBadge testClass1 testClass2 emotion-euiBadge-disabled"
class="euiBadge testClass1 testClass2 emotion-euiBadge-default-disabled"
data-test-subj="test subject string"
style="background-color:#D3DAE6;color:#000"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -22,9 +21,8 @@ exports[`EuiBadge is disabled 1`] = `
exports[`EuiBadge is rendered 1`] = `
<span
aria-label="aria-label"
class="euiBadge testClass1 testClass2 emotion-euiBadge"
class="euiBadge testClass1 testClass2 emotion-euiBadge-default"
data-test-subj="test subject string"
style="background-color:#D3DAE6;color:#000"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -40,8 +38,7 @@ exports[`EuiBadge is rendered 1`] = `

exports[`EuiBadge is rendered with href and rel provided 1`] = `
<span
class="euiBadge testClass1 testClass2 emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
class="euiBadge testClass1 testClass2 emotion-euiBadge-default"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -62,11 +59,10 @@ exports[`EuiBadge is rendered with href and rel provided 1`] = `
exports[`EuiBadge is rendered with href provided 1`] = `
<a
aria-label="aria-label"
class="euiBadge testClass1 testClass2 emotion-euiBadge-clickable"
class="euiBadge testClass1 testClass2 emotion-euiBadge-default-clickable"
data-test-subj="test subject string"
href="/#/"
rel="noreferrer"
style="background-color:#D3DAE6;color:#000"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -82,8 +78,7 @@ exports[`EuiBadge is rendered with href provided 1`] = `

exports[`EuiBadge is rendered with iconOnClick and href provided 1`] = `
<span
class="euiBadge testClass1 testClass2 emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
class="euiBadge testClass1 testClass2 emotion-euiBadge-default"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -103,8 +98,7 @@ exports[`EuiBadge is rendered with iconOnClick and href provided 1`] = `

exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = `
<span
class="euiBadge testClass1 testClass2 emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
class="euiBadge testClass1 testClass2 emotion-euiBadge-default"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -123,9 +117,8 @@ exports[`EuiBadge is rendered with iconOnClick and onClick provided 1`] = `
exports[`EuiBadge is rendered with iconOnClick provided 1`] = `
<span
aria-label="aria-label"
class="euiBadge testClass1 testClass2 emotion-euiBadge"
class="euiBadge testClass1 testClass2 emotion-euiBadge-default"
data-test-subj="test subject string"
style="background-color:#D3DAE6;color:#000"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -142,9 +135,8 @@ exports[`EuiBadge is rendered with iconOnClick provided 1`] = `
exports[`EuiBadge is rendered with onClick provided 1`] = `
<button
aria-label="aria-label"
class="euiBadge testClass1 testClass2 emotion-euiBadge-clickable"
class="euiBadge testClass1 testClass2 emotion-euiBadge-default-clickable"
data-test-subj="test subject string"
style="background-color:#D3DAE6;color:#000"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -160,8 +152,7 @@ exports[`EuiBadge is rendered with onClick provided 1`] = `

exports[`EuiBadge props color accent is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#f583b7;color:#000"
class="euiBadge emotion-euiBadge-accent"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand Down Expand Up @@ -211,8 +202,7 @@ exports[`EuiBadge props color accepts rgba 1`] = `

exports[`EuiBadge props color danger is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#BD271E;color:#FFF"
class="euiBadge emotion-euiBadge-danger"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -228,8 +218,7 @@ exports[`EuiBadge props color danger is rendered 1`] = `

exports[`EuiBadge props color default is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
class="euiBadge emotion-euiBadge-default"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand Down Expand Up @@ -261,8 +250,7 @@ exports[`EuiBadge props color hollow is rendered 1`] = `

exports[`EuiBadge props color primary is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#07C;color:#FFF"
class="euiBadge emotion-euiBadge-primary"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -278,8 +266,7 @@ exports[`EuiBadge props color primary is rendered 1`] = `

exports[`EuiBadge props color success is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#4dd2ca;color:#000"
class="euiBadge emotion-euiBadge-success"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -295,8 +282,7 @@ exports[`EuiBadge props color success is rendered 1`] = `

exports[`EuiBadge props color warning is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#FEC514;color:#000"
class="euiBadge emotion-euiBadge-warning"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -312,8 +298,7 @@ exports[`EuiBadge props color warning is rendered 1`] = `

exports[`EuiBadge props iconSide left is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
class="euiBadge emotion-euiBadge-default"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -334,8 +319,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `

exports[`EuiBadge props iconSide right is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
class="euiBadge emotion-euiBadge-default"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -356,8 +340,7 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `

exports[`EuiBadge props iconType is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#D3DAE6;color:#000"
class="euiBadge emotion-euiBadge-default"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -378,8 +361,8 @@ exports[`EuiBadge props iconType is rendered 1`] = `

exports[`EuiBadge props style is rendered 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#D3DAE6;color:#000;border:4px solid tomato"
class="euiBadge emotion-euiBadge-default"
style="border:4px solid tomato"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -395,8 +378,8 @@ exports[`EuiBadge props style is rendered 1`] = `

exports[`EuiBadge props style is rendered with accent 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#f583b7;color:#000;border:4px solid tomato"
class="euiBadge emotion-euiBadge-accent"
style="border:4px solid tomato"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -412,8 +395,8 @@ exports[`EuiBadge props style is rendered with accent 1`] = `

exports[`EuiBadge props style is rendered with danger 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#BD271E;color:#FFF;border:4px solid tomato"
class="euiBadge emotion-euiBadge-danger"
style="border:4px solid tomato"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -429,8 +412,8 @@ exports[`EuiBadge props style is rendered with danger 1`] = `

exports[`EuiBadge props style is rendered with default 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#D3DAE6;color:#000;border:4px solid tomato"
class="euiBadge emotion-euiBadge-default"
style="border:4px solid tomato"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand Down Expand Up @@ -480,8 +463,8 @@ exports[`EuiBadge props style is rendered with hollow 2`] = `

exports[`EuiBadge props style is rendered with primary 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#07C;color:#FFF;border:4px solid tomato"
class="euiBadge emotion-euiBadge-primary"
style="border:4px solid tomato"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -497,8 +480,8 @@ exports[`EuiBadge props style is rendered with primary 1`] = `

exports[`EuiBadge props style is rendered with success 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#4dd2ca;color:#000;border:4px solid tomato"
class="euiBadge emotion-euiBadge-success"
style="border:4px solid tomato"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand All @@ -514,8 +497,8 @@ exports[`EuiBadge props style is rendered with success 1`] = `

exports[`EuiBadge props style is rendered with warning 1`] = `
<span
class="euiBadge emotion-euiBadge"
style="background-color:#FEC514;color:#000;border:4px solid tomato"
class="euiBadge emotion-euiBadge-warning"
style="border:4px solid tomato"
>
<span
class="euiBadge__content emotion-euiBadge__content"
Expand Down
33 changes: 19 additions & 14 deletions src/components/badge/badge.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@ import {
logicalTextAlignCSS,
mathWithUnits,
} from '../../global_styling';
import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
import { UseEuiTheme, tint, transparentize } from '../../services';
import { UseEuiTheme, transparentize } from '../../services';
import { euiBadgeColors } from './color_utils';

export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme, colorMode } = euiThemeContext;
const { euiTheme } = euiThemeContext;
const badgeColors = euiBadgeColors(euiThemeContext);

return {
euiBadge: css`
Expand Down Expand Up @@ -72,24 +73,28 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
cursor: not-allowed;
}
`,

// Colors
default: css(badgeColors.default),
hollow: css`
color: ${badgeColors.hollow.color};
background-color: ${badgeColors.hollow.backgroundColor};
border-color: ${badgeColors.hollow.borderColor};
`,
primary: css(badgeColors.primary),
accent: css(badgeColors.accent),
warning: css(badgeColors.warning),
danger: css(badgeColors.danger),
success: css(badgeColors.success),
disabled: css`
/* stylelint-disable declaration-no-important */
/* Using !important to override inline styles */
color: ${euiButtonColor(euiThemeContext, 'disabled').color} !important;
background-color: ${euiButtonColor(euiThemeContext, 'disabled')
.backgroundColor} !important;
color: ${badgeColors.disabled.color} !important;
background-color: ${badgeColors.disabled.backgroundColor} !important;
/* stylelint-enable declaration-no-important */
`,
// Hollow has a border and is mostly used for autocompleters.
hollow: css`
background-color: ${euiTheme.colors.emptyShade};
border-color: ${colorMode === 'DARK'
? tint(euiTheme.border.color, 0.15)
: euiTheme.border.color};
color: ${euiTheme.colors.text};
`,

// Content wrapper
euiBadge__content: css`
Expand Down
Loading

0 comments on commit 746f3d7

Please sign in to comment.