Merge release/1.38.3 into main branch (#812)

github-actions[bot] · web-flow · commit 4663cd1f8e2f · 2023-01-17T14:02:26.000-08:00
* Adding optional props to Tabs component (#811)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.38.2",
+  "version": "1.38.3",
   "dependencies": {
     "react-bootstrap": "^2.5.0",
     "react-loading-skeleton": "^3.1.0",
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -20626,7 +20626,7 @@ exports[`Storyshots Components/Tabs Controlled 1`] = `
 >
   <div>
     <span
-      className="sc-dkPtRN klomrB"
+      className="sc-dkPtRN gfzzIq"
     >
       <ul
         className="nav nav-tabs"
@@ -20793,7 +20793,7 @@ exports[`Storyshots Components/Tabs Uncontrolled 1`] = `
 >
   <div>
     <span
-      className="sc-dkPtRN klomrB"
+      className="sc-dkPtRN gfzzIq"
     >
       <ul
         className="nav nav-tabs"
diff --git a/src/Tabs/Tabs.jsx b/src/Tabs/Tabs.jsx
@@ -7,9 +7,14 @@ import { StyledTabsWrapper } from './Tabs.styles';
 
 const Tabs = ({
   children,
+  flexWrapUnset,
+  navItemButtonFullHeight,
   ...props
 }) => (
-  <StyledTabsWrapper>
+  <StyledTabsWrapper
+    flexWrapUnset={flexWrapUnset}
+    navItemButtonFullHeight={navItemButtonFullHeight}
+  >
     <ReactBootstrapTabs variant="tabs" {...props}>
       {children}
     </ReactBootstrapTabs>
@@ -21,8 +26,10 @@ export default Tabs;
 Tabs.propTypes = {
   activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  flexWrapUnset: PropTypes.bool,
   id: PropTypes.string.isRequired,
   mountOnEnter: PropTypes.bool,
+  navItemButtonFullHeight: PropTypes.bool,
   transition: PropTypes.oneOfType([
       PropTypes.oneOf([false]),
       PropTypes.elementType,
@@ -34,7 +41,9 @@ Tabs.propTypes = {
 Tabs.defaultProps = {
   activeKey: undefined,
   defaultActiveKey: 1,
+  flexWrapUnset: false,
   mountOnEnter: undefined,
+  navItemButtonFullHeight: false,
   transition: undefined,
   unmountOnExit: undefined,
   onSelect: undefined,
diff --git a/src/Tabs/Tabs.styles.js b/src/Tabs/Tabs.styles.js
@@ -6,6 +6,20 @@ const borderWidth = '0.125rem';
 const fontType30 = '400 0.875rem/1.25rem DM Sans, sans-serif';
 
 export const StyledTabsWrapper = styled.span`
+  ${({ flexWrapUnset }) => flexWrapUnset && `
+    .nav {
+      flex-wrap: nowrap;
+    }
+  `}
+
+  ${({ navItemButtonFullHeight }) => navItemButtonFullHeight && `
+    .nav-item {
+      button {
+        height: calc(100% + ${borderWidth});
+      }
+    }
+  `}
+
   .nav-tabs {
     border-bottom: ${borderWidth} solid ${colors.UX_GRAY_400};
   }
diff --git a/src/Tabs/__snapshots__/Tabs.test.jsx.snap b/src/Tabs/__snapshots__/Tabs.test.jsx.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <span
-        class="sc-bdvvtL eGviLc"
+        class="sc-bdvvtL leMoEj"
       >
         <ul
           class="nav nav-tabs"
@@ -98,7 +98,7 @@ Object {
   </body>,
   "container": <div>
     <span
-      class="sc-bdvvtL eGviLc"
+      class="sc-bdvvtL leMoEj"
     >
       <ul
         class="nav nav-tabs"
@@ -247,7 +247,7 @@ Object {
   "baseElement": <body>
     <div>
       <span
-        class="sc-bdvvtL eGviLc"
+        class="sc-bdvvtL leMoEj"
       >
         <ul
           class="nav nav-tabs"
@@ -339,7 +339,7 @@ Object {
   </body>,
   "container": <div>
     <span
-      class="sc-bdvvtL eGviLc"
+      class="sc-bdvvtL leMoEj"
     >
       <ul
         class="nav nav-tabs"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@user-interviews/ui-design-system",`
`3`		`- "version": "1.38.2",`
	`3`	`+ "version": "1.38.3",`
`4`	`4`	`"dependencies": {`
`5`	`5`	`"react-bootstrap": "^2.5.0",`
`6`	`6`	`"react-loading-skeleton": "^3.1.0",`
Original file line number	Diff line number	Diff line change
@@ -20626,7 +20626,7 @@ exports[`Storyshots Components/Tabs Controlled 1`] = `
`20626`	`20626`	`>`
`20627`	`20627`	`<div>`
`20628`	`20628`	`<span`
`20629`		`- className="sc-dkPtRN klomrB"`
	`20629`	`+ className="sc-dkPtRN gfzzIq"`
`20630`	`20630`	`>`
`20631`	`20631`	`<ul`
`20632`	`20632`	`className="nav nav-tabs"`
@@ -20793,7 +20793,7 @@ exports[`Storyshots Components/Tabs Uncontrolled 1`] = `
`20793`	`20793`	`>`
`20794`	`20794`	`<div>`
`20795`	`20795`	`<span`
`20796`		`- className="sc-dkPtRN klomrB"`
	`20796`	`+ className="sc-dkPtRN gfzzIq"`
`20797`	`20797`	`>`
`20798`	`20798`	`<ul`
`20799`	`20799`	`className="nav nav-tabs"`