label alignment style updates

microsoft · Aug 19, 2021 · 08fb8b4 · 08fb8b4
1 parent a5890ed
commit 08fb8b4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/web-components/src/toolbar/fixtures/toolbar.html b/packages/web-components/src/toolbar/fixtures/toolbar.html
@@ -9,7 +9,12 @@
 </svg>
 <style>
   fluent-radio-group {
-    margin: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  fluent-radio {
+    margin-top: 0;
+    margin-bottom: 0;
   }
 </style>
 
@@ -133,9 +138,9 @@ <h2>Slotted End Items w/ Min Width</h2>
   </fluent-toolbar>
 </fluent-design-system-provider>
 
-<h2>Toolbar with slotted label</h2>
+<h2>Toolbar with slotted span label</h2>
 <fluent-toolbar id="toolbar-slotted-label">
-  <label slot="label">Slotted label</label>
+  <span slot="label">Span Label</span>
   <button>One</button>
   <button>Two</button>
   <button>Three</button>
@@ -158,6 +163,7 @@ <h2>Toolbar with invisible label</h2>
 
 <h2>Vertical orientation</h2>
 <fluent-toolbar id="toolbar-vertical-orientation" orientation="vertical">
+  <span slot="label">Span Label</span>
   <button>One</button>
   <button>Two</button>
   <button>Three</button>
@@ -195,6 +201,7 @@ <h2>Disabled Elements</h2>
 </fluent-toolbar>
 
 <fluent-toolbar id="toolbar-first-two-disabled" orientation="vertical">
+  <span slot="label">Span Label</span>
   <fluent-checkbox disabled>One</fluent-checkbox>
   <fluent-checkbox disabled>Two</fluent-checkbox>
   <fluent-checkbox>Three</fluent-checkbox>

diff --git a/packages/web-components/src/toolbar/toolbar.styles.ts b/packages/web-components/src/toolbar/toolbar.styles.ts
@@ -29,6 +29,7 @@ export const toolbarStyles: (
           fill: currentcolor;
           padding: var(--toolbar-item-gap);
           box-sizing: border-box;
+          align-items: center;
       }
 
       :host(${focusVisible}) {
@@ -57,6 +58,11 @@ export const toolbarStyles: (
           margin: var(--toolbar-item-gap) 0;
       }
 
+      :host([orientation="vertical"]) {
+        display: inline-flex;
+        flex-direction: column;
+    }
+
       .start,
       .end {
           display: flex;