From 42a98bc6b40490d6cd3bcf93a653a94dd39ca9ff Mon Sep 17 00:00:00 2001 From: Victoria League Date: Tue, 28 May 2024 15:00:58 -0400 Subject: [PATCH] [CL-230] [CL-296] Update button styles (#9345) Co-authored-by: Will Martin --- .../src/button/button.component.spec.ts | 51 ------------------- .../components/src/button/button.component.ts | 45 ++++++++-------- libs/components/src/button/button.mdx | 3 -- libs/components/src/button/button.stories.ts | 16 +++++- libs/components/tailwind.config.base.js | 19 ++++++- 5 files changed, 52 insertions(+), 82 deletions(-) diff --git a/libs/components/src/button/button.component.spec.ts b/libs/components/src/button/button.component.spec.ts index a75ac400a96..f3c3aa3175c 100644 --- a/libs/components/src/button/button.component.spec.ts +++ b/libs/components/src/button/button.component.spec.ts @@ -27,57 +27,6 @@ describe("Button", () => { linkDebugElement = fixture.debugElement.query(By.css("a")); })); - it("should apply classes based on type", () => { - testAppComponent.buttonType = "primary"; - fixture.detectChanges(); - expect(buttonDebugElement.nativeElement.classList.contains("tw-bg-primary-600")).toBe(true); - expect(linkDebugElement.nativeElement.classList.contains("tw-bg-primary-600")).toBe(true); - - testAppComponent.buttonType = "secondary"; - fixture.detectChanges(); - expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true); - expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true); - - testAppComponent.buttonType = "danger"; - fixture.detectChanges(); - expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-600")).toBe(true); - expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-600")).toBe(true); - - testAppComponent.buttonType = "unstyled"; - fixture.detectChanges(); - expect( - Array.from(buttonDebugElement.nativeElement.classList).some((klass: string) => - klass.startsWith("tw-bg"), - ), - ).toBe(false); - expect( - Array.from(linkDebugElement.nativeElement.classList).some((klass: string) => - klass.startsWith("tw-bg"), - ), - ).toBe(false); - - testAppComponent.buttonType = null; - fixture.detectChanges(); - expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true); - expect(linkDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true); - }); - - it("should apply block when true and inline-block when false", () => { - testAppComponent.block = true; - fixture.detectChanges(); - expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(true); - expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(true); - expect(buttonDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(false); - expect(linkDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(false); - - testAppComponent.block = false; - fixture.detectChanges(); - expect(buttonDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(true); - expect(linkDebugElement.nativeElement.classList.contains("tw-inline-block")).toBe(true); - expect(buttonDebugElement.nativeElement.classList.contains("tw-block")).toBe(false); - expect(linkDebugElement.nativeElement.classList.contains("tw-block")).toBe(false); - }); - it("should not be disabled when loading and disabled are false", () => { testAppComponent.loading = false; testAppComponent.disabled = false; diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts index d8787c994f4..96af7305739 100644 --- a/libs/components/src/button/button.component.ts +++ b/libs/components/src/button/button.component.ts @@ -6,7 +6,7 @@ import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstrac const focusRing = [ "focus-visible:tw-ring", "focus-visible:tw-ring-offset-2", - "focus-visible:tw-ring-primary-700", + "focus-visible:tw-ring-primary-500", "focus-visible:tw-z-10", ]; @@ -17,37 +17,24 @@ const buttonStyles: Record = { "!tw-text-contrast", "hover:tw-bg-primary-700", "hover:tw-border-primary-700", - "disabled:tw-bg-primary-600/60", - "disabled:tw-border-primary-600/60", - "disabled:!tw-text-contrast/60", - "disabled:tw-bg-clip-padding", - "disabled:tw-cursor-not-allowed", ...focusRing, ], secondary: [ "tw-bg-transparent", - "tw-border-text-muted", - "!tw-text-muted", - "hover:tw-bg-text-muted", - "hover:tw-border-text-muted", - "hover:!tw-text-contrast", - "disabled:tw-bg-transparent", - "disabled:tw-border-text-muted/60", - "disabled:!tw-text-muted/60", - "disabled:tw-cursor-not-allowed", + "tw-border-primary-600", + "!tw-text-primary-600", + "hover:tw-bg-transparent", + "hover:tw-border-primary-700", + "hover:!tw-text-primary-700", ...focusRing, ], danger: [ "tw-bg-transparent", "tw-border-danger-600", "!tw-text-danger", - "hover:tw-bg-danger-600", - "hover:tw-border-danger-600", - "hover:!tw-text-contrast", - "disabled:tw-bg-transparent", - "disabled:tw-border-danger-600/60", - "disabled:!tw-text-danger/60", - "disabled:tw-cursor-not-allowed", + "hover:tw-bg-transparent", + "hover:tw-border-danger-700", + "hover:!tw-text-danger-700", ...focusRing, ], unstyled: [], @@ -64,14 +51,22 @@ export class ButtonComponent implements ButtonLikeAbstraction { "tw-font-semibold", "tw-py-1.5", "tw-px-3", - "tw-rounded", + "tw-rounded-full", "tw-transition", - "tw-border", + "tw-border-2", "tw-border-solid", "tw-text-center", "tw-no-underline", - "hover:tw-no-underline", + "hover:tw-underline", "focus:tw-outline-none", + "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", + "disabled:hover:tw-no-underline", ] .concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"]) .concat(buttonStyles[this.buttonType ?? "secondary"]); diff --git a/libs/components/src/button/button.mdx b/libs/components/src/button/button.mdx index 6dcbbbbfac7..39431f31bff 100644 --- a/libs/components/src/button/button.mdx +++ b/libs/components/src/button/button.mdx @@ -60,9 +60,6 @@ Use the danger styling only in settings when the user may preform a permanent ac ## Disabled UI -Both the disabled and loading states use the default state’s color with a 60% opacity or -`tw-opacity-60`. - ## Block diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts index 6923878b353..260d5565c0c 100644 --- a/libs/components/src/button/button.stories.ts +++ b/libs/components/src/button/button.stories.ts @@ -23,9 +23,21 @@ type Story = StoryObj; export const Primary: Story = { render: (args) => ({ props: args, - template: ` + template: /*html*/ ` +
- Link + + + + +
+
+ Anchor + Anchor:hover + Anchor:focus-visible + Anchor:hover:focus-visible + Anchor:active +
`, }), args: { diff --git a/libs/components/tailwind.config.base.js b/libs/components/tailwind.config.base.js index f5232d10aa1..72947ba8f29 100644 --- a/libs/components/tailwind.config.base.js +++ b/libs/components/tailwind.config.base.js @@ -77,7 +77,11 @@ module.exports = { alt2: rgba("--color-text-alt2"), code: rgba("--color-text-code"), success: rgba("--color-success-600"), - danger: rgba("--color-danger-600"), + 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"), primary: { @@ -124,5 +128,18 @@ module.exports = { {}, ); }), + plugin(function ({ addVariant }) { + for (const state of [ + "active", + "hover", + "focus", + "focus-within", + "focus-visible", + "target", + "visited", + ]) { + addVariant(state, [`&:${state}`, `&.test-${state}`]); + } + }), ], };