Migrate the Body's highlight variant to semibold (#2750)

connor-baer · web-flow · commit 4b92be551b5a · 2024-10-30T13:50:27.000+01:00
diff --git a/packages/circuit-ui/components/Body/Body.module.css b/packages/circuit-ui/components/Body/Body.module.css
@@ -21,15 +21,15 @@
 
 /* Weights */
 
-.regular {
+.base.regular {
   font-weight: var(--cui-font-weight-regular);
 }
 
-.semibold {
+.base.semibold {
   font-weight: var(--cui-font-weight-semibold);
 }
 
-.bold {
+.base.bold {
   font-weight: var(--cui-font-weight-bold);
 }
 
@@ -90,7 +90,7 @@
 .highlight,
 strong.base,
 .base strong {
-  font-weight: var(--cui-font-weight-bold);
+  font-weight: var(--cui-font-weight-semibold);
 }
 
 .quote,
diff --git a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.spec.ts
@@ -354,13 +354,13 @@ ruleTester.run('no-renamed-props', noRenamedProps, {
       output: `
         function ComponentA() {
           return (
-            <Body as="strong" weight="bold">Lorem ipsum</Body>
+            <Body as="strong">Lorem ipsum</Body>
           )
         }
 
         function ComponentB() {
           return (
-            <Body as="span" weight="bold">Lorem ipsum</Body>
+            <Body as="span" weight="semibold">Lorem ipsum</Body>
           )
         }
 
diff --git a/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts b/packages/eslint-plugin-circuit-ui/no-renamed-props/index.ts
@@ -301,22 +301,16 @@ const configs: (Config & { components: string[] })[] = [
         const current = getAttributeValue(attribute);
 
         if (current === 'highlight') {
-          const replacement = `as="strong" weight="bold"`;
-          const weightAttribute = findAttribute(node, 'weight');
           const asAttribute = findAttribute(node, 'as');
+          const weightAttribute = findAttribute(node, 'weight');
+          const replacement = asAttribute ? 'weight="semibold"' : `as="strong"`;
           context.report({
             node: attribute,
             messageId: 'bodyVariant',
             data: { component, current, replacement },
             fix: weightAttribute
               ? undefined
-              : (fixer) => {
-                  // Don't override an existing `as` attribute
-                  if (asAttribute) {
-                    return fixer.replaceText(attribute, 'weight="bold"');
-                  }
-                  return fixer.replaceText(attribute, replacement);
-                },
+              : (fixer) => fixer.replaceText(attribute, replacement),
           });
           return;
         }

Original file line number	Diff line number	Diff line change
`@@ -21,15 +21,15 @@`
`21`	`21`
`22`	`22`	`/* Weights */`
`23`	`23`
`24`		`-.regular {`
	`24`	`+.base.regular {`
`25`	`25`	`font-weight: var(--cui-font-weight-regular);`
`26`	`26`	`}`
`27`	`27`
`28`		`-.semibold {`
	`28`	`+.base.semibold {`
`29`	`29`	`font-weight: var(--cui-font-weight-semibold);`
`30`	`30`	`}`
`31`	`31`
`32`		`-.bold {`
	`32`	`+.base.bold {`
`33`	`33`	`font-weight: var(--cui-font-weight-bold);`
`34`	`34`	`}`
`35`	`35`
`@@ -90,7 +90,7 @@`
`90`	`90`	`.highlight,`
`91`	`91`	`strong.base,`
`92`	`92`	`.base strong {`
`93`		`- font-weight: var(--cui-font-weight-bold);`
	`93`	`+ font-weight: var(--cui-font-weight-semibold);`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`.quote,`
Original file line number	Diff line number	Diff line change
`@@ -354,13 +354,13 @@ ruleTester.run('no-renamed-props', noRenamedProps, {`
`354`	`354`	output: `
`355`	`355`	`function ComponentA() {`
`356`	`356`	`return (`
`357`		`- <Body as="strong" weight="bold">Lorem ipsum</Body>`
	`357`	`+ <Body as="strong">Lorem ipsum</Body>`
`358`	`358`	`)`
`359`	`359`	`}`
`360`	`360`
`361`	`361`	`function ComponentB() {`
`362`	`362`	`return (`
`363`		`- <Body as="span" weight="bold">Lorem ipsum</Body>`
	`363`	`+ <Body as="span" weight="semibold">Lorem ipsum</Body>`
`364`	`364`	`)`
`365`	`365`	`}`
`366`	`366`