From 285780804554bef1541e643bc072d279a61335a9 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 7 Aug 2025 19:32:32 +0000 Subject: [PATCH 1/3] chore: migrate Abbr to tailwind --- site/src/components/Abbr/Abbr.stories.tsx | 15 ++++----------- site/src/components/Abbr/Abbr.tsx | 6 ++---- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx index 6720b90fffda5..c3185e3ff6ff7 100644 --- a/site/src/components/Abbr/Abbr.stories.tsx +++ b/site/src/components/Abbr/Abbr.stories.tsx @@ -25,10 +25,10 @@ export const InlinedShorthand: Story = { }, decorators: [ (Story) => ( -

The physical pain of getting bonked on the head with a cartoon mallet lasts precisely 593{" "} - + . The emotional turmoil and complete embarrassment lasts forever. @@ -45,7 +45,7 @@ export const Acronym: Story = { }, decorators: [ (Story) => ( - + ), @@ -60,16 +60,9 @@ export const Initialism: Story = { }, decorators: [ (Story) => ( - + ), ], }; - -const styles = { - // Just here to make the abbreviated part more obvious in the component library - underlined: { - textDecoration: "underline dotted", - }, -}; diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx index c41f68e08117f..e7fe24599bccf 100644 --- a/site/src/components/Abbr/Abbr.tsx +++ b/site/src/components/Abbr/Abbr.tsx @@ -1,4 +1,5 @@ import type { FC, HTMLAttributes } from "react"; +import { cn } from "utils/cn"; export type Pronunciation = "shorthand" | "acronym" | "initialism"; @@ -29,10 +30,7 @@ export const Abbr: FC = ({ // always have to supplement with aria-label title={title} aria-label={getAccessibleLabel(children, title, pronunciation)} - css={{ - textDecoration: "inherit", - letterSpacing: children === children.toUpperCase() ? "0.02em" : "0", - }} + className={cn("decoration-inherit", children === children.toUpperCase() ? "tracking-wide" : "tracking-normal")} {...delegatedProps} > {children} From 6d583ecf9be27ec52fa8f11a0954c7314195bd75 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 7 Aug 2025 19:33:31 +0000 Subject: [PATCH 2/3] simplify --- site/src/components/Abbr/Abbr.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Abbr/Abbr.stories.tsx b/site/src/components/Abbr/Abbr.stories.tsx index c3185e3ff6ff7..2b64d5885c205 100644 --- a/site/src/components/Abbr/Abbr.stories.tsx +++ b/site/src/components/Abbr/Abbr.stories.tsx @@ -25,7 +25,7 @@ export const InlinedShorthand: Story = { }, decorators: [ (Story) => ( -

The physical pain of getting bonked on the head with a cartoon mallet lasts precisely 593{" "} From 2fefd91e1b5529d8a9edcf02bb88dbbe0f473d3a Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Thu, 7 Aug 2025 19:46:59 +0000 Subject: [PATCH 3/3] fmt --- site/src/components/Abbr/Abbr.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/site/src/components/Abbr/Abbr.tsx b/site/src/components/Abbr/Abbr.tsx index e7fe24599bccf..b27141818efb3 100644 --- a/site/src/components/Abbr/Abbr.tsx +++ b/site/src/components/Abbr/Abbr.tsx @@ -30,7 +30,12 @@ export const Abbr: FC = ({ // always have to supplement with aria-label title={title} aria-label={getAccessibleLabel(children, title, pronunciation)} - className={cn("decoration-inherit", children === children.toUpperCase() ? "tracking-wide" : "tracking-normal")} + className={cn( + "decoration-inherit", + children === children.toUpperCase() + ? "tracking-wide" + : "tracking-normal", + )} {...delegatedProps} > {children} pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: