Skip to content

Commit 67bd6bb

Browse files
edonehooandrew-ronaldson
edonehoo
and
andrew-ronaldson
authored
docs: Updates docs with new rh-icons. (#4994)
* docs(iconography): Updates docs with new icons. * Finishes preparing iconography-related docs with new icons. * Update icons in image * Update migration guidance. * Remove duplicate icon entries. * Updates icon guidance * add back core fa details. --------- Co-authored-by: Andrew Ronaldson <aronalds@redhat.com>
1 parent 8d50094 commit 67bd6bb

9 files changed

Lines changed: 895 additions & 1058 deletions

File tree

‎packages/documentation-site/patternfly-docs/content/content-design/writing-guides/TooltipIconReferenceTable.jsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import React from 'react';
2+
import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core';
3+
import {
4+
Table,
5+
Tbody,
6+
Thead,
7+
Tr,
8+
Th,
9+
Td
10+
} from '@patternfly/react-table';
11+
import RhUiArrowCircleUpIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-icon';
12+
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
13+
import RhUiSettingsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-icon';
14+
import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon';
15+
import RhUiDownloadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-download-icon';
16+
import RhUiEllipsisVerticalIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
17+
import RhUiEditIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-edit-icon';
18+
import RhUiSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon';
19+
import RhUiZoomOutIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-zoom-out-icon';
20+
import RhUiZoomInIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-zoom-in-icon';
21+
import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
22+
import RhUiTrashIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-icon';
23+
import RhUiExportIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-export-icon';
24+
import RhUiTaskIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-task-icon';
25+
26+
const REACT_LABEL = 'React name';
27+
28+
const ROWS = [
29+
{ Icon: RhUiArrowCircleUpIcon, name: 'rh-ui-arrow-circle-up', reactName: 'RhUiArrowCircleUpIcon', tooltip: 'Upgrade', note: '' },
30+
{ Icon: RhUiNotificationFillIcon, name: 'rh-ui-notification-fill', reactName: 'RhUiNotificationFillIcon', tooltip: 'Notifications', note: '' },
31+
{ Icon: RhUiSettingsIcon, name: 'rh-ui-settings', reactName: 'RhUiSettingsIcon', tooltip: 'Settings', note: '' },
32+
{ Icon: RhUiCopyIcon, name: 'rh-ui-copy', reactName: 'RhUiCopyIcon', tooltip: 'Copy', note: '' },
33+
{ Icon: RhUiDownloadIcon, name: 'rh-ui-download', reactName: 'RhUiDownloadIcon', tooltip: 'Download', note: '' },
34+
{ Icon: RhUiEllipsisVerticalIcon, name: 'rh-ui-ellipsis-vertical', reactName: 'RhUiEllipsisVerticalIcon', tooltip: 'More options', note: '' },
35+
{ Icon: RhUiEditIcon, name: 'rh-ui-edit', reactName: 'RhUiEditIcon', tooltip: 'Edit', note: '' },
36+
{ Icon: RhUiSearchIcon, name: 'rh-ui-search', reactName: 'RhUiSearchIcon', tooltip: 'Search', note: '' },
37+
{ Icon: RhUiZoomOutIcon, name: 'rh-ui-zoom-out', reactName: 'RhUiZoomOutIcon', tooltip: 'Zoom out', note: '' },
38+
{ Icon: RhUiZoomInIcon, name: 'rh-ui-zoom-in', reactName: 'RhUiZoomInIcon', tooltip: 'Zoom in', note: '' },
39+
{ Icon: RhUiSyncIcon, name: 'rh-ui-sync', reactName: 'RhUiSyncIcon', tooltip: 'Sync', note: 'Choose the best fit for your scenario.' },
40+
{ Icon: RhUiTrashIcon, name: 'rh-ui-trash', reactName: 'RhUiTrashIcon', tooltip: 'Delete', note: '' },
41+
{ Icon: RhUiExportIcon, name: 'rh-ui-export', reactName: 'RhUiExportIcon', tooltip: 'Export', note: '' },
42+
{ Icon: RhUiTaskIcon, name: 'rh-ui-task', reactName: 'RhUiTaskIcon', tooltip: 'Tasks', note: '' }
43+
];
44+
45+
export const TooltipIconReferenceTable = () => {
46+
const [copiedReactName, setCopiedReactName] = React.useState(null);
47+
48+
return (
49+
<Table aria-label="Icon tooltip reference" variant="compact">
50+
<Thead>
51+
<Tr>
52+
<Th>Icon</Th>
53+
<Th>Name</Th>
54+
<Th>{REACT_LABEL}</Th>
55+
<Th>Tooltip content</Th>
56+
<Th>Note</Th>
57+
</Tr>
58+
</Thead>
59+
<Tbody>
60+
{ROWS.map((row) => {
61+
const Icon = row.Icon;
62+
return (
63+
<Tr key={row.reactName}>
64+
<Td dataLabel="Icon">
65+
<Tooltip content={row.tooltip} position={TooltipPosition.right}>
66+
<Button variant="plain" aria-label={`Suggested tooltip label: ${row.tooltip}`}>
67+
<Icon />
68+
</Button>
69+
</Tooltip>
70+
</Td>
71+
<Td dataLabel="Name" modifier="fitContent">
72+
{row.name}
73+
</Td>
74+
<Td dataLabel={REACT_LABEL} modifier="fitContent">
75+
<Tooltip
76+
trigger="mouseenter focus click"
77+
content={<div>{copiedReactName === row.reactName ? 'Copied' : 'Copy React name'}</div>}
78+
position={TooltipPosition.left}
79+
exitDelay={copiedReactName === row.reactName ? 1000 : 100}
80+
onTooltipHidden={() => {
81+
if (copiedReactName === row.reactName) {
82+
setCopiedReactName(null);
83+
}
84+
}}
85+
>
86+
<span
87+
style={{ cursor: 'pointer' }}
88+
role="button"
89+
tabIndex={0}
90+
aria-label={`Copy ${row.reactName} to clipboard`}
91+
onClick={() => {
92+
navigator.clipboard.writeText(row.reactName);
93+
setCopiedReactName(row.reactName);
94+
}}
95+
onKeyDown={(e) => {
96+
if (e.key === 'Enter' || e.key === ' ') {
97+
e.preventDefault();
98+
navigator.clipboard.writeText(row.reactName);
99+
setCopiedReactName(row.reactName);
100+
}
101+
}}
102+
>
103+
{row.reactName}
104+
</span>
105+
</Tooltip>
106+
</Td>
107+
<Td dataLabel="Tooltip content">{row.tooltip}</Td>
108+
<Td dataLabel="Note">{row.note || null}</Td>
109+
</Tr>
110+
);
111+
})}
112+
</Tbody>
113+
</Table>
114+
);
115+
};

‎packages/documentation-site/patternfly-docs/content/content-design/writing-guides/tooltips.md‎

Lines changed: 15 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,22 @@ section: content-design
44
subsection: writing-guides
55
---
66

7-
import ArrowCircleUpIcon from '@patternfly/react-icons/dist/esm/icons/arrow-circle-up-icon';
8-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
9-
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
10-
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
11-
import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
12-
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
13-
import PencilAltIcon from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
14-
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
15-
import SearchMinusIcon from '@patternfly/react-icons/dist/esm/icons/search-minus-icon';
16-
import SearchPlusIcon from '@patternfly/react-icons/dist/esm/icons/search-plus-icon';
17-
import SyncAltIcon from '@patternfly/react-icons/dist/esm/icons/sync-alt-icon';
18-
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
19-
import ExportIcon from '@patternfly/react-icons/dist/esm/icons/export-icon';
20-
import TaskIcon from '@patternfly/react-icons/dist/esm/icons/task-icon';
21-
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
22-
import { Button, Icon, Tooltip, Split, SplitItem } from '@patternfly/react-core'
7+
import RhUiSettingsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-icon';
8+
import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon';
9+
import RhUiSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon';
10+
import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
11+
import { Button, Tooltip, Split, SplitItem } from '@patternfly/react-core'
12+
import { TooltipIconReferenceTable } from './TooltipIconReferenceTable.jsx';
2313

2414
A **tooltip** is a message box that is shown when a UI element, like a button or an icon, is in a hover state. They contain short descriptions that offer additional information to help users better understand elements within a UI.
2515

16+
<Split>
17+
<SplitItem>
2618
<Tooltip content={"This is a tooltip. It contains useful information that solves all your problems."} aria="describedby" >
2719
<Button>I'm a button with a tooltip!</Button>
2820
</Tooltip>
21+
</SplitItem>
22+
</Split>
2923

3024
When writing tooltips, follow these general recommendations:
3125

@@ -36,7 +30,7 @@ When writing tooltips, follow these general recommendations:
3630
| Don't repeat information that is already available in the UI. | Do write content that is succinct, clear, and effective. |
3731
| Don't use tooltips for critical information. | Do use tooltips for additional, non-essential information. |
3832
| Don't end sentence fragments in a period. | Do end full sentences in a period. |
39-
| Don’t place tooltips on question-circle icons (<QuestionCircleIcon />). Instead, use a [popover](/components/popover). | Do follow [our tooltip development accessibility guidelines](/components/tooltip/accessibility) to ensure that tooltip content is available to all users.|
33+
| Don’t place tooltips on question-mark icons (<RhUiQuestionMarkCircleIcon />). Instead, use a [popover](/components/popover). | Do follow [our tooltip development accessibility guidelines](/components/tooltip/accessibility) to ensure that tooltip content is available to all users.|
4034

4135
</div>
4236

@@ -51,33 +45,18 @@ For example:
5145

5246
<Split>
5347
<SplitItem>
54-
<Tooltip content={"Settings"} aria="labelledby"> <Button variant="plain" aria-label="More information about settings"> <CogIcon /></Button> </Tooltip>
48+
<Tooltip content={"Settings"} aria="labelledby"> <Button variant="plain" aria-label="More information about settings"> <RhUiSettingsIcon /></Button> </Tooltip>
5549
</SplitItem>
5650
<SplitItem>
57-
<Tooltip content={"Copy"} aria="labelledby"> <Button variant="plain" aria-label="Copy"> <CopyIcon /></Button> </Tooltip>
51+
<Tooltip content={"Copy"} aria="labelledby"> <Button variant="plain" aria-label="Copy"> <RhUiCopyIcon /></Button> </Tooltip>
5852
</SplitItem>
5953
<SplitItem>
60-
<Tooltip content={"Search"} aria="labelledby"> <Button variant="plain" aria-label="Search"> <SearchIcon /></Button> </Tooltip>
54+
<Tooltip content={"Search"} aria="labelledby"> <Button variant="plain" aria-label="Search"> <RhUiSearchIcon /></Button> </Tooltip>
6155
</SplitItem>
6256
</Split>
6357

6458
In PatternFly, there are commonly used icons that hold universal meanings. These should always use the same tooltip description, as shown in the following table:
6559

66-
|**Icon** | **Name** | **Tooltip content** | **Note** |
67-
|------------|-----------|-----------|---- |
68-
| <ArrowCircleUpIcon /> | fa-arrow-circle-up | Upgrade |
69-
| <BellIcon /> | fa-bell | Notifications |
70-
| <CogIcon /> | fa-cog | Settings |
71-
| <CopyIcon /> | fa-copy | Copy |
72-
| <DownloadIcon /> | fa-download | Download |
73-
| <EllipsisVIcon /> | fa-ellipsis-v | More options |
74-
| <PencilAltIcon /> | fa-pencil-alt | Edit |
75-
| <SearchIcon /> | fa-search | Search |
76-
| <SearchMinusIcon /> | fa-search-minus | Search minus |
77-
| <SearchPlusIcon /> | fa-search-plus | Search plus |
78-
| <SyncAltIcon /> | fa-sync-alt | Sync, Refresh, or Running | Choose the best fit for your scenario.|
79-
| <TrashIcon /> | fa-trash | Delete |
80-
| <ExportIcon /> | pficon-export | Export |
81-
| <TaskIcon /> | pficon-task | Tasks |
60+
<TooltipIconReferenceTable />
8261

8362
You can learn more about the usage of these icons in our [design foundations.](/foundations-and-styles/iconography)

‎packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/iconography/IconsTable.jsx‎

Lines changed: 59 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,21 @@ import {
2323
} from '@patternfly/react-table';
2424
import { iconsData } from './icons';
2525
import { saveAs } from 'file-saver';
26-
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
27-
import * as iconUnicodes from '@patternfly/patternfly/assets/icons/iconUnicodes.json';
26+
import RhUiSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon';
27+
28+
const REACT_COLUMN_LABEL = 'React name';
2829

2930
export const IconsTable = () => {
30-
const columns = ['Icon', 'Name', 'Style', 'React', 'Usage', 'Unicode'];
31+
const columns = ['Icon', 'Name', 'React', 'Usage'];
3132
const [searchValue, setSearchValue] = React.useState('');
32-
const [isCopied, setCopied] = React.useState(false);
3333
const [sortByIndex, setSortByIndex] = React.useState(1);
3434
const [sortDirection, setSortDirection] = React.useState('asc');
35+
/** Which row’s React name was last copied (for tooltip feedback). */
36+
const [copiedReactName, setCopiedReactName] = React.useState(null);
37+
38+
React.useEffect(() => {
39+
setCopiedReactName(null);
40+
}, [searchValue]);
3541

3642
const getSortParams = columnIndex => ({
3743
sortBy: {
@@ -62,11 +68,6 @@ export const IconsTable = () => {
6268
saveAs(blob, filename);
6369
};
6470

65-
const clipboardCopyFunc = (event, text) => {
66-
navigator.clipboard.writeText(text.toString());
67-
setCopied(true);
68-
};
69-
7071
const filteredRows = React.useMemo(() => {
7172
return iconsData.filter(icon => {
7273
return icon.Name.toLowerCase().includes(searchValue.toLowerCase()) ||
@@ -115,24 +116,21 @@ export const IconsTable = () => {
115116
</Toolbar>
116117
<Divider />
117118
<Table
118-
aria-label="Filterable PatternFly icons"
119+
aria-label="Filterable Red Hat UI icons"
119120
variant={'compact'}
120121
id="ws-icons-table"
121122
>
122123
<Thead>
123124
<Tr>
124125
<Th>{columns[0]}</Th>
125126
<Th sort={getSortParams(1)}>{columns[1]}</Th>
126-
<Th>{columns[2]}</Th>
127-
<Th>{columns[3]}</Th>
128-
<Th sort={getSortParams(4)}>{columns[4]}</Th>
129-
<Th modifier="fitContent">{columns[5]}</Th>
127+
<Th>{REACT_COLUMN_LABEL}</Th>
128+
<Th sort={getSortParams(3)}>{columns[3]}</Th>
130129
</Tr>
131130
</Thead>
132131
<Tbody>
133132
{sortedRows.map((icon, index) => {
134133
const Icon = icons[icon.React_name];
135-
const iconUnicode = icon.Unicode || iconUnicodes.default[icon.Name] || '';
136134

137135
return (
138136
<Tr key={index}>
@@ -148,43 +146,66 @@ export const IconsTable = () => {
148146
</Tooltip>
149147
</Td>
150148
<Td dataLabel={columns[1]} modifier="fitContent">{icon.Name}</Td>
151-
<Td dataLabel={columns[2]}>{icon.Style}</Td>
152-
<Td dataLabel={columns[4]}>{icon.React_name}</Td>
153-
<Td dataLabel={columns[5]}>
154-
{icon.Contextual_usage}
155-
{icon.Extra_context && (
156-
<React.Fragment>
157-
<br/><br/>{icon.Extra_context}
158-
</React.Fragment>
159-
)}
160-
</Td>
161-
<Td dataLabel={columns[6]}>
149+
<Td dataLabel={REACT_COLUMN_LABEL} modifier="fitContent">
162150
<Tooltip
163151
trigger="mouseenter focus click"
164-
content={<div>{isCopied ? 'Copied' : 'Copy'}</div>}
152+
content={<div>{copiedReactName === icon.React_name ? 'Copied' : 'Copy React name'}</div>}
165153
position={TooltipPosition.left}
166-
exitDelay={isCopied ? 1000 : 100}
167-
onTooltipHidden={() => setCopied(false)}
154+
exitDelay={copiedReactName === icon.React_name ? 1000 : 100}
155+
onTooltipHidden={() => {
156+
if (copiedReactName === icon.React_name) {
157+
setCopiedReactName(null);
158+
}
159+
}}
168160
>
169-
<Button
170-
aria-label={`Copy ${icon.Name} icon unicode to clipboard`}
171-
variant="plain"
172-
onClick={(event) => clipboardCopyFunc(event, iconUnicode)}
161+
<span
162+
role="button"
163+
tabIndex={0}
164+
className="ws-icons-react-name-copy"
165+
aria-label={`Copy ${icon.React_name} to clipboard`}
166+
onClick={() => {
167+
navigator.clipboard.writeText(icon.React_name);
168+
setCopiedReactName(icon.React_name);
169+
}}
170+
onKeyDown={(e) => {
171+
if (e.key === 'Enter' || e.key === ' ') {
172+
e.preventDefault();
173+
navigator.clipboard.writeText(icon.React_name);
174+
setCopiedReactName(icon.React_name);
175+
}
176+
}}
173177
>
174-
{iconUnicode}
175-
</Button>
178+
{icon.React_name}
179+
</span>
176180
</Tooltip>
177181
</Td>
182+
<Td dataLabel={columns[3]}>
183+
{icon.Contextual_usage}
184+
{icon.Extra_context && (
185+
<React.Fragment>
186+
<br/><br/>{icon.Extra_context}
187+
</React.Fragment>
188+
)}
189+
</Td>
178190
</Tr>
179191
)
180192
})}
181193
</Tbody>
182194
</Table>
183195

184196
{filteredRows.length === 0 && (
185-
<EmptyState titleText={`No results found for "${ searchValue }"`} headingLevel="h4" icon={SearchIcon}>
186-
<EmptyStateBody>We couldn't find any icons that matched your search. If none of the icons listed fit
187-
your use case, you may use any additional 'fa' icons within <a href="https://fontawesome.com/icons?d=gallery&amp;m=free">Font Awesome's free set</a>.
197+
<EmptyState titleText={`No results found for "${ searchValue }"`} headingLevel="h4" icon={RhUiSearchIcon}>
198+
<EmptyStateBody>
199+
We couldn't find any icons that matched your search. Try different keywords or browse the full list above.
200+
If you need an icon that isn't listed, you can{' '}
201+
<a
202+
href="https://docs.google.com/forms/d/e/1FAIpQLSde61rTDD4keaZEA3JFzBPbQVJ5EgEkhNapsYoI6ajKCsX4_Q/viewform"
203+
target="_blank"
204+
rel="noopener noreferrer"
205+
>
206+
request a new icon from the Red Hat brand team
207+
</a>
208+
.
188209
</EmptyStateBody>
189210
</EmptyState>
190211
)}

0 commit comments

Comments
 (0)