Commitd1e64af

authored

refactor: migrate Abbr to Tailwind (#19242)

1 parent5225c56 commitd1e64afCopy full SHA for d1e64af

File tree

+11

-15

lines changed

+11

-15

lines changed

Lines changed: 4 additions & 11 deletions

Original file line number	Diff line number	Diff line change
`@@ -25,10 +25,10 @@ export const InlinedShorthand: Story = {`
`25`	`25`	`},`
`26`	`26`	`decorators:[`
`27`	`27`	`(Story)=>(`
`28`		`-<pcss={{maxWidth:"40em"}}>`
	`28`	`+<pclassName="max-w-2xl">`
`29`	`29`	`The physical pain of getting bonked on the head with a cartoon mallet`
`30`	`30`	`lasts precisely 593{" "}`
`31`		`-<spancss={styles.underlined}>`
	`31`	`+<spanclassName="underline decoration-dotted">`
`32`	`32`	`<Story/>`
`33`	`33`	`</span>`
`34`	`34`	`. The emotional turmoil and complete embarrassment lasts forever.`
`@@ -45,7 +45,7 @@ export const Acronym: Story = {`
`45`	`45`	`},`
`46`	`46`	`decorators:[`
`47`	`47`	`(Story)=>(`
`48`		`-<spancss={styles.underlined}>`
	`48`	`+<spanclassName="underline decoration-dotted">`
`49`	`49`	`<Story/>`
`50`	`50`	`</span>`
`51`	`51`	`),`
`@@ -60,16 +60,9 @@ export const Initialism: Story = {`
`60`	`60`	`},`
`61`	`61`	`decorators:[`
`62`	`62`	`(Story)=>(`
`63`		`-<spancss={styles.underlined}>`
	`63`	`+<spanclassName="underline decoration-dotted">`
`64`	`64`	`<Story/>`
`65`	`65`	`</span>`
`66`	`66`	`),`
`67`	`67`	`],`
`68`	`68`	`};`
`69`		`-`
`70`		`-conststyles={`
`71`		`-// Just here to make the abbreviated part more obvious in the component library`
`72`		`-underlined:{`
`73`		`-textDecoration:"underline dotted",`
`74`		`-},`
`75`		`-};`

Lines changed: 7 additions & 4 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`importtype{FC,HTMLAttributes}from"react";`
	`2`	`+import{cn}from"utils/cn";`
`2`	`3`
`3`	`4`	`exporttypePronunciation="shorthand"\|"acronym"\|"initialism";`
`4`	`5`
`@@ -29,10 +30,12 @@ export const Abbr: FC<AbbrProps> = ({`
`29`	`30`	`// always have to supplement with aria-label`
`30`	`31`	`title={title}`
`31`	`32`	`aria-label={getAccessibleLabel(children,title,pronunciation)}`
`32`		`-css={{`
`33`		`-textDecoration:"inherit",`
`34`		`-letterSpacing:children===children.toUpperCase() ?"0.02em" :"0",`
`35`		`-}}`
	`33`	`+className={cn(`
	`34`	`+"decoration-inherit",`
	`35`	`+children===children.toUpperCase()`
	`36`	`+?"tracking-wide"`
	`37`	`+:"tracking-normal",`
	`38`	`+)}`
`36`	`39`	`{...delegatedProps}`
`37`	`40`	`>`
`38`	`41`	`<spanaria-hidden>{children}</span>`

Comments

(0)