Use fonts.brand for Legend & MenuGroupLabel (#1553)

Author: Luke Bowerman

CHANGELOG.md

@@ -33,6 +33,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `HoverDisclosure` toggles visibility with css rather than inserting elements into the DOM
 - `InputSearch` `onChange` callback argument is now a string rather than an event
 - `InputTimeSelect` supports 20- and 60-minute intervals
+- `Legend` now applies font-family `brand`
+- `MenuGroupLabel` now applies font-family `brand`
 - `Span` replaced all library-internal usage of `Text` with `Span`
 - `TreeItem` now supports text truncation behavior
 - `TreeItem` now wraps long text pleasantly

packages/components/src/Form/Fieldset/__snapshots__/Fieldset.test.tsx.snap

@@ -34,9 +34,10 @@ exports[`Fieldset 1`] = `
 }
 
 .c2 {
-  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
+  font-family: Roboto,'Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   color: #343C42;
   padding: 0rem;
+  font-family: Roboto,'Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   font-size: 1rem;
   font-weight: 600;
 }
@@ -250,6 +251,7 @@ exports[`Fieldset 1`] = `
     <legend
       className="c2"
       color="text4"
+      fontFamily="brand"
       fontSize="medium"
       fontWeight="semiBold"
     >

packages/components/src/Form/Legend/Legend.tsx

@@ -49,6 +49,7 @@ export const Legend = styled.legend<LegendProps>`
 
 Legend.defaultProps = {
   color: 'text4',
+  fontFamily: 'brand',
   fontSize: 'medium',
   fontWeight: 'semiBold',
   padding: 'none',

packages/components/src/Form/Legend/__snapshots__/Legend.test.tsx.snap

@@ -2,16 +2,18 @@
 
 exports[`A Legend 1`] = `
 .c0 {
-  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
+  font-family: Roboto,'Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   color: #343C42;
   padding: 0rem;
+  font-family: Roboto,'Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   font-size: 1rem;
   font-weight: 600;
 }
 
 <legend
   className="c0"
   color="text4"
+  fontFamily="brand"
   fontSize="medium"
   fontWeight="semiBold"
 >

packages/components/src/Menu/MenuGroupLabel.tsx

@@ -42,13 +42,7 @@ export const MenuGroupLabel: FC = ({ children }) => {
         render the shadow.
       */}
       <div ref={labelShimRef} style={{ height: '0' }} />
-      <Heading
-        as="h2"
-        fontFamily="body"
-        fontSize="small"
-        fontWeight="semiBold"
-        pl="medium"
-      >
+      <Heading as="h2" fontSize="small" fontWeight="semiBold" pl="medium">
         {children}
       </Heading>
     </MenuGroupLabelWrapper>

packages/components/src/Menu/__snapshots__/MenuGroup.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`MenuGroup - JSX label 1`] = `
 }
 
 .c3 {
-  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
+  font-family: Roboto,'Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1.25rem;
@@ -143,7 +143,7 @@ exports[`MenuGroup - JSX label 1`] = `
     />
     <h2
       className="c2 c3"
-      fontFamily="body"
+      fontFamily="brand"
       fontSize="small"
       fontWeight="semiBold"
     >
@@ -214,7 +214,7 @@ exports[`MenuGroup - label 1`] = `
 }
 
 .c3 {
-  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
+  font-family: Roboto,'Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1.25rem;
@@ -346,7 +346,7 @@ exports[`MenuGroup - label 1`] = `
     />
     <h2
       className="c2 c3"
-      fontFamily="body"
+      fontFamily="brand"
       fontSize="small"
       fontWeight="semiBold"
     >