cerner · supreethmr · Feb 15, 2023 · Feb 14, 2023 · Feb 14, 2023
@@ -5,6 +5,7 @@
 * Changed
   * Updated wdio screenshots due to functional-testing upgrade.
 * Added
+  * Added `IconTypes` for terra-button.
   * Added support for decorative icon buttons.
 
 ## 3.62.0 - (December 7, 2022)

@@ -307,7 +307,7 @@ class Button extends React.Component {
       </span>
     );
 
-    // ignore aria-label for buttons used with decorative icons.
+    // ignore aria-label for button with decorative icons.
     let ariaLabel = (iconType !== IconTypes.DECORATIVE) ? customProps['aria-label'] : undefined;
     if ((isIconOnly || variant === 'utility') && iconType === IconTypes.INFORMATIVE) {
       ariaLabel = ariaLabel || text;
@@ -353,4 +353,4 @@ Button.Opts.Types = ButtonTypes;
 Button.Opts.Variants = ButtonVariants;
 
 export default Button;
-export { ButtonTypes, ButtonVariants };
+export { ButtonTypes, ButtonVariants, IconTypes };
@@ -6,13 +6,12 @@
   * Updated radio and checkbox tests to fix fusion theme tests.
 * Added 
   * Added Accessibility Guide for `terra-toggle`.
+  * Added A11y guide and examples for `terra-button`.
 
 * Updated
+  * Updated imports of decorative icons.
   * Updated jest & wdio tests.
 
-* Added
-  * Added A11y guide and examples for `terra-button`.
-
 ## 1.20.0 - (February 7, 2023)
 
 * Changed

@@ -19,6 +19,8 @@ The button component provides users a way to trigger actions in the UI.
 It can be modified in color and type, and can optionally display an icon.
 Submit a request if additional variants not provided are needed.
 
+
+
 The `action` variant is intended for specific solutions in which a non-inline floating button sits above the page content in a fixed position.
 
 ## Getting Started

@@ -38,7 +38,7 @@ It is critical that buttons are coded correctly to ensure they are keyboard acce
 </div>
 
 ```jsx
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 
 <Button text="Show Alert" onClick={() => alert('Ive been clicked!')} />
 ```
@@ -51,16 +51,15 @@ The screen reader user will hear something like: <samp> Show Alert: Button </sam
 
 ```jsx
 import IconPrinter from 'terra-icon/lib/icon/IconPrinter';
-import DecoIconPrinter from 'terra-icon/lib/icon/decorative/IconPrinter';
-import { IconButton, IconTypes } from 'terra-button';
+import Button, { IconTypes } from 'terra-button';
 
 const Icon = <IconPrinter a11yLabel="Print" />;
-const DecorativeIcon = <DecoIconPrinter />;
+const DecorativeIcon = <IconPrinter />;
 
   <div>
-    <IconButton icon={Icon} isIconOnly iconType={IconTypes.INFORMATIVE} />
-    <IconButton icon={Icon} text="All Documents" iconType={IconTypes.INFORMATIVE} /> 
-    <IconButton icon={DecorativeIcon} iconType={IconTypes.INFORMATIVE} text="Print" />
+    <Button icon={Icon} isIconOnly iconType={IconTypes.INFORMATIVE} />
+    <Button icon={Icon} text="All Documents" iconType={IconTypes.INFORMATIVE} /> 
+    <Button icon={DecorativeIcon} iconType={IconTypes.DECORATIVE} text="Print" />
   </div>
 ```
 
@@ -85,7 +84,7 @@ For buttons that use icons that do not convey a meaning, make sure they are mark
 </div>
 
 ```jsx
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 
 <Button aria-label="Add Allergies" text="Add" className={cx('button')} />
 ```

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 import Card from 'terra-card';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';

@@ -1,6 +1,6 @@
 import React from 'react';
 import IconPrinter from 'terra-icon/lib/icon/IconPrinter';
-import { IconButton, IconTypes } from 'terra-button';
+import Button, { IconTypes } from 'terra-button';
 import Card from 'terra-card';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
@@ -13,9 +13,9 @@ const DecorativeIcon = <IconPrinter />;
 const A11yIconButton = () => (
   <Card>
     <Card.Body>
-      <IconButton icon={Icon} isIconOnly iconType={IconTypes.INFORMATIVE} className={cx('button')} />
-      <IconButton icon={Icon} text="All Documents" iconType={IconTypes.INFORMATIVE} className={cx('button')} />
-      <IconButton icon={DecorativeIcon} iconType={IconTypes.INFORMATIVE} text="Print" className={cx('button')} />
+      <Button icon={Icon} isIconOnly iconType={IconTypes.INFORMATIVE} className={cx('button')} />
+      <Button icon={Icon} text="All Documents" iconType={IconTypes.INFORMATIVE} className={cx('button')} />
+      <Button icon={DecorativeIcon} iconType={IconTypes.DECORATIVE} text="Print" className={cx('button')} />
     </Card.Body>
   </Card>
 );

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
 

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
 

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
 

@@ -1,6 +1,6 @@
 import React from 'react';
 import IconEdit from 'terra-icon/lib/icon/IconEdit';
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
 

@@ -1,6 +1,6 @@
 import React from 'react';
 import IconEdit from 'terra-icon/lib/icon/IconEdit';
-import Button from 'terra-button/lib/Button';
+import Button, { IconTypes } from 'terra-button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
 
@@ -11,10 +11,10 @@ const DecorativeIcon = <IconEdit />;
 
 const ButtonIcon = () => (
   <div>
-    <Button icon={InformativeIcon} text="Informative icon" className={cx('button')} />
+    <Button icon={InformativeIcon} iconType={IconTypes.INFORMATIVE} text="Informative icon" className={cx('button')} />
     <Button icon={DecorativeIcon} text="Decorative icon" isReversed className={cx('button')} />
     <Button icon={DecorativeIcon} isIconOnly text="Decorative Icon Only Button" className={cx('button')} />
-    <Button icon={InformativeIcon} isIconOnly text="Informative Icon Only Button" className={cx('button')} />
+    <Button icon={InformativeIcon} iconType={IconTypes.INFORMATIVE} isIconOnly text="Informative Icon Only Button" className={cx('button')} />
   </div>
 );
 

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
 

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from 'terra-button/lib/Button';
+import Button from 'terra-button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
 

@@ -1,15 +1,15 @@
 import React from 'react';
 import IconEdit from 'terra-icon/lib/icon/IconEdit';
-import { IconButton, IconTypes } from 'terra-button';
+import Button, { IconTypes } from 'terra-button';
 import classNames from 'classnames/bind';
 import styles from './ButtonDocCommon.module.scss';
 
 const cx = classNames.bind(styles);
 
 const ButtonVariant = () => (
   <div>
-    <IconButton text="Action" variant="action" icon={<IconEdit a11yLabel="Edit" />} iconType={IconTypes.INFORMATIVE} className={cx('button')} />
-    <IconButton text="Utility" variant="utility" icon={<IconEdit />} iconType={IconTypes.DECORATIVE} className={cx('button')} />
+    <Button text="Action" variant="action" icon={<IconEdit a11yLabel="Edit" />} iconType={IconTypes.INFORMATIVE} className={cx('button')} />
+    <Button text="Utility" variant="utility" icon={<IconEdit />} iconType={IconTypes.DECORATIVE} className={cx('button')} />
   </div>
 );