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

[Terra-Icon] Added support for Decorative Icons #3713

Merged
merged 7 commits into from
Jan 31, 2023
Merged

[Terra-Icon] Added support for Decorative Icons #3713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
12bd0e0
Added support for Decorative Icons
Jan 22, 2023
0c93232
changelog updates
Jan 22, 2023
a09d691
updated missing change log
Jan 23, 2023
e5e9496
doc correction
Jan 27, 2023
cdc1a2d
Merge branch 'main' into Icon-a11y-pve
supreethmr Jan 30, 2023
f6aac7b
doc corrections
Jan 30, 2023
1545afc
minor corrections
Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-alert/CHANGELOG.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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