fix(tab-list): position the indicator correctly when sized

adobe · Mar 13, 2020 · e956758 · e956758
1 parent 15e5282
commit e956758
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/packages/tab-list/src/tab-list.css b/packages/tab-list/src/tab-list.css
@@ -40,6 +40,15 @@ governing permissions and limitations under the License.
     );
 }
 
+/*
+ * While https://github.com/adobe/spectrum-css/issues/641 goes unaddressed,
+ * then we'll need to place this at `top: 0;` ourselves.
+ */
+:host([direction='vertical-right']) #selectionIndicator,
+:host([direction='vertical']) #selectionIndicator {
+    top: 0;
+}
+
 /* 
  * Since #tab is the shadowSelector for tab-item, the default line-height
  * declaration in #tab overrides the compact line-height declared in

diff --git a/packages/tab/stories/tabs.stories.ts b/packages/tab/stories/tabs.stories.ts
@@ -54,8 +54,33 @@ export const Vertical = (): TemplateResult => {
     `;
 };
 
+export const VerticalSized = (): TemplateResult => {
+    return html`
+        <style>
+            sp-tab-list {
+                height: 75vh;
+                flex-direction: column;
+                justify-content: center;
+            }
+        </style>
+        <sp-tab-list selected="1" direction="vertical">
+            <sp-tab label="Tab 1" value="1"></sp-tab>
+            <sp-tab label="Tab 2" value="2"></sp-tab>
+            <sp-tab label="Tab 3" value="3"></sp-tab>
+            <sp-tab label="Tab 4" value="4"></sp-tab>
+        </sp-tab-list>
+    `;
+};
+
 export const VerticalRight = (): TemplateResult => {
     return html`
+        <style>
+            sp-tab-list {
+                height: 75vh;
+                flex-direction: column;
+                justify-content: center;
+            }
+        </style>
         <sp-tab-list selected="1" direction="vertical-right">
             <sp-tab label="Tab 1" value="1"></sp-tab>
             <sp-tab label="Tab 2" value="2"></sp-tab>

diff --git a/test/visual/stories.js b/test/visual/stories.js
@@ -112,6 +112,8 @@ module.exports = [
     'tabs--default',
     'tabs--autofocus',
     'tabs--vertical',
+    'tabs--vertical-sized',
+    'tabs--vertical-right',
     'tabs--icons',
     'tabs--icons-ii',
     'tabs--quiet',