fix: side label text alignment

adobe · Apr 16, 2024 · b037ee9 · b037ee9
1 parent 55fb881
commit b037ee9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/components/progressbar/index.css b/components/progressbar/index.css
@@ -201,13 +201,15 @@ governing permissions and limitations under the License.
     flex-grow: 0;
     margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
     margin-block-end: 0;
+    margin-block-start: 0;
   }
 
   .spectrum-ProgressBar-percentage {
     order: 3;
     text-align: end;
     margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
     margin-block-end: 0;
+    margin-block-start: 0;
   }
 }
 

diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
@@ -231,6 +231,25 @@ const Variants = (args) =>
 					>
 						${Sizes(args)}
 					</div>
+				</div>
+				<div class="spectrum-Typography">
+					${Typography({
+						semantics: "detail",
+						size: "l",
+						content: ["Sizing - Side label"],
+					})}
+					<div
+						style=${styleMap({
+							display: "flex",
+							flexDirection: "column",
+							gap: ".3rem",
+						})}
+					>
+						${Sizes({
+							...args,
+							labelPosition: "side",
+						})}
+					</div>
 				</div>`
 		: Template(args)}`;