Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
[Terra-Icon] Added support for Decorative Icons (#3713)
Browse files Browse the repository at this point in the history 
* Added support for Decorative Icons

* changelog updates

* updated missing change log

* doc correction

* doc corrections

* minor corrections

---------

Co-authored-by: SM051274 <[email protected]>
  • Loading branch information
@supreethmr
supreethmr and SM051274 authored Jan 31, 2023
1 parent 960a56e commit e3e4391
Show file tree
Hide file tree
Showing 32 changed files with 542 additions and 114 deletions.
3 changes: 3 additions & 0 deletions packages/terra-alert/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Jest snapshots updated due to decorative / informative icon changes in terra-icon.

## 4.62.0 - (January 9, 2023)

* Changed
Expand Down
39 changes: 13 additions & 26 deletions packages/terra-alert/tests/jest/__snapshots__/Alert.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,6 @@ exports[`Alert of type alert with text content should render an Alert component
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconAlert"
focusable="false"
height="1em"
Expand All @@ -182,10 +181,10 @@ exports[`Alert of type alert with text content should render an Alert component
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconAlert"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -315,7 +314,6 @@ exports[`Alert of type custom with custom title and text content should render a
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconHelp"
focusable="false"
height="1em"
Expand All @@ -326,10 +324,10 @@ exports[`Alert of type custom with custom title and text content should render a
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconHelp"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -444,7 +442,6 @@ exports[`Alert of type error with text content should render an Alert component
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconError"
focusable="false"
height="1em"
Expand All @@ -455,10 +452,10 @@ exports[`Alert of type error with text content should render an Alert component
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconError"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -575,7 +572,6 @@ exports[`Alert of type info with custom title and HTML content should render an
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconInformation"
focusable="false"
height="1em"
Expand All @@ -586,10 +582,10 @@ exports[`Alert of type info with custom title and HTML content should render an
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconInformation"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -706,7 +702,6 @@ exports[`Alert of type info with text content should render an Alert component o
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconInformation"
focusable="false"
height="1em"
Expand All @@ -717,10 +712,10 @@ exports[`Alert of type info with text content should render an Alert component o
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconInformation"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -861,7 +856,6 @@ exports[`Alert of type success with an action button text content should render
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconSuccess"
focusable="false"
height="1em"
Expand All @@ -872,10 +866,10 @@ exports[`Alert of type success with an action button text content should render
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconSuccess"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1028,7 +1022,6 @@ exports[`Alert of type success with text content should render an Alert componen
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconSuccess"
focusable="false"
height="1em"
Expand All @@ -1039,10 +1032,10 @@ exports[`Alert of type success with text content should render an Alert componen
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconSuccess"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1157,7 +1150,6 @@ exports[`Alert of type unsatisfied should render an unsatisfied Alert 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
focusable="false"
height="1em"
isBidi={false}
Expand All @@ -1167,10 +1159,10 @@ exports[`Alert of type unsatisfied should render an unsatisfied Alert 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1280,7 +1272,6 @@ exports[`Alert of type unverified should render an unverified Alert 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
focusable="false"
height="1em"
isBidi={false}
Expand All @@ -1290,10 +1281,10 @@ exports[`Alert of type unverified should render an unverified Alert 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1403,7 +1394,6 @@ exports[`Alert of type warning with text content should render an Alert componen
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconWarning"
focusable="false"
height="1em"
Expand All @@ -1414,10 +1404,10 @@ exports[`Alert of type warning with text content should render an Alert componen
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconWarning"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1531,7 +1521,6 @@ exports[`Alert with no props should render a default component 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconAlert"
focusable="false"
height="1em"
Expand All @@ -1542,10 +1531,10 @@ exports[`Alert with no props should render a default component 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconAlert"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1702,7 +1691,6 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconHelp"
focusable="false"
height="1em"
Expand All @@ -1713,10 +1701,10 @@ exports[`Dismissable Alert of type custom with action button, custom title and t
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconHelp"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1904,7 +1892,6 @@ exports[`Dismissible Alert that includes actions section should render an alert
xmlns="http://www.w3.org/2000/svg"
>
<IconBase
ariaLabel={null}
className="IconAlert"
focusable="false"
height="1em"
Expand All @@ -1915,10 +1902,10 @@ exports[`Dismissible Alert that includes actions section should render an alert
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="tui-Icon icon IconAlert"
focusable="false"
height="1em"
role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
Expand Down
1 change: 1 addition & 0 deletions packages/terra-core-docs/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
## Unreleased

* Added
* Added A11y guide for terra-icon.
* Added examples and accessibility guide for `terra-image`.

## 1.18.0 - (January 9, 2023)
Expand Down
17 changes: 16 additions & 1 deletion packages/terra-core-docs/src/terra-dev-site/doc/icon/About.1.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import IconBasePropsTable from 'terra-icon/src/IconBase?dev-site-props-table';
# Terra Icon

The terra-icon component is used to visually represent a literal or symbolic object intended to initiate an action, communicate a status, or navigate the workflow.
Icons can be `meaningful` where they used to convey a semantic meaning or `decorative` where they are are simply used for aesthetic purposes.

See [Usage](#usage) for more information.

## Getting Started

Expand All @@ -27,7 +30,7 @@ This component requires the following peer dependencies be installed in your app
<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

The value for `a11yLabel` prop is required for the icons that are `meaningful` which means that they are intended to convey meaning.
```jsx
import IconAdd from 'terra-icon/lib/icon/IconAdd';
import IconEdit from 'terra-icon/lib/icon/IconEdit';
Expand All @@ -38,6 +41,18 @@ import IconEdit from 'terra-icon/lib/icon/IconEdit';
</div>
```
If icons are intended for aesthetic purposes (`decorative` icons) then `a11yLabel` can be ignored.
```jsx
import IconAllergy from 'terra-icon/lib/icon/IconAllergy';
import IconScratchPad from 'terra-icon/lib/icon/IconScratchPad';
<div>
<IconAllergy />
<IconScratchPad />
</div>
```
Refer to [Accessibility guide](https://engineering.cerner.com/terra-ui/components/cerner-terra-core-docs/icon/AccessibilityGuide) to know more about informative and decorative icons.

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
* [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
Expand Down
Loading

0 comments on commit e3e4391

Please sign in to comment.