Add small variant to underline nav (#2225)

* Add small variant to underline nav

* Update documentation

* Fix up the build

* Create five-avocados-doubt.md

* adjusts vertical alignment of leading icon

Co-authored-by: Mike Perrotti <[email protected]>

Author: pksjce

.changeset/five-avocados-doubt.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add small variant to underline nav

docs/content/drafts/UnderlineNav2.mdx

@@ -27,6 +27,15 @@ description: Use an underlined nav to allow tab like navigation with overflow be
 </UnderlineNav>
 ```
 
+### Small variant
+
+```jsx live drafts
+<UnderlineNav label="small variant" variant="small">
+  <UnderlineNav.Link selected>Item 1</UnderlineNav.Link>
+  <UnderlineNav.Link>Item 2</UnderlineNav.Link>
+</UnderlineNav>
+```
+
 ## Props
 
 ### UnderlineNav
@@ -38,9 +47,16 @@ description: Use an underlined nav to allow tab like navigation with overflow be
   <PropsTableRow
     name="overflow"
     type="'auto' | 'menu' | 'scroll'"
+    defaultValue="auto"
     description="Controls the type of overflow behaviour in smaller screens"
   />
-  <PropsTableRow name="align" type="right | left" description="The alignment of the nav links" />
+  <PropsTableRow name="align" type="right | left" defaultValue="left" description="The alignment of the nav links" />
+  <PropsTableRow
+    name="variant"
+    type="default | small"
+    defaultValue="default"
+    description="The alignment of the nav links"
+  />
   <PropsTableRow
     name="afterSelect"
     type="(event) => void"
@@ -59,7 +75,12 @@ description: Use an underlined nav to allow tab like navigation with overflow be
     type="(event) => void"
     description="The handler that gets called when a nav link is selected"
   />
-  <PropsTableRow name="as" type="string | Component" description="What kind of component needs to be rendered" />
+  <PropsTableRow
+    name="as"
+    type="string | Component"
+    defaultValue="a"
+    description="What kind of component needs to be rendered"
+  />
   <PropsTableSxRow />
 </PropsTable>
 

src/UnderlineNav2/UnderlineNav.tsx

@@ -63,13 +63,23 @@ export type UnderlineNavProps = {
   overflow?: Overflow
   align?: 'right'
   sx?: SxProp
+  variant?: 'default' | 'small'
   afterSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
   children: React.ReactNode
 }
 
 export const UnderlineNav = forwardRef(
   (
-    {as = 'nav', overflow = 'auto', align, label, sx: sxProp = {}, afterSelect, children}: UnderlineNavProps,
+    {
+      as = 'nav',
+      overflow = 'auto',
+      align,
+      label,
+      sx: sxProp = {},
+      afterSelect,
+      variant = 'default',
+      children
+    }: UnderlineNavProps,
     forwardedRef
   ) => {
     const backupRef = useRef<HTMLElement>(null)
@@ -131,7 +141,7 @@ export const UnderlineNav = forwardRef(
     useResizeObserver(resizeObserverCallback, newRef as RefObject<HTMLElement>)
     return (
       <UnderlineNavContext.Provider
-        value={{setChildrenWidth, selectedLink, setSelectedLink, afterSelect: afterSelectHandler}}
+        value={{setChildrenWidth, selectedLink, setSelectedLink, afterSelect: afterSelectHandler, variant}}
       >
         <Box as={as} sx={merge(styles, sxProp)} aria-label={label} ref={newRef}>
           <Box as="ul" sx={merge<BetterSystemStyleObject>(overflowStyles, ulStyles)}>

src/UnderlineNav2/UnderlineNavContext.tsx

@@ -5,8 +5,10 @@ export const UnderlineNavContext = createContext<{
   selectedLink: RefObject<HTMLElement> | undefined
   setSelectedLink: (ref: RefObject<HTMLElement>) => void
   afterSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
+  variant: 'default' | 'small'
 }>({
   setChildrenWidth: () => null,
   selectedLink: undefined,
-  setSelectedLink: () => null
+  setSelectedLink: () => null,
+  variant: 'default'
 })

src/UnderlineNav2/UnderlineNavLink.tsx

@@ -55,20 +55,29 @@ export const UnderlineNavLink = forwardRef(
   ) => {
     const backupRef = useRef<HTMLElement>(null)
     const ref = forwardedRef ?? backupRef
-    const {setChildrenWidth, selectedLink, setSelectedLink, afterSelect} = useContext(UnderlineNavContext)
+    const {setChildrenWidth, selectedLink, setSelectedLink, afterSelect, variant} = useContext(UnderlineNavContext)
     useLayoutEffect(() => {
       const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
       setChildrenWidth({width: domRect.width})
       preSelected && selectedLink === undefined && setSelectedLink(ref as RefObject<HTMLElement>)
     }, [ref, preSelected, selectedLink, setSelectedLink, setChildrenWidth])
     const iconWrapStyles = {
-      display: 'inline-block',
-      marginRight: '8px'
+      alignItems: 'center',
+      display: 'inline-flex',
+      marginRight: 2
     }
 
     const textStyles: BetterSystemStyleObject = {
       whiteSpace: 'nowrap'
     }
+    const smallVariantLinkStyles = {
+      paddingY: 2,
+      fontSize: 0
+    }
+    const defaultVariantLinkStyles = {
+      paddingY: 3,
+      fontSize: 1
+    }
 
     const linkStyles = {
       display: 'inline-flex',
@@ -78,9 +87,8 @@ export const UnderlineNavLink = forwardRef(
       borderColor: selectedLink === ref ? 'primer.border.active' : 'transparent',
       textDecoration: 'none',
       paddingX: 2,
-      paddingY: 3,
       marginRight: 3,
-      fontSize: 1,
+      ...(variant === 'small' ? smallVariantLinkStyles : defaultVariantLinkStyles),
       '&:hover, &:focus': {
         borderColor: selectedLink === ref ? 'primer.border.active' : 'neutral.muted',
         transition: '0.2s ease'

src/UnderlineNav2/examples.stories.tsx

@@ -14,6 +14,13 @@ export default {
         type: 'radio',
         options: ['left', 'right']
       }
+    },
+    variant: {
+      defaultValue: 'default',
+      control: {
+        type: 'radio',
+        options: ['default', 'small']
+      }
     }
   },
   decorators: [