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

[EuiNotificationBadge] Add success color #6864

Merged
merged 9 commits into from
Jun 23, 2023
Merged

[EuiNotificationBadge] Add success color #6864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7bb2222
add success color to notification badge
andreadelrio Jun 21, 2023
1d1e7a7
add badgeColor to EuiFilterButton
andreadelrio Jun 21, 2023
d6af2c9
add cl file
andreadelrio Jun 21, 2023
b2368bf
[PR feedback] DRY out `badgeColor` type
cee-chen Jun 22, 2023
3070696
[Cleanup] Create new color utilities file + set up a shared map of Em…
cee-chen Jun 22, 2023
e124668
Update downstream snapshots
cee-chen Jun 22, 2023
d136d62
Convert EuiBetaBadge and EuiNotificationBadge to use new `euiBadgeCol…
cee-chen Jun 22, 2023
8faca28
[docs] Tweak `EuiNotificationBadge` example to show all colors
cee-chen Jun 22, 2023
0298b26
changelog for refactor
cee-chen Jun 22, 2023
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
10 changes: 8 additions & 2 deletions src-docs/src/views/badge/notification_badge.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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