Merge branch 'main' into cb/functional-vars-1

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/components
 
+## 23.2.1
+
+### Patch Changes
+
+- [`a42162c0`](https://github.com/primer/components/commit/a42162c011fa3718a32124b79aecfe306f358298) [#1087](https://github.com/primer/components/pull/1087) Thanks [@emplums](https://github.com/emplums)! - Fix up styles in TabNav allowing for items positioned on the right end of TabNav
+
 ## 23.2.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "23.2.0",
+  "version": "23.2.1",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

src/TabNav.tsx

@@ -11,26 +11,25 @@ import * as History from 'history'
 const ITEM_CLASS = 'TabNav-item'
 const SELECTED_CLASS = 'selected'
 
-const TabNavBase = styled.nav<SystemCommonProps & SxProp>`
-  display: flex;
+const TabNavBase = styled.div<SystemCommonProps & SxProp>`
+  margin-top: 0;
   border-bottom: 1px solid ${get('colors.border.gray')};
-
-  .TabNav-body {
-    display: flex;
-    margin-bottom: -1px;
-  }
-
   ${COMMON}
   ${sx}
 `
 
+const TabNavBody = styled.nav`
+  display: flex;
+  margin-bottom: -1px;
+  overflow: auto;
+`
+
 export type TabNavProps = ComponentProps<typeof TabNavBase>
 
-function TabNav({className, children, ...rest}: TabNavProps) {
-  const classes = classnames(className, 'TabNav')
+function TabNav({children, ...rest}: TabNavProps) {
   return (
-    <TabNavBase className={classes} {...rest}>
-      <div className="TabNav-body">{children}</div>
+    <TabNavBase {...rest}>
+      <TabNavBody>{children}</TabNavBody>
     </TabNavBase>
   )
 }

src/__tests__/TabNav.tsx

@@ -25,23 +25,7 @@ describe('TabNav', () => {
     cleanup()
   })
 
-  it('renders a <nav>', () => {
-    expect(render(<TabNav />).type).toEqual('nav')
-  })
-
-  it('adds the TabNav class', () => {
-    expect(rendersClass(<TabNav />, 'TabNav')).toEqual(true)
-  })
-
   it('sets aria-label appropriately', () => {
     expect(render(<TabNav aria-label="foo" />).props['aria-label']).toEqual('foo')
   })
-
-  it('wraps its children in an "TabNav-body" div', () => {
-    const children = <b>children</b>
-    const wrapper = mount(<TabNav>{children}</TabNav>)
-    const body = wrapper.find('.TabNav-body')
-    expect(body.exists()).toEqual(true)
-    expect(body.childAt(0).type()).toEqual('b')
-  })
 })

src/__tests__/__snapshots__/TabNav.tsx.snap

@@ -35,26 +35,24 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
 
 exports[`TabNav renders consistently 1`] = `
 .c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  margin-top: 0;
   border-bottom: 1px solid #e1e4e8;
 }
 
-.c0 .TabNav-body {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   margin-bottom: -1px;
+  overflow: auto;
 }
 
-<nav
-  className="c0 TabNav"
+<div
+  className="c0"
 >
-  <div
-    className="TabNav-body"
+  <nav
+    className="c1"
   />
-</nav>
+</div>
 `;