From d33222edee4acc14e5806726bf84042720a4bd79 Mon Sep 17 00:00:00 2001 From: Michael Arestad Date: Mon, 1 Aug 2022 15:57:49 -0600 Subject: [PATCH] Updated Icons to be more explicit thanks to Jono --- code/lib/components/src/icon/icon.stories.tsx | 6 +++--- code/lib/components/src/icon/icon.tsx | 17 +++++------------ code/lib/ui/src/components/sidebar/TreeNode.tsx | 8 ++++---- 3 files changed, 12 insertions(+), 19 deletions(-) diff --git a/code/lib/components/src/icon/icon.stories.tsx b/code/lib/components/src/icon/icon.stories.tsx index f50e846bcac6..128b9f73a32d 100644 --- a/code/lib/components/src/icon/icon.stories.tsx +++ b/code/lib/components/src/icon/icon.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { styled, css } from '@storybook/theming'; import { Icons } from './icon'; -import { icons } from './icons'; +import { icons, IconKey } from './icons'; const Meta = styled.div` color: #666; @@ -67,7 +67,7 @@ export const Labels = () => ( {Object.keys(icons).map((key) => ( - + {key} ))} @@ -81,7 +81,7 @@ export const NoLabels = () => ( {Object.keys(icons).map((key) => ( - + ))} diff --git a/code/lib/components/src/icon/icon.tsx b/code/lib/components/src/icon/icon.tsx index 531d4f8b537e..aac07647181a 100644 --- a/code/lib/components/src/icon/icon.tsx +++ b/code/lib/components/src/icon/icon.tsx @@ -13,22 +13,15 @@ const Svg = styled.svg` } `; -/** - * An Icon is a piece of visual element, but we must ensure its accessibility while using it. - * It can have 2 purposes: - * - * - *decorative only*: for example, it illustrates a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: ``) - * - *non-decorative*: it means that it delivers information. For example, an icon as only child in a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: ``) - */ -export interface IconsProps { - icon?: IconType; - symbol?: IconType; +export interface IconsProps extends ComponentProps { + icon: IconType; + useSymbol?: boolean; } -export const Icons: FunctionComponent = ({ icon, symbol, ...props }: IconsProps) => { +export const Icons: FunctionComponent = ({ icon, useSymbol, ...props }: IconsProps) => { return ( - {symbol ? : icons[icon]} + {useSymbol ? : icons[icon]} ); }; diff --git a/code/lib/ui/src/components/sidebar/TreeNode.tsx b/code/lib/ui/src/components/sidebar/TreeNode.tsx index 29af6f0c6a92..04c47c700831 100644 --- a/code/lib/ui/src/components/sidebar/TreeNode.tsx +++ b/code/lib/ui/src/components/sidebar/TreeNode.tsx @@ -147,7 +147,7 @@ export const GroupNode: FunctionComponent< > = React.memo(({ children, isExpanded = false, isExpandable = false, ...props }) => ( {isExpandable ? : null} - + {children} )); @@ -156,7 +156,7 @@ export const ComponentNode: FunctionComponent> ({ theme, children, isExpanded, isExpandable, isSelected, ...props }) => ( {isExpandable && } - + {children} ) @@ -166,7 +166,7 @@ export const DocumentNode: FunctionComponent< ComponentProps & { docsMode: boolean } > = React.memo(({ theme, children, docsMode, ...props }) => ( - + {children} )); @@ -174,7 +174,7 @@ export const DocumentNode: FunctionComponent< export const StoryNode: FunctionComponent> = React.memo( ({ theme, children, ...props }) => ( - + {children} )