fix(tabs): ensure tabs has layout

adobe · Jul 19, 2021 · 7aba515 · 7aba515
1 parent 11b5f90
commit 7aba515
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/packages/tabs/src/tabs.css b/packages/tabs/src/tabs.css
@@ -12,6 +12,18 @@ governing permissions and limitations under the License.
 
 @import './spectrum-tabs.css';
 
+:host {
+    display: grid;
+}
+
+:host([direction^='vertical']) {
+    grid-template-columns: auto 1fr;
+}
+
+#list {
+    justify-content: var(--swc-tabs-list-justify-content);
+}
+
 /*
  * While https://github.com/adobe/spectrum-css/issues/641 goes unaddressed,
  * then we'll need to place this at `top: 0;` ourselves.

diff --git a/packages/tabs/stories/tabs.stories.ts b/packages/tabs/stories/tabs.stories.ts
@@ -125,8 +125,7 @@ export const VerticalSized = (args: Properties): TemplateResult => {
         <style>
             sp-tabs {
                 height: 75vh;
-                flex-direction: column;
-                justify-content: center;
+                --swc-tabs-list-justify-content: center;
             }
         </style>
         <sp-tabs
@@ -149,8 +148,7 @@ export const VerticalRight = (args: Properties): TemplateResult => {
         <style>
             sp-tabs {
                 height: 75vh;
-                flex-direction: column;
-                justify-content: center;
+                --swc-tabs-list-justify-content: center;
             }
         </style>
         <sp-tabs