Add default styles to the TabPanel component (#20872)

WordPress · Mar 13, 2020 · a38de90 · a38de90
1 parent 7eaf250
commit a38de90
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 6 deletions.
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
@@ -41,6 +41,7 @@
 @import "./select-control/style.scss";
 @import "./snackbar/style.scss";
 @import "./spinner/style.scss";
+@import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
 @import "./textarea-control/style.scss";
 @import "./tip/style.scss";

diff --git a/packages/components/src/tab-panel/index.js b/packages/components/src/tab-panel/index.js
@@ -78,9 +78,13 @@ class TabPanel extends Component {
 				>
 					{ tabs.map( ( tab ) => (
 						<TabButton
-							className={ classnames( tab.className, {
-								[ activeClass ]: tab.name === selected,
-							} ) }
+							className={ classnames(
+								'components-tab-panel__tabs-item',
+								tab.className,
+								{
+									[ activeClass ]: tab.name === selected,
+								}
+							) }
 							tabId={ instanceId + '-' + tab.name }
 							aria-controls={
 								instanceId + '-' + tab.name + '-view'

diff --git a/packages/components/src/tab-panel/stories/index.js b/packages/components/src/tab-panel/stories/index.js
@@ -14,7 +14,6 @@ export const _default = () => {
 	return (
 		<TabPanel
 			className="my-tab-panel"
-			activeClass="active-tab"
 			tabs={ [
 				{
 					name: 'tab1',

diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss
@@ -0,0 +1,44 @@
+.components-tab-panel__tabs {
+	display: flex;
+	align-items: stretch;
+}
+
+.components-tab-panel__tabs-item {
+	background: transparent;
+	border: none;
+	border-radius: 0;
+	box-shadow: none;
+	cursor: pointer;
+	height: 50px;
+	padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
+	margin-left: 0;
+	font-weight: 400;
+	@include square-style__neutral;
+	transition: box-shadow 0.1s linear;
+
+	&:focus:enabled {
+		color: $dark-gray-900;
+		outline-offset: -1px;
+		outline: 1px dotted $dark-gray-500;
+	}
+
+	&:focus:enabled,
+	&.is-active {
+		box-shadow: inset 0 -3px theme(outlines);
+		font-weight: 600;
+		position: relative;
+		background: transparent;
+
+		// This border appears in Windows High Contrast mode instead of the box-shadow.
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			bottom: 1px;
+			right: 0;
+			left: 0;
+			border-bottom: 3px solid transparent;
+		}
+	}
+
+}
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
@@ -7893,7 +7893,7 @@ exports[`Storyshots Components/TabPanel Default 1`] = `
     <button
       aria-controls="0-tab1-view"
       aria-selected={true}
-      className="components-button tab-one active-tab"
+      className="components-button components-tab-panel__tabs-item tab-one is-active"
       id="0-tab1"
       onClick={[Function]}
       role="tab"
@@ -7905,7 +7905,7 @@ exports[`Storyshots Components/TabPanel Default 1`] = `
     <button
       aria-controls="0-tab2-view"
       aria-selected={false}
-      className="components-button tab-two"
+      className="components-button components-tab-panel__tabs-item tab-two"
       id="0-tab2"
       onClick={[Function]}
       role="tab"