[terra-button] Button left align wrapped text (#4081)

cerner · Apr 4, 2024 · a02a456 · a02a456
1 parent 8bca06e
commit a02a456
Show file tree

Hide file tree

Showing 9 changed files with 9 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/...e/clinical-lowlight-theme/en/chrome_tiny/button-spec/long_text_left_aligned.png b/...e/clinical-lowlight-theme/en/chrome_tiny/button-spec/long_text_left_aligned.png
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/...erence/orion-fusion-theme/en/chrome_tiny/button-spec/long_text_left_aligned.png b/...erence/orion-fusion-theme/en/chrome_tiny/button-spec/long_text_left_aligned.png
diff --git a/...rence/terra-default-theme/en/chrome_tiny/button-spec/long_text_left_aligned.png b/...rence/terra-default-theme/en/chrome_tiny/button-spec/long_text_left_aligned.png
diff --git a/packages/terra-button/tests/wdio/button-spec.js b/packages/terra-button/tests/wdio/button-spec.js
@@ -131,6 +131,7 @@ Terra.describeViewports('Button', ['tiny'], () => {
     $('#root').moveTo();
 
     Terra.validates.element('long text', { selector: '#long-text' });
+    Terra.validates.element('long text left aligned', { selector: '#long-text-left-block' });
   });
 
   it('displays Button with left aligned text', () => {

diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 * Changed
   * Updated documentation for `terra-signature`.
+  * Updated long text example for `terra-button` to show left alignment for wrapping button text.
 
 ## 1.69.0 - (March 27, 2024)
 

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 />