From d5ea19f51132529814d09a89f95c47e58c3dd863 Mon Sep 17 00:00:00 2001 From: Charles McDonald <59840481+cm9361@users.noreply.github.com> Date: Tue, 19 Mar 2024 14:27:38 -0500 Subject: [PATCH 1/4] [terra-button] Add Left Alignment Property (#4066) --- .../__snapshots__/ActionHeader.test.jsx.snap | 17 +++++++++++++++++ .../jest/__snapshots__/Alert.test.jsx.snap | 4 ++++ .../__snapshots__/ButtonGroup.test.jsx.snap | 2 ++ .../ButtonGroupButton.test.jsx.snap | 9 +++++++++ packages/terra-button/CHANGELOG.md | 3 +++ packages/terra-button/src/Button.jsx | 7 +++++++ packages/terra-button/src/Button.module.scss | 4 ++++ .../jest/__snapshots__/Button.test.jsx.snap | 2 ++ .../button-spec/left-align-text.png | Bin 0 -> 2433 bytes .../button-spec/left-align-text.png | Bin 0 -> 3056 bytes .../button-spec/left-align-text.png | Bin 0 -> 2500 bytes .../terra-button/tests/wdio/button-spec.js | 6 ++++++ packages/terra-core-docs/CHANGELOG.md | 3 +++ .../terra-dev-site/doc/button/About.1.doc.mdx | 2 ++ .../button/example/ButtonBlockLeftAligned.jsx | 18 ++++++++++++++++++ .../test/button/LeftAlignedButton.test.jsx | 6 ++++++ .../__snapshots__/SearchField.test.jsx.snap | 15 +++++++++++++++ .../__snapshots__/StatusView.test.jsx.snap | 2 ++ .../__snapshots__/RollUpTag.test.jsx.snap | 3 +++ .../__snapshots__/ToggleButton.test.jsx.snap | 5 +++++ 20 files changed, 108 insertions(+) create mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/left-align-text.png create mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/button-spec/left-align-text.png create mode 100644 packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/left-align-text.png create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonBlockLeftAligned.jsx create mode 100644 packages/terra-core-docs/src/terra-dev-site/test/button/LeftAlignedButton.test.jsx diff --git a/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap b/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap index 82c6fbaba19..53c92a22b6f 100644 --- a/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap +++ b/packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap @@ -20,6 +20,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = ` isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.close" @@ -74,6 +75,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = ` isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.maximize" @@ -114,6 +116,7 @@ exports[`ActionHeader should render an action header with back and close buttons isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.close" @@ -140,6 +143,7 @@ exports[`ActionHeader should render an action header with back and close buttons isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.back" @@ -173,6 +177,7 @@ exports[`ActionHeader should render an action header with back button and title isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.back" @@ -204,6 +209,7 @@ exports[`ActionHeader should render an action header with close button and title isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.close" @@ -232,6 +238,7 @@ exports[`ActionHeader should render an action header with custom button and titl isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Custom Button" @@ -273,6 +280,7 @@ exports[`ActionHeader should render an action header with maximize button and ti isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.maximize" @@ -307,6 +315,7 @@ exports[`ActionHeader should render an action header with minimize button and ti isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.minimize" @@ -333,6 +342,7 @@ exports[`ActionHeader should render an action header with multiple custom button isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Custom Button" @@ -344,6 +354,7 @@ exports[`ActionHeader should render an action header with multiple custom button isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Custom Button" @@ -378,6 +389,7 @@ exports[`ActionHeader should render an action header with next and previous butt isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.previous" @@ -396,6 +408,7 @@ exports[`ActionHeader should render an action header with next and previous butt isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.next" @@ -443,6 +456,7 @@ exports[`ActionHeader should render an action header with title, enabled next bu isCompact={false} isDisabled={true} isIconOnly={true} + isLeftAligned={false} isReversed={false} text="Terra.actionHeader.previous" type="button" @@ -460,6 +474,7 @@ exports[`ActionHeader should render an action header with title, enabled next bu isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.next" @@ -497,6 +512,7 @@ exports[`ActionHeader should render an action header with title, enabled previou isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onClick={[Function]} text="Terra.actionHeader.previous" @@ -515,6 +531,7 @@ exports[`ActionHeader should render an action header with title, enabled previou isCompact={false} isDisabled={true} isIconOnly={true} + isLeftAligned={false} isReversed={false} text="Terra.actionHeader.next" type="button" diff --git a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap index 4f73464c3b7..490415c0de4 100644 --- a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap +++ b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap @@ -316,6 +316,7 @@ exports[`Alert of type success with an action button text content should render isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onClick={[MockFunction]} text="Action" @@ -966,6 +967,7 @@ exports[`Dismissible Alert of type custom with action button, custom title and t isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onClick={[MockFunction]} text="Action" @@ -978,6 +980,7 @@ exports[`Dismissible Alert of type custom with action button, custom title and t isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onClick={[MockFunction]} text="Terra.alert.dismiss" @@ -1039,6 +1042,7 @@ exports[`Dismissible Alert that includes actions section should render an alert isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onClick={[MockFunction]} text="Terra.alert.dismiss" diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap index ef78efd3b78..df0648bb098 100644 --- a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap +++ b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroup.test.jsx.snap @@ -34,6 +34,7 @@ exports[`correctly applies the theme context className 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onClick={[Function]} @@ -87,6 +88,7 @@ exports[`correctly applies the theme context className 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onClick={[Function]} diff --git a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap index 01a37b5abaf..5d13d73bc86 100644 --- a/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap +++ b/packages/terra-button-group/tests/jest/__snapshots__/ButtonGroupButton.test.jsx.snap @@ -19,6 +19,7 @@ exports[`correctly applies the theme context className 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onFocus={[Function]} @@ -64,6 +65,7 @@ exports[`should render a default component 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onFocus={[Function]} @@ -83,6 +85,7 @@ exports[`should render as disabled 1`] = ` isCompact={false} isDisabled={true} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onFocus={[Function]} @@ -107,6 +110,7 @@ exports[`should render with icon only 1`] = ` isCompact={false} isDisabled={false} isIconOnly={true} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onFocus={[Function]} @@ -126,6 +130,7 @@ exports[`should render with onBlur 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onFocus={[Function]} @@ -145,6 +150,7 @@ exports[`should render with onClick 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onClick={[Function]} @@ -165,6 +171,7 @@ exports[`should render with onFocus 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onFocus={[Function]} @@ -184,6 +191,7 @@ exports[`should render with onKeyDown 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onFocus={[Function]} @@ -203,6 +211,7 @@ exports[`should render with onKeyUp 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} onBlur={[Function]} onFocus={[Function]} diff --git a/packages/terra-button/CHANGELOG.md b/packages/terra-button/CHANGELOG.md index 91d5aeab967..21ea18e57d5 100644 --- a/packages/terra-button/CHANGELOG.md +++ b/packages/terra-button/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added isLeftAligned property to allow consumers to left align button content. + ## 3.75.0 - (February 27, 2024) * Changed diff --git a/packages/terra-button/src/Button.jsx b/packages/terra-button/src/Button.jsx index 64eb8621f53..f2c905838c7 100644 --- a/packages/terra-button/src/Button.jsx +++ b/packages/terra-button/src/Button.jsx @@ -54,6 +54,10 @@ const propTypes = { * Reverses the position of the icon and text. */ isReversed: PropTypes.bool, + /** + * Whether or not the button content should appear as left aligned. + */ + isLeftAligned: PropTypes.bool, /** * Callback function triggered when mouse is pressed. */ @@ -109,6 +113,7 @@ const defaultProps = { isDisabled: false, isIconOnly: false, isReversed: false, + isLeftAligned: false, refCallback: undefined, title: undefined, type: ButtonTypes.BUTTON, @@ -227,6 +232,7 @@ class Button extends React.Component { isDisabled, isIconOnly, isReversed, + isLeftAligned, text, type, variant, @@ -256,6 +262,7 @@ class Button extends React.Component { { 'is-disabled': isDisabled }, { block: isBlock }, { compact: isCompact }, + { 'is-left-aligned': isLeftAligned }, { 'is-active': this.state.active && !isDisabled }, { 'is-focused': this.state.focused && !isDisabled }, { 'is-selected': isSelectable && isSelected && !isDisabled }, diff --git a/packages/terra-button/src/Button.module.scss b/packages/terra-button/src/Button.module.scss index 97355543e30..0bb1d15899d 100644 --- a/packages/terra-button/src/Button.module.scss +++ b/packages/terra-button/src/Button.module.scss @@ -102,6 +102,10 @@ box-shadow: var(--terra-button-selected-and-hover-box-shadow, none); color: var(--terra-button-selected-and-hover-color, #fff); } + + &.is-left-aligned { + justify-content: start; + } } .button-label-mac { diff --git a/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap b/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap index c401315dcd9..94d556181b9 100644 --- a/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap +++ b/packages/terra-button/tests/jest/__snapshots__/Button.test.jsx.snap @@ -13,6 +13,7 @@ exports[`correctly applies the theme context className 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} text="neutral" type="button" @@ -50,6 +51,7 @@ exports[`should pass in refCallback as the ref prop of the input element 1`] = ` isCompact={false} isDisabled={false} isIconOnly={false} + isLeftAligned={false} isReversed={false} refCallback={ [MockFunction] { diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/left-align-text.png b/packages/terra-button/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/button-spec/left-align-text.png new file mode 100644 index 0000000000000000000000000000000000000000..8ba05c78d666f36b45fed83969e45658fc8855e7 GIT binary patch literal 2433 zcmaJ@2{c>l7UsGo+-MECZEA?BYH6ydnqsOpC5Ry^$`wUKP->`{Th%5?gQ%EeXqy^( zbJciF9aPPP#+0fWiW*AIrHHC`-1XjCZ>_i1TkEWI{_~yx|Ifeo{`R-`0~;$-Q4uK- zK0ZECGZfO6kB@%<7{fq>M&=tnJo<_{3uLzP zKdZVS00!zMiU1hJOCv_l_hV|utM%CfgqJ%#_M4vu$uZxqHMo{LgiTLhCXwoD`zI&y z;lSA8xjL|7YcIdgJc!7_FCW@bQaY1g^#E-J6|8fjBR0^JXp6ILPP;Aqdl$1{Bl8p3TWg45y9RX*+ z`C~`ltxBF!Cvi}1pH~CwK9T_&_6%b5+9hNYOTOY*tm6=o>SA=-ucd^mJv{;U7mymY){HU9Tx45lj+5tGd=3ROMVXX~v+ z2!O4wuI`)UVdL%Tt*o2?HB6#s_7a?<{nw}=1PyFd~eC#741hOz`^21W9D)_3}0GEq#uM&L*j(!``<=9{Wlb->tf#XHvxa`l3b-|4vkHjt~8v$hoNFms+eH;p+c zYuLpIc9|^GgBpdLH*=Qk-8kmS$({b>;@>>j)9`oA>O!Gu#;Be1A zN+2P>2xA|W^XRFPND?QrbBuo5cetKBkP10Ty90gmDM=m*#@7r5)J=x_ci48ZIu{%{ z4^z0YjZA#R=0Zo$D}6&AN%sg`wfAWx!n!N7)oJ-vQc>akRrj{XN+PB8<(a6;&Qupm zrskQ$zuk`5m~28XgLt%_-*?LaHzJG<}PnLT=967 z_TJqgUm`EH1I^IM^MKong9XcneQR;6uWAU&M6Ad6V$b%D`AcpXbs(QUT0N1i(}=u+ z34gF#AS4{yWQTPwe6}TYvtnd~3LDi>Q$F3+*(n@zQAURpm*cCgO&?Jaj&EtKmeuS1 zg`bw57PvO0{D&7UYdaQfrgNo9?eo0_5ZM>mOFhwD2uXDXky65Q$po%ZkJa->UT1 zU=&V#+x}2p84Wu+_l!j~#$rPt5IpD$VpbK`kT$-r6+1RSWZyZ^Q(mlfvg5rvzHZ!v z^E^B;5i4R(Y(P!*yFy{S8fytjNit{lbHsv{wBe&emi=D#f#vkG&WL_=|9J+3;Z^t* z!D8X#;^P%nG-G1dg!<{F_540)AvE=3;-Ez(iw*N5T%CYXEzH$OakSRltd8QMN0YA= zE$VJgi`)=DB5m=SW9oiMp_|2GVIT)$M`_0YwefL40&hS2Tfuoym$aqCzFPX^`GOXF z&ihZmNfo16=QXm>1P`LEjYIne5{VQ83wkRfGqVeXNbmhWpn!N?jSoVoQ<}ujYh+{n z^2^JGOKT332c0ZhTFm=w>2ukOGcOnQ>e4~Sz2IB|;FRXYqCOhSM?b%yu*VjS21mV- za~||g%vm_2pC@H_t(>0D^YG}^9=0@glOMdY{8t;XipjvPN7E+8XtH&VT-c#pL`c43 z?5Oc*8lq%iP*Nl&F0m@8j(6@pWh>0j4EbyNGbJ#;bJ3+(FUDmP6A9TH6T~omO$T@U z7cp7OOYRDS8Sp$;HI(HIm5^9bpaRrnG^)hWs>ex)0EDbg?!g=@A%KyeehPfJVZZiG z@CgG8Al8P4OTE(MO4-ao0l+~pcdIM5jyKCq7w&#cb z{h8U`J}TEoH*5>Uwl5(Lw2On~7)hMLhI#>^p=)LFKFV+-zGR1LddhMclSWb}}pc#QnKMsHucPz}Tt=-=(-!Xm7Y1?dR3447FO%-mc?-S713YSpT z*UNtM`a7Z}@(y8Y#SI|Y%IaELF>Xiqb87dLl{leVPmN zIqjo>41o8O^3o;2l$_M&*hjah`vrasvUHKkRNLJ4JgV*sB4P`kvM+x+qwO)>CJvC< zPblrBjS>Xk!m3I*YCs>^-u3qNCG6cLL!w*~_J5%FY^2~_o)O2$XiE&B+N6~Yfc{St zL1kuw1b+bnBR2V7`8olz5nT1hUb^-g8*`sMxmB*&sGybRRKu|lH@9^J* X5v}-6hlc~L6`$E6*ZcK+#b2_wQ~p8y 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 literal 0 HcmV?d00001 diff --git a/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/left-align-text.png b/packages/terra-button/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/button-spec/left-align-text.png new file mode 100644 index 0000000000000000000000000000000000000000..b877e91d3c01299123ec9a44c834c17e1f187238 GIT binary patch literal 2500 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 literal 0 HcmV?d00001 diff --git a/packages/terra-button/tests/wdio/button-spec.js b/packages/terra-button/tests/wdio/button-spec.js index c075db485ef..41c9658a45e 100644 --- a/packages/terra-button/tests/wdio/button-spec.js +++ b/packages/terra-button/tests/wdio/button-spec.js @@ -133,6 +133,12 @@ Terra.describeViewports('Button', ['tiny'], () => { Terra.validates.element('long text', { selector: '#long-text' }); }); + it('displays Button with left aligned text', () => { + browser.url('/raw/tests/cerner-terra-core-docs/button/left-aligned-button'); + + Terra.validates.element('left-align-text', { selector: '#left-aligned-button' }); + }); + describe('Button Types', () => { before(() => { browser.url('/raw/tests/cerner-terra-core-docs/button/button-types'); diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 5416a28aee6..26ecd8be0aa 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added an example for `terra-button` to demonstrate isLeftAligned property. + ## 1.67.0 - (March 15, 2024) * Changed diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx index df8548f6f9f..1456a76cb98 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/About.1.doc.mdx @@ -1,6 +1,7 @@ import { Badge } from 'terra-button/package.json?dev-site-package'; import ButtonBlock from './example/ButtonBlock?dev-site-example'; +import ButtonBlockLeftAligned from './example/ButtonBlockLeftAligned?dev-site-example'; import ButtonAnchor from './example/ButtonAnchor?dev-site-example'; import ButtonCompact from './example/ButtonCompact?dev-site-example'; import ButtonDisabled from './example/ButtonDisabled?dev-site-example'; @@ -54,6 +55,7 @@ import Button from 'terra-button'; ## Examples + diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonBlockLeftAligned.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonBlockLeftAligned.jsx new file mode 100644 index 00000000000..f7031993a7b --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/button/example/ButtonBlockLeftAligned.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import Button from 'terra-button'; +import { IconEdit } from 'terra-icon'; +import classNames from 'classnames/bind'; +import styles from './ButtonDocCommon.module.scss'; + +const cx = classNames.bind(styles); + +const InformativeIcon = ; + +const ButtonBlockLeftAligned = () => ( + <> +