[terra-button] Left alignment for button text that wraps.

cerner · Apr 3, 2024 · 0d4b47e · 0d4b47e
1 parent 6c96489
commit 0d4b47e
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 0 deletions.
diff --git a/packages/terra-button/CHANGELOG.md b/packages/terra-button/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated styles to ensure span content is left aligned when wrapping.
+
 ## 3.76.0 - (March 20, 2024)
 
 * Added

diff --git a/packages/terra-button/src/Button.module.scss b/packages/terra-button/src/Button.module.scss
@@ -105,6 +105,7 @@
 
     &.is-left-aligned {
       justify-content: start;
+      text-align: start;
     }
   }
 

diff --git a/...apshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/long_text.png b/...apshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/long_text.png
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/button/LongTextButton.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/button/LongTextButton.test.jsx
@@ -11,13 +11,16 @@ const words = 'Art artisan blog future next level odd park party polaroid truffa
 
 const LongTextButton = () => <Button id="long-text" text={text} />;
 const LongTextBlockButton = () => <Button id="long-text-block" text={text} isBlock />;
+const LongTextLeftBlockButton = () => <Button id="long-text-left-block" text={`Left Aligned: ${words}`} isBlock isLeftAligned />;
 
 export default () => (
   <div>
     <LongTextButton />
     <div className={cx('spacing')} />
     <LongTextBlockButton />
     <div className={cx('spacing')} />
+    <LongTextLeftBlockButton />
+    <div className={cx('spacing')} />
     <Button id="long-word" text={words} />
     <div className={cx('spacing')} />
     <Button id="long-word-block" text={words} isBlock />