added a variable count width to tabs

we may want to add this to badge instead, but badge has a variable width by default. the fixed width badge was only the spec of tabs' counts.
appnexus · May 9, 2019 · 4a4c0c8 · 4a4c0c8
1 parent 374abfc
commit 4a4c0c8
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,3 +19,4 @@
 - added `isInvisible` to `SingleSelect`. We do not use a button under the hood for this component, but this simulates an invisible `Button`, styling-wise.
 - removed `kindOf` from `ToolTip`
 - added `isLight` to `ToolTip`. The default now has dark styling, and this adds light styling.
+- added `isVariableCountWidth` to `Tabs`. Allows count badges to have fixed or variable widths.
diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx
@@ -75,6 +75,11 @@ const Tab = createClass({
 		count: number`
 			Optional prop that will show a count number next to the tab's title.
 		`,
+
+		isVariableCountWidth: bool`
+			Defaults to false.
+			Allows the count bubble to grow large. Useful if working with huge numbers.
+		`,
 	},
 
 	handleClick(event) {
@@ -95,6 +100,7 @@ const Tab = createClass({
 			Title,
 			className,
 			count,
+			isVariableCountWidth,
 			...passThroughs
 		} = this.props;
 
@@ -119,7 +125,8 @@ const Tab = createClass({
 						<Badge
 							style={{
 								marginLeft: '12px',
-								width: '20px',
+								width: isVariableCountWidth ? null : '20px',
+								minWidth: '20px',
 							}}
 							type="stroke"
 							kind={isSelected ? 'primary' : null}
@@ -219,7 +226,7 @@ const Tabs = createClass({
 		`,
 
 		isFloating: bool`
-			Provides a small bottom border that offers a barrier between the tab 
+			Provides a small bottom border that offers a barrier between the tab
 			group and the rest of the page.
 			Useful if the tabs are not anchored to anything.
 		`,
@@ -237,7 +244,7 @@ const Tabs = createClass({
 
 		Tab: any`
 			*Child Element* Can be used to define one or more individual \`Tab\`s in
-			the sequence of \`Tabs\`.  
+			the sequence of \`Tabs\`.
 		`,
 	},
 

diff --git a/src/components/Tabs/examples/09-with-count.jsx b/src/components/Tabs/examples/09-with-count.jsx
@@ -6,6 +6,7 @@ export default createClass({
 	render() {
 		return (
 			<div>
+				<h4>Static Width</h4>
 				<Tabs hasFullWidthTabs={false}>
 					<Tabs.Tab count={12}>
 						<Tabs.Title>One</Tabs.Title>
@@ -24,6 +25,26 @@ export default createClass({
 						Three content
 					</Tabs.Tab>
 				</Tabs>
+
+				<h4>Variable Width</h4>
+				<Tabs hasFullWidthTabs={false}>
+					<Tabs.Tab count={1231321} isVariableCountWidth={true}>
+						<Tabs.Title>One</Tabs.Title>
+						One content
+					</Tabs.Tab>
+					<Tabs.Tab count={6546541612} isVariableCountWidth={true}>
+						<Tabs.Title>Two</Tabs.Title>
+						Two content
+					</Tabs.Tab>
+					<Tabs.Tab count={7} isVariableCountWidth={true}>
+						<Tabs.Title>Three</Tabs.Title>
+						Three content
+					</Tabs.Tab>
+					<Tabs.Tab count={123} isDisabled isVariableCountWidth={true}>
+						<Tabs.Title>Three</Tabs.Title>
+						Three content
+					</Tabs.Tab>
+				</Tabs>
 			</div>
 		);
 	},