From 1d939c3aa7871f61533af84a6f0c63a2dd6ff897 Mon Sep 17 00:00:00 2001 From: Victoria League Date: Tue, 11 Jun 2024 11:05:56 -0400 Subject: [PATCH] [CL-250] Update badge styles for extension refresh (#9572) --- libs/components/src/badge/badge.directive.ts | 51 ++++++++++++-------- libs/components/src/badge/badge.mdx | 9 +++- libs/components/src/badge/badge.stories.ts | 41 +++++++++++++++- libs/components/tailwind.config.base.js | 22 +++++++-- 4 files changed, 97 insertions(+), 26 deletions(-) diff --git a/libs/components/src/badge/badge.directive.ts b/libs/components/src/badge/badge.directive.ts index 1e8d69ab936..7d403cc73db 100644 --- a/libs/components/src/badge/badge.directive.ts +++ b/libs/components/src/badge/badge.directive.ts @@ -5,21 +5,25 @@ import { FocusableElement } from "../shared/focusable-element"; export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info"; const styles: Record = { - primary: ["tw-bg-primary-600"], - secondary: ["tw-bg-text-muted"], - success: ["tw-bg-success-600"], - danger: ["tw-bg-danger-600"], - warning: ["tw-bg-warning-600"], - info: ["tw-bg-info-600"], + primary: ["tw-bg-primary-100", "tw-border-primary-700", "!tw-text-primary-700"], + secondary: ["tw-bg-secondary-100", "tw-border-secondary-700", "!tw-text-secondary-700"], + success: ["tw-bg-success-100", "tw-border-success-700", "!tw-text-success-700"], + danger: ["tw-bg-danger-100", "tw-border-danger-700", "!tw-text-danger-700"], + warning: ["tw-bg-warning-100", "tw-border-warning-700", "!tw-text-warning-700"], + info: ["tw-bg-info-100", "tw-border-info-700", "!tw-text-info-700"], }; const hoverStyles: Record = { - primary: ["hover:tw-bg-primary-700"], - secondary: ["hover:tw-bg-secondary-700"], - success: ["hover:tw-bg-success-700"], - danger: ["hover:tw-bg-danger-700"], - warning: ["hover:tw-bg-warning-700"], - info: ["hover:tw-bg-info-700"], + primary: ["hover:tw-bg-primary-600", "hover:tw-border-primary-600", "hover:!tw-text-contrast"], + secondary: [ + "hover:tw-bg-secondary-600", + "hover:tw-border-secondary-600", + "hover:!tw-text-contrast", + ], + success: ["hover:tw-bg-success-600", "hover:tw-border-success-600", "hover:!tw-text-contrast"], + danger: ["hover:tw-bg-danger-600", "hover:tw-border-danger-600", "hover:!tw-text-contrast"], + warning: ["hover:tw-bg-warning-600", "hover:tw-border-warning-600", "hover:!tw-text-black"], + info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"], }; @Directive({ @@ -30,22 +34,29 @@ export class BadgeDirective implements FocusableElement { @HostBinding("class") get classList() { return [ "tw-inline-block", - "tw-py-0.5", - "tw-px-1.5", - "tw-font-bold", + "tw-py-1", + "tw-px-2", + "tw-font-medium", "tw-text-center", "tw-align-text-top", - "!tw-text-contrast", - "tw-rounded", - "tw-border-none", + "tw-rounded-full", + "tw-border-[0.5px]", + "tw-border-solid", "tw-box-border", "tw-whitespace-nowrap", "tw-text-xs", "hover:tw-no-underline", "focus-visible:tw-outline-none", - "focus-visible:tw-ring", + "focus-visible:tw-ring-2", "focus-visible:tw-ring-offset-2", - "focus-visible:tw-ring-primary-700", + "focus-visible:tw-ring-primary-500", + "disabled:tw-bg-secondary-300", + "disabled:hover:tw-bg-secondary-300", + "disabled:tw-border-secondary-300", + "disabled:hover:tw-border-secondary-300", + "disabled:!tw-text-muted", + "disabled:hover:!tw-text-muted", + "disabled:tw-cursor-not-allowed", ] .concat(styles[this.variant]) .concat(this.hasHoverEffects ? hoverStyles[this.variant] : []) diff --git a/libs/components/src/badge/badge.mdx b/libs/components/src/badge/badge.mdx index 1c919449978..ed3aff9b64c 100644 --- a/libs/components/src/badge/badge.mdx +++ b/libs/components/src/badge/badge.mdx @@ -6,12 +6,17 @@ import * as stories from "./badge.stories"; # Badge -The Badge directive can be used on a `` (non clickable events), or an `` or ` + + + + + +

+ Hover + + + + + + +

+ Focus Visible + + + + + + +

+ Disabled + + + + + + + `, + }), +}; + export const Primary: Story = { render: (args) => ({ props: args, - template: ` + template: /*html*/ ` Span Badge containing lengthy text

Link Badge diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js index c4209433745..7f5449b69ba 100644 --- a/libs/components/tailwind.config.base.js +++ b/libs/components/tailwind.config.base.js @@ -80,19 +80,35 @@ module.exports = { headers: rgba("--color-text-headers"), alt2: rgba("--color-text-alt2"), code: rgba("--color-text-code"), - success: rgba("--color-success-600"), + black: colors.black, + success: { + DEFAULT: rgba("--color-success-600"), + 600: rgba("--color-success-600"), + 700: rgba("--color-success-700"), + }, danger: { DEFAULT: rgba("--color-danger-600"), 600: rgba("--color-danger-600"), 700: rgba("--color-danger-700"), }, - warning: rgba("--color-warning-600"), - info: rgba("--color-info-600"), + warning: { + DEFAULT: rgba("--color-warning-600"), + 600: rgba("--color-warning-600"), + 700: rgba("--color-warning-700"), + }, + info: { + DEFAULT: rgba("--color-info-600"), + 600: rgba("--color-info-600"), + 700: rgba("--color-info-700"), + }, primary: { 300: rgba("--color-primary-300"), 600: rgba("--color-primary-600"), 700: rgba("--color-primary-700"), }, + secondary: { + 700: rgba("--color-secondary-700"), + }, }, ringOffsetColor: ({ theme }) => ({ DEFAULT: theme("colors.background"),