[terra-button] Added support for Decorative Icon buttons and Anchor b…

…utton (#3722) * Added support for Decorative Icon buttons * Anchor button changes --------- Co-authored-by: SM051274 <sm051274@cerner.net>
cerner · Feb 13, 2023 · 177f6bf · 177f6bf
1 parent 5baec33
commit 177f6bf
Show file tree

Hide file tree

Showing 31 changed files with 405 additions and 25 deletions.
diff --git a/packages/terra-action-header/CHANGELOG.md b/packages/terra-action-header/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 2.75.0 - (December 7, 2022)
 
 * Changed

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
@@ -18,6 +18,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = `
             className="header-icon maximize"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -57,6 +58,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = `
             className="header-icon close"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -94,6 +96,7 @@ exports[`ActionHeader should render an action header with back and close buttons
             className="header-icon close"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -119,6 +122,7 @@ exports[`ActionHeader should render an action header with back and close buttons
             className="header-icon back"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -151,6 +155,7 @@ exports[`ActionHeader should render an action header with back button and title
             className="header-icon back"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -181,6 +186,7 @@ exports[`ActionHeader should render an action header with close button and title
             className="header-icon close"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -207,6 +213,7 @@ exports[`ActionHeader should render an action header with custom button and titl
   title="Action Header"
 >
   <Button
+    iconType="decorative"
     isBlock={false}
     isCompact={false}
     isDisabled={false}
@@ -245,6 +252,7 @@ exports[`ActionHeader should render an action header with maximize button and ti
             className="header-icon maximize"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -277,6 +285,7 @@ exports[`ActionHeader should render an action header with minimize button and ti
             className="header-icon minimize"
           />
         }
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -302,6 +311,7 @@ exports[`ActionHeader should render an action header with multiple custom button
 >
   <span>
     <Button
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -313,6 +323,7 @@ exports[`ActionHeader should render an action header with multiple custom button
       variant="neutral"
     />
     <Button
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -346,6 +357,7 @@ exports[`ActionHeader should render an action header with next and previous butt
               className="header-icon previous"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -364,6 +376,7 @@ exports[`ActionHeader should render an action header with next and previous butt
               className="header-icon next"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -409,6 +422,7 @@ exports[`ActionHeader should render an action header with title, enabled next bu
               className="header-icon previous"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={true}
@@ -426,6 +440,7 @@ exports[`ActionHeader should render an action header with title, enabled next bu
               className="header-icon next"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -462,6 +477,7 @@ exports[`ActionHeader should render an action header with title, enabled previou
               className="header-icon previous"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -480,6 +496,7 @@ exports[`ActionHeader should render an action header with title, enabled previou
               className="header-icon next"
             />
           }
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={true}

diff --git a/packages/terra-alert/CHANGELOG.md b/packages/terra-alert/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 4.63.0 - (February 7, 2023)
 
 * Changed

diff --git a/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap b/packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
@@ -753,6 +753,7 @@ exports[`Alert of type success with an action button text content should render
 <InjectIntl(Alert)
   action={
     <Button
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -796,6 +797,7 @@ exports[`Alert of type success with an action button text content should render
   <Alert
     action={
       <Button
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -901,6 +903,7 @@ exports[`Alert of type success with an action button text content should render
           className="actions"
         >
           <Button
+            iconType="decorative"
             isBlock={false}
             isCompact={false}
             isDisabled={false}
@@ -1571,6 +1574,7 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
 <InjectIntl(Alert)
   action={
     <Button
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -1623,6 +1627,7 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
   <Alert
     action={
       <Button
+        iconType="decorative"
         isBlock={false}
         isCompact={false}
         isDisabled={false}
@@ -1736,6 +1741,7 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
           className="actions actions-custom"
         >
           <Button
+            iconType="decorative"
             isBlock={false}
             isCompact={false}
             isDisabled={false}
@@ -1770,6 +1776,7 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
             </button>
           </Button>
           <Button
+            iconType="decorative"
             isBlock={false}
             isCompact={false}
             isDisabled={false}
@@ -1937,6 +1944,7 @@ exports[`Dismissible Alert that includes actions section should render an alert
           className="actions"
         >
           <Button
+            iconType="decorative"
             isBlock={false}
             isCompact={false}
             isDisabled={false}

diff --git a/packages/terra-button-group/CHANGELOG.md b/packages/terra-button-group/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated jest snapshots for icon button changes.
+
 ## 3.61.0 - (December 7, 2022)
 
 * Changed

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
@@ -26,6 +26,7 @@ exports[`correctly applies the theme context className 1`] = `
         <Button
           aria-pressed={false}
           className="button-group-button orion-fusion-theme"
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}
@@ -76,6 +77,7 @@ exports[`correctly applies the theme context className 1`] = `
         <Button
           aria-pressed={false}
           className="button-group-button orion-fusion-theme"
+          iconType="decorative"
           isBlock={false}
           isCompact={false}
           isDisabled={false}

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
@@ -14,6 +14,7 @@ exports[`correctly applies the theme context className 1`] = `
   >
     <Button
       className="button-group-button orion-fusion-theme"
+      iconType="decorative"
       isBlock={false}
       isCompact={false}
       isDisabled={false}
@@ -57,6 +58,7 @@ exports[`correctly applies the theme context className 1`] = `
 exports[`should render a default component 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -75,6 +77,7 @@ exports[`should render a default component 1`] = `
 exports[`should render as disabled 1`] = `
 <Button
   className="button-group-button is-disabled"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={true}
@@ -98,6 +101,7 @@ exports[`should render with icon only 1`] = `
       alt="icon"
     />
   }
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -116,6 +120,7 @@ exports[`should render with icon only 1`] = `
 exports[`should render with onBlur 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -134,6 +139,7 @@ exports[`should render with onBlur 1`] = `
 exports[`should render with onClick 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -153,6 +159,7 @@ exports[`should render with onClick 1`] = `
 exports[`should render with onFocus 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -171,6 +178,7 @@ exports[`should render with onFocus 1`] = `
 exports[`should render with onKeyDown 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}
@@ -189,6 +197,7 @@ exports[`should render with onKeyDown 1`] = `
 exports[`should render with onKeyUp 1`] = `
 <Button
   className="button-group-button"
+  iconType="decorative"
   isBlock={false}
   isCompact={false}
   isDisabled={false}

diff --git a/packages/terra-button/CHANGELOG.md b/packages/terra-button/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added support for decorative icon buttons.
+
 ## 3.62.0 - (December 7, 2022)
 
 * Changed

diff --git a/packages/terra-button/src/Button.jsx b/packages/terra-button/src/Button.jsx
@@ -25,6 +25,11 @@ const ButtonTypes = {
   RESET: 'reset',
 };
 
+const IconTypes = {
+  DECORATIVE: 'decorative',
+  INFORMATIVE: 'informative',
+};
+
 const propTypes = {
   /**
    * Sets the href. When set will render the component as an anchor tag.
@@ -38,6 +43,12 @@ const propTypes = {
    * Whether or not the button should only display as an icon.
    */
   isIconOnly: PropTypes.bool,
+  /**
+   * ![IMPORTANT](https://badgen.net/badge/UX/Accessibility/blue)
+   * specifies the icon type. if not specified defaluts to DECORATIVE icon.
+   * refer Icon [Accessiblity Guide](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/icon/accessibility-guide) to know about types of icon.
+   */
+  iconType: PropTypes.oneOf([IconTypes.DECORATIVE, IconTypes.INFORMATIVE]),
   /**
    * Whether or not the button should display as a block.
    */
@@ -107,6 +118,7 @@ const defaultProps = {
   isCompact: false,
   isDisabled: false,
   isIconOnly: false,
+  iconType: IconTypes.DECORATIVE,
   isReversed: false,
   refCallback: undefined,
   title: undefined,
@@ -225,6 +237,7 @@ class Button extends React.Component {
       isCompact,
       isDisabled,
       isIconOnly,
+      iconType,
       isReversed,
       text,
       type,
@@ -294,12 +307,17 @@ class Button extends React.Component {
       </span>
     );
 
-    let ariaLabel = customProps['aria-label'];
-    if (isIconOnly || variant === 'utility') {
+    // ignore aria-label for buttons used with decorative icons.
+    let ariaLabel = (iconType !== IconTypes.DECORATIVE) ? customProps['aria-label'] : undefined;
+    if ((isIconOnly || variant === 'utility') && iconType === IconTypes.INFORMATIVE) {
       ariaLabel = ariaLabel || text;
     }
 
-    const ComponentType = href ? 'a' : 'button';
+    let ComponentType = 'button';
+    if (href) {
+      ComponentType = 'a';
+      customProps.role = 'button';
+    }
 
     return (
       <ComponentType
@@ -319,7 +337,6 @@ class Button extends React.Component {
         onFocus={this.handleFocus}
         href={href}
         ref={refCallback}
-        role={href ? 'button' : undefined}
       >
         {buttonLabel}
       </ComponentType>