Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI: Upgrade Icon component #23680

Merged
merged 8 commits into from
Aug 7, 2023
Merged

UI: Upgrade Icon component #23680

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
af6d5f9
First pass at updating all icons
cdedreuille Aug 2, 2023
4c5dc81
Update menu.tsx
cdedreuille Aug 2, 2023
8ed7645
Add documentation for icons
cdedreuille Aug 2, 2023
d405df1
Update Select.tsx
cdedreuille Aug 2, 2023
3f4a231
Update code/ui/components/src/new/Icon/Icon.mdx
cdedreuille Aug 3, 2023
b3b6ad2
Merge branch 'next' into charles-icons-updates
cdedreuille Aug 3, 2023
2988573
Merge branch 'next' into charles-icons-updates
cdedreuille Aug 6, 2023
9ea85fd
Update Storybook icons
cdedreuille Aug 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions code/addons/a11y/src/components/VisionSimulator.tsx
View file
Open in desktop
@@ -1,7 +1,8 @@
import type { ReactNode } from 'react';
import React, { useState } from 'react';
import { Global, styled } from '@storybook/theming';
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';

import { Filters } from './ColorFilters';

Expand Down Expand Up @@ -144,7 +145,7 @@ export const VisionSimulator = () => {
onDoubleClick={() => setFilter(null)}
>
<IconButton key="filter" active={!!filter} title="Vision simulator">
<Icons icon="accessibility" />
<Icon.Accessibility />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the docs you wrote:

The meaning can be obvious visually, but it must have a proper text alternative via aria-label for screen readers

Should you make sure every icon in this PR has the proper aria-label applied to it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yannbf That would be great but that would require quite some time to test everything. I would put that effort in a separate PR though with other efforts to improve accessibility.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found a new way to help accessibility in a semi automated way @yannbf. I'll explore this more in a separate PR.

</IconButton>
</WithTooltip>
<Hidden>
Expand Down
5 changes: 3 additions & 2 deletions code/addons/backgrounds/src/containers/BackgroundSelector.tsx
View file
Open in desktop
Expand Up @@ -4,7 +4,8 @@ import memoize from 'memoizerific';

import { useParameter, useGlobals } from '@storybook/manager-api';
import { logger } from '@storybook/client-logger';
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';

import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
import { ColorIcon } from '../components/ColorIcon';
Expand Down Expand Up @@ -140,7 +141,7 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
title="Change the background of the preview"
active={selectedBackgroundColor !== 'transparent' || isTooltipVisible}
>
<Icons icon="photo" />
<Icon.Photo />
</IconButton>
</WithTooltip>
</Fragment>
Expand Down
5 changes: 3 additions & 2 deletions code/addons/backgrounds/src/containers/GridSelector.tsx
View file
Open in desktop
Expand Up @@ -2,7 +2,8 @@ import type { FC } from 'react';
import React, { memo } from 'react';

import { useGlobals, useParameter } from '@storybook/manager-api';
import { Icons, IconButton } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';

import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

Expand Down Expand Up @@ -30,7 +31,7 @@ export const GridSelector: FC = memo(function GridSelector() {
})
}
>
<Icons icon="grid" />
<Icon.Grid />
</IconButton>
);
});
5 changes: 3 additions & 2 deletions code/addons/interactions/src/components/Interaction.tsx
View file
Open in desktop
@@ -1,5 +1,6 @@
import * as React from 'react';
import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
import { IconButton, TooltipNote, WithTooltip } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
import { styled, typography } from '@storybook/theming';
import { transparentize } from 'polished';
Expand Down Expand Up @@ -174,7 +175,7 @@ export const Interaction = ({
tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
>
<StyledIconButton containsIcon onClick={toggleCollapsed}>
<Icons icon="listunordered" />
<Icon.ListUnordered />
</StyledIconButton>
</WithTooltip>
)}
Expand Down
12 changes: 6 additions & 6 deletions code/addons/interactions/src/components/Subnav.tsx
View file
Open in desktop
Expand Up @@ -3,13 +3,13 @@ import React from 'react';
import {
Button,
IconButton,
Icons,
Separator,
P,
TooltipNote,
WithTooltip,
Bar,
} from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import type { Call, ControlStates } from '@storybook/instrumenter';
import { CallStates } from '@storybook/instrumenter';
import { styled } from '@storybook/theming';
Expand Down Expand Up @@ -135,7 +135,7 @@ export const Subnav: React.FC<SubnavProps> = ({
onClick={controls.start}
disabled={!controlStates.start}
>
<Icons icon="rewind" />
<Icon.Rewind />
</RewindButton>
</WithTooltip>

Expand All @@ -146,7 +146,7 @@ export const Subnav: React.FC<SubnavProps> = ({
onClick={controls.back}
disabled={!controlStates.back}
>
<Icons icon="playback" />
<Icon.PlayBack />
</StyledIconButton>
</WithTooltip>

Expand All @@ -157,7 +157,7 @@ export const Subnav: React.FC<SubnavProps> = ({
onClick={controls.next}
disabled={!controlStates.next}
>
<Icons icon="playnext" />
<Icon.PlayNext />
</StyledIconButton>
</WithTooltip>

Expand All @@ -168,13 +168,13 @@ export const Subnav: React.FC<SubnavProps> = ({
onClick={controls.end}
disabled={!controlStates.end}
>
<Icons icon="fastforward" />
<Icon.FastForward />
</StyledIconButton>
</WithTooltip>

<WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}>
<RerunButton aria-label="Rerun" containsIcon onClick={controls.rerun}>
<Icons icon="sync" />
<Icon.Sync />
</RerunButton>
</WithTooltip>
</Group>
Expand Down
5 changes: 3 additions & 2 deletions code/addons/measure/src/Tool.tsx
View file
Open in desktop
@@ -1,6 +1,7 @@
import React, { useCallback, useEffect } from 'react';
import { useGlobals, useStorybookApi } from '@storybook/manager-api';
import { Icons, IconButton } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { TOOL_ID, ADDON_ID } from './constants';

export const Tool = () => {
Expand Down Expand Up @@ -33,7 +34,7 @@ export const Tool = () => {
title="Enable measure"
onClick={toggleMeasure}
>
<Icons icon="ruler" />
<Icon.Ruler />
</IconButton>
);
};
5 changes: 3 additions & 2 deletions code/addons/outline/src/OutlineSelector.tsx
View file
Open in desktop
@@ -1,6 +1,7 @@
import React, { memo, useCallback, useEffect } from 'react';
import { useGlobals, useStorybookApi } from '@storybook/manager-api';
import { Icons, IconButton } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { ADDON_ID, PARAM_KEY } from './constants';

export const OutlineSelector = memo(function OutlineSelector() {
Expand Down Expand Up @@ -34,7 +35,7 @@ export const OutlineSelector = memo(function OutlineSelector() {
title="Apply outlines to the preview"
onClick={toggleOutline}
>
<Icons icon="outline" />
<Icon.Outline />
</IconButton>
);
});
6 changes: 3 additions & 3 deletions code/addons/themes/src/theme-switcher.tsx
View file
Open in desktop
@@ -1,8 +1,8 @@
import React, { Fragment, useMemo } from 'react';
import { useAddonState, useChannel, useGlobals, useParameter } from '@storybook/manager-api';
import { styled } from '@storybook/theming';
import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import type { ThemeAddonState, ThemeParameters } from './constants';
import {
PARAM_KEY,
Expand Down Expand Up @@ -74,7 +74,7 @@ export const ThemeSwitcher = () => {
}}
>
<IconButton key={THEME_SWITCHER_ID} active={!themeOverride} title="Theme">
<Icons icon="paintbrush" />
<Icon.PaintBrush />
{label && <IconButtonLabel>{label}</IconButtonLabel>}
</IconButton>
</WithTooltip>
Expand Down
8 changes: 4 additions & 4 deletions code/addons/viewport/src/Tool.tsx
View file
Open in desktop
Expand Up @@ -4,8 +4,8 @@ import memoize from 'memoizerific';

import { styled, Global, type Theme, withTheme } from '@storybook/theming';

import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { useStorybookApi, useParameter, useAddonState } from '@storybook/manager-api';
import { registerShortcuts } from './shortcuts';
import { PARAM_KEY, ADDON_ID } from './constants';
Expand Down Expand Up @@ -188,7 +188,7 @@ export const ViewportTool: FC = memo(
setState({ ...state, selected: responsiveViewport.id });
}}
>
<Icons icon="grow" />
<Icon.Grow />
{styles ? (
<IconButtonLabel>
{isRotated ? `${item.title} (L)` : `${item.title} (P)`}
Expand Down Expand Up @@ -234,7 +234,7 @@ export const ViewportTool: FC = memo(
setState({ ...state, isRotated: !isRotated });
}}
>
<Icons icon="transfer" />
<Icon.Transfer />
</IconButton>
<ActiveViewportLabel title="Viewport height">
{styles.height.replace('px', '')}
Expand Down
5 changes: 3 additions & 2 deletions code/ui/blocks/src/blocks/mdx.tsx
View file
Open in desktop
@@ -1,7 +1,8 @@
import type { FC, MouseEvent, PropsWithChildren, SyntheticEvent } from 'react';
import React, { useContext } from 'react';
import { NAVIGATE_URL } from '@storybook/core-events';
import { Code, components, Icons, nameSpaceClassNames } from '@storybook/components';
import { Code, components, nameSpaceClassNames } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { global } from '@storybook/global';
import { styled } from '@storybook/theming';
import { Source } from '../components';
Expand Down Expand Up @@ -190,7 +191,7 @@ const HeaderWithOcticonAnchor: FC<PropsWithChildren<HeaderWithOcticonAnchorProps
}
}}
>
<Icons icon="link" />
<Icon.Link />
</OcticonAnchor>
{children}
</OcticonHeader>
Expand Down
6 changes: 3 additions & 3 deletions code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
View file
Open in desktop
Expand Up @@ -5,8 +5,8 @@ import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { includeConditionalArg } from '@storybook/csf';
import { once } from '@storybook/client-logger';
import { IconButton, Icons, ResetWrapper } from '@storybook/components';
import { Link } from '@storybook/components/experimental';
import { IconButton, ResetWrapper } from '@storybook/components';
import { Icon, Link } from '@storybook/components/experimental';

import { ArgRow } from './ArgRow';
import { SectionRow } from './SectionRow';
Expand Down Expand Up @@ -380,7 +380,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
Control{' '}
{!isLoading && resetArgs && (
<StyledIconButton onClick={() => resetArgs()} title="Reset controls">
<Icons icon="undo" aria-hidden />
<Icon.Undo aria-hidden />
</StyledIconButton>
)}
</ControlHeadingWrapper>
Expand Down
9 changes: 5 additions & 4 deletions code/ui/blocks/src/components/Toolbar.tsx
View file
Open in desktop
@@ -1,7 +1,8 @@
import type { FC, MouseEvent } from 'react';
import React, { Fragment } from 'react';
import { styled } from '@storybook/theming';
import { FlexBar, Icons, IconButton, IconButtonSkeleton } from '@storybook/components';
import { FlexBar, IconButton, IconButtonSkeleton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';

interface ZoomProps {
zoom: (val: number) => void;
Expand Down Expand Up @@ -33,7 +34,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
}}
title="Zoom in"
>
<Icons icon="zoom" />
<Icon.Zoom />
</IconButton>
<IconButton
key="zoomout"
Expand All @@ -43,7 +44,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
}}
title="Zoom out"
>
<Icons icon="zoomout" />
<Icon.ZoomOut />
</IconButton>
<IconButton
key="zoomreset"
Expand All @@ -53,7 +54,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
}}
title="Reset zoom"
>
<Icons icon="zoomreset" />
<Icon.ZoomReset />
</IconButton>
</>
);
Expand Down
3 changes: 2 additions & 1 deletion code/ui/blocks/src/controls/Object.tsx
View file
Open in desktop
Expand Up @@ -4,6 +4,7 @@ import type { ComponentProps, SyntheticEvent, FC, FocusEvent } from 'react';
import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
import { styled, useTheme, type Theme } from '@storybook/theming';
import { Form, Icons, type IconsProps, IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { JsonTree, getObjectType } from './react-editable-json-tree';
import { getControlId, getControlSetterButtonId } from './helpers';
import type { ControlProps, ObjectValue, ObjectConfig } from './types';
Expand Down Expand Up @@ -294,7 +295,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange }) => {
setShowRaw((v) => !v);
}}
>
<Icons icon={showRaw ? 'eyeclose' : 'eye'} />
{showRaw ? <Icon.EyeClose /> : <Icon.Eye />}
<span>RAW</span>
</RawButton>
)}
Expand Down
31 changes: 14 additions & 17 deletions code/ui/blocks/src/controls/options/Select.tsx
View file
Open in desktop
Expand Up @@ -3,8 +3,7 @@ import React from 'react';
import { styled } from '@storybook/theming';
import type { CSSObject } from '@storybook/theming';
import { logger } from '@storybook/client-logger';
import { Icons } from '@storybook/components';

import { Icon } from '@storybook/components/experimental';
import type { ControlProps, OptionsSelection, NormalizedOptionsConfig } from '../types';

import { selectedKey, selectedKeys, selectedValues } from './helpers';
Expand Down Expand Up @@ -73,21 +72,17 @@ const SelectWrapper = styled.span(({ theme }) => ({
position: 'relative',
verticalAlign: 'top',
width: '100%',
}));

svg: {
position: 'absolute',
zIndex: 1,
pointerEvents: 'none',
height: '12px',
marginTop: '-6px',
right: '12px',
top: '50%',
fill: theme.textMutedColor,

path: {
fill: theme.textMutedColor,
},
},
const SelectChevronDown = styled.div(({ theme }) => ({
position: 'absolute',
zIndex: 1,
pointerEvents: 'none',
height: '12px',
marginTop: '-6px',
right: '12px',
top: '50%',
color: theme.textMutedColor,
}));

type SelectConfig = NormalizedOptionsConfig & { isMulti: boolean };
Expand All @@ -104,7 +99,9 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {

return (
<SelectWrapper>
<Icons icon="arrowdown" />
<SelectChevronDown>
<Icon.ChevronDown />
</SelectChevronDown>
<OptionsSelect id={controlId} value={selection} onChange={handleChange}>
<option key="no-selection" disabled>
{NO_SELECTION}
Expand Down
2 changes: 1 addition & 1 deletion code/ui/components/package.json
View file
Open in desktop
Expand Up @@ -71,7 +71,7 @@
"@storybook/client-logger": "workspace:*",
"@storybook/csf": "^0.1.0",
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.1.0",
"@storybook/icons": "^1.1.5",
"@storybook/theming": "workspace:*",
"@storybook/types": "workspace:*",
"memoizerific": "^1.11.3",
Expand Down