set tabs to inline when not full width

appnexus · May 7, 2019 · ac6bc8a · ac6bc8a
1 parent 2128be7
commit ac6bc8a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,3 +13,4 @@
 - removed `border` prop from `Table.td`
 - removed `isActionable` from `table`
 - added `presetSize` to `SettingsIcon`
+- `Tabs` is now an inline element when the `hasFullWidthTabs` is false
diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx
@@ -284,7 +284,16 @@ const Tabs = createClass({
 				: selectedIndex;
 
 		return (
-			<div {...omitProps(passThroughs, Tabs)} className={cx('&', className)}>
+			<div
+				{...omitProps(passThroughs, Tabs)}
+				className={cx(
+					'&',
+					{
+						'&-container-variable-width': !hasFullWidthTabs,
+					},
+					className
+				)}
+			>
 				<ul
 					className={cx('&-bar', {
 						'&-bar-is-multiline': hasMultilineTitle,

diff --git a/src/components/Tabs/Tabs.less b/src/components/Tabs/Tabs.less
@@ -5,6 +5,8 @@
 @Tabs-border-width: 1px;
 
 .@{prefix}-Tabs {
+
+
 	&-bar {
 		font-size: @size-font;
 		font-weight: @font-weight-semiBold;
@@ -15,6 +17,10 @@
 		padding: 0;
 	}
 
+	&-container-variable-width {
+		display: inline;
+	}
+
 	&-variable-width {
 
 		display: inline-flex;
@@ -39,15 +45,15 @@
 		color: @color-darkGray;
 		user-select: none;
 		background-color: @color-white;
-		
+
 		&:hover {
 			border-bottom: 3px solid @color-primary;
 		}
 
 		&:active {
 			.dropshadow-gradient(@color-gray, @color-lightGray, @Tabs-spacer-height);
 		}
-		
+
 		.@{prefix}-Badge {
 			cursor: pointer;
 		}
@@ -56,15 +62,15 @@
 	&-Tab-is-disabled {
 		color: @color-neutral-6;
 		cursor: not-allowed;
-		
+
 		&:hover {
 			border-bottom: 0;
 		}
-		
+
 		&:active {
 			background: @color-white;
 		}
-		
+
 		.@{prefix}-Badge {
 			color: @color-neutral-6;
 			border-color: @color-neutral-5;

diff --git a/src/components/Tabs/__snapshots__/Tabs.spec.jsx.snap b/src/components/Tabs/__snapshots__/Tabs.spec.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Tabs [common] example testing should match snapshot(s) for 01-title-as-prop 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-variable-width"
@@ -68,7 +68,7 @@ exports[`Tabs [common] example testing should match snapshot(s) for 01-title-as-
 
 exports[`Tabs [common] example testing should match snapshot(s) for 02-title-as-child 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-variable-width"
@@ -148,7 +148,7 @@ exports[`Tabs [common] example testing should match snapshot(s) for 02-title-as-
 
 exports[`Tabs [common] example testing should match snapshot(s) for 03-complex-title-as-child 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-bar-is-multiline lucid-Tabs-variable-width"
@@ -358,7 +358,7 @@ exports[`Tabs [common] example testing should match snapshot(s) for 03-complex-t
 
 exports[`Tabs [common] example testing should match snapshot(s) for 04-tab-as-prop 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-variable-width"
@@ -462,7 +462,7 @@ exports[`Tabs [common] example testing should match snapshot(s) for 05-full-widt
 
 exports[`Tabs [common] example testing should match snapshot(s) for 06-variable-width 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-variable-width"
@@ -541,7 +541,7 @@ exports[`Tabs [common] example testing should match snapshot(s) for 06-variable-
 
 exports[`Tabs [common] example testing should match snapshot(s) for 07-progression 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-variable-width"
@@ -619,7 +619,7 @@ exports[`Tabs [common] example testing should match snapshot(s) for 07-progressi
 
 exports[`Tabs [common] example testing should match snapshot(s) for 08-progression-variable-width 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-variable-width"
@@ -722,7 +722,7 @@ exports[`Tabs [common] example testing should match snapshot(s) for 08-progressi
 
 exports[`Tabs [common] example testing should match snapshot(s) for 09-with-count 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-variable-width"
@@ -806,7 +806,7 @@ exports[`Tabs [common] example testing should match snapshot(s) for 09-with-coun
 
 exports[`Tabs [common] example testing should match snapshot(s) for 10-floating 1`] = `
 <div
-  className="lucid-Tabs"
+  className="lucid-Tabs lucid-Tabs-container-variable-width"
 >
   <ul
     className="lucid-Tabs-bar lucid-Tabs-variable-width lucid-Tabs-floating"