fix(button-icon): add assistive text to LBC Mismatch example (#5030)

* fix(button-icon): add assistive text to LBC Mismatch example

* fix(button-icon): update assistive text

* fix(button-icon): revert release note

* fix(button-icon): refactor with ButtonIcon comp

* fix(modals): LBC examples

* Revert "fix(modals): LBC examples"

This reverts commit 1d9c4d199fae38968a9261efef2b4516f66c0dfd.

Co-authored-by: Kim Flournoy <[email protected]>

Author: greensteph

ui/components/button-icons/base/example.jsx

@@ -61,10 +61,12 @@ export let examples = [
     )
   },
   {
+    // this was put in to place to test a styling hooks edge case
     id: 'button-icon-lbc-mismatch',
     label: 'Button Icon - LBC Mismatch',
     element: (
       <Button className="slds-button_icon slds-button_icon-border">
+        <span className="slds-assistive-text">Error</span>
         <SvgIcon
           sprite="utility"
           symbol="clock"

ui/components/button-icons/sizing/example.jsx

@@ -2,21 +2,17 @@
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 import React from 'react';
-import {Button} from '../../buttons/base/example';
-import SvgIcon from '../../../shared/svg-icon';
+import ButtonIcon from '../';
 
 export default [
   {
     id: 'default',
-    label: 'Button Icon – Default',
+    label: 'Bare – Default',
     element: (
-    <Button className="slds-button slds-button_icon" title="More Options">
-        <SvgIcon
-            sprite="utility"
-            symbol="settings"
-            className="slds-button__icon"
-        />
-    </Button>
+      <ButtonIcon
+        assistiveText="More options"
+        title="More options"
+      />
     )
   }
 ];
@@ -26,91 +22,81 @@ export let examples = [
     id: 'button-icon-large',
     label: 'Bare - Size Large',
     element: (
-      <Button className="slds-button slds-button_icon" title="More Options">
-        <SvgIcon
-          sprite="utility"
-          symbol="settings"
-          className="slds-button__icon slds-button__icon_large"
-        />
-      </Button>
+      <ButtonIcon
+        iconClassName="slds-button__icon_large"
+        assistiveText="More options"
+        title="More options"
+      />
     )
   },
   {
     id: 'button-icon-small',
     label: 'Bare - Size Small',
     element: (
-      <Button className="slds-button slds-button_icon" title="More Options">
-        <SvgIcon
-          sprite="utility"
-          symbol="settings"
-          className="slds-button__icon slds-button__icon_small"
+      <ButtonIcon
+        iconClassName="slds-button__icon_small"
+        assistiveText="More options"
+        title="More options"
         />
-      </Button>
     )
   },
   {
     id: 'button-icon-x-small',
     label: 'Bare - Size Extra Small',
     element: (
-      <Button className="slds-button slds-button_icon" title="More Options">
-        <SvgIcon
-          sprite="utility"
-          symbol="settings"
-          className="slds-button__icon slds-button__icon_x-small"
-        />
-      </Button>
+      <ButtonIcon
+        iconClassName="slds-button__icon_x-small"
+        assistiveText="More options"
+        title="More options"
+      />
     )
   },
   {
     id: 'button-icon-contained-large',
     label: 'Contained - Size Large',
     element: (
-      <Button className="slds-button slds-button_icon slds-button_icon-border slds-button_icon-large" title="More Options">
-        <SvgIcon
-          sprite="utility"
-          symbol="settings"
-          className="slds-button__icon"
-        />
-      </Button>
+      <ButtonIcon
+        className="slds-button_icon-border"
+        size="large"
+        assistiveText="More options"
+        title="More options"
+      />
     )
   },
   {
     id: 'button-icon-contained-small',
     label: 'Contained - Size Small',
     element: (
-      <Button className="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" title="More Options">
-        <SvgIcon
-          sprite="utility"
-          symbol="settings"
-          className="slds-button__icon"
-        />
-      </Button>
+      <ButtonIcon
+        className="slds-button_icon-border"
+        size="small"
+        assistiveText="More options"
+        title="More options"
+      />
     )
   },
   {
     id: 'button-icon-contained-x-small',
     label: 'Contained - Size Extra Small',
     element: (
-      <Button className="slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small" title="More Options">
-        <SvgIcon
-          sprite="utility"
-          symbol="settings"
-          className="slds-button__icon"
-        />
-      </Button>
+      <ButtonIcon
+        className="slds-button_icon-border"
+        size="x-small"
+        assistiveText="More options"
+        title="More options"
+      />
     )
   },
   {
     id: 'button-icon-contained-xx-small',
     label: 'Contained - Size Extra Extra Small',
     element: (
-      <Button className="slds-button slds-button_icon slds-button_icon-border slds-button_icon-xx-small" title="More Options">
-        <SvgIcon
-          sprite="utility"
-          symbol="settings"
-          className="slds-button__icon"
-        />
-      </Button>
+      <ButtonIcon
+        className="slds-button_icon-border"
+        size="xx-small"
+        assistiveText="More options"
+        title="More options"
+      />
     )
   }
   ];