GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

First pass at updating all icons

Browse Source
This commit is contained in:
Charles de Dreuille 2023-08-02 12:16:17 +02:00
parent 0005430a7d
commit af6d5f90ec
39 changed files with 133 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
code/addons/a11y/src/components/VisionSimulator.tsx
View File

@ -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';
@ -144,7 +145,7 @@ export const VisionSimulator = () => {
onDoubleClick={() => setFilter(null)}
>
<IconButton key="filter" active={!!filter} title="Vision simulator">
<Icons icon="accessibility" />
<Icon.Accessibility />
</IconButton>
</WithTooltip>
<Hidden>

5
code/addons/backgrounds/src/containers/BackgroundSelector.tsx
View File

@ -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';
@ -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>

5
code/addons/backgrounds/src/containers/GridSelector.tsx
View File

@ -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';
@ -30,7 +31,7 @@ export const GridSelector: FC = memo(function GridSelector() {
})
}
>
<Icons icon="grid" />
<Icon.Grid />
</IconButton>
);
});

5
code/addons/interactions/src/components/Interaction.tsx
View File

@ -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';
@ -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>
)}

12
code/addons/interactions/src/components/Subnav.tsx
View File

@ -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';
@ -135,7 +135,7 @@ export const Subnav: React.FC<SubnavProps> = ({
onClick={controls.start}
disabled={!controlStates.start}
>
<Icons icon="rewind" />
<Icon.Rewind />
</RewindButton>
</WithTooltip>
@ -146,7 +146,7 @@ export const Subnav: React.FC<SubnavProps> = ({
onClick={controls.back}
disabled={!controlStates.back}
>
<Icons icon="playback" />
<Icon.PlayBack />
</StyledIconButton>
</WithTooltip>
@ -157,7 +157,7 @@ export const Subnav: React.FC<SubnavProps> = ({
onClick={controls.next}
disabled={!controlStates.next}
>
<Icons icon="playnext" />
<Icon.PlayNext />
</StyledIconButton>
</WithTooltip>
@ -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>

5
code/addons/measure/src/Tool.tsx
View File

@ -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 = () => {
@ -33,7 +34,7 @@ export const Tool = () => {
title="Enable measure"
onClick={toggleMeasure}
>
<Icons icon="ruler" />
<Icon.Ruler />
</IconButton>
);
};

5
code/addons/outline/src/OutlineSelector.tsx
View File

@ -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() {
@ -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
code/addons/themes/src/theme-switcher.tsx
View File

@ -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,
@ -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>

8
code/addons/viewport/src/Tool.tsx
View File

@ -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';
@ -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)`}
@ -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', '')}

5
code/ui/blocks/src/blocks/mdx.tsx
View File

@ -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';
@ -190,7 +191,7 @@ const HeaderWithOcticonAnchor: FC<PropsWithChildren<HeaderWithOcticonAnchorProps
}
}}
>
<Icons icon="link" />
<Icon.Link />
</OcticonAnchor>
{children}
</OcticonHeader>

6
code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx
View File

@ -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';
@ -379,7 +379,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>

9
code/ui/blocks/src/components/Toolbar.tsx
View File

@ -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;
@ -33,7 +34,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
}}
title="Zoom in"
>
<Icons icon="zoom" />
<Icon.Zoom />
</IconButton>
<IconButton
key="zoomout"
@ -43,7 +44,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
}}
title="Zoom out"
>
<Icons icon="zoomout" />
<Icon.ZoomOut />
</IconButton>
<IconButton
key="zoomreset"
@ -53,7 +54,7 @@ const Zoom: FC<ZoomProps> = ({ zoom, resetZoom }) => (
}}
title="Reset zoom"
>
<Icons icon="zoomreset" />
<Icon.ZoomReset />
</IconButton>
</>
);

3
code/ui/blocks/src/controls/Object.tsx
View File

@ -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';
@ -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>
)}

5
code/ui/blocks/src/controls/options/Select.tsx
View File

@ -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';
@ -104,7 +103,7 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange }) => {
return (
<SelectWrapper>
<Icons icon="arrowdown" />
<Icon.ChevronDown />
<OptionsSelect id={controlId} value={selection} onChange={handleChange}>
<option key="no-selection" disabled>
{NO_SELECTION}

3
code/ui/manager/src/components/notifications/NotificationItem.tsx
View File

@ -4,6 +4,7 @@ import { type State } from '@storybook/manager-api';
import { Link } from '@storybook/router';
import { styled, useTheme } from '@storybook/theming';
import { Icons, IconButton, type IconsProps } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { transparentize } from 'polished';
const Notification = styled.div(({ theme }) => ({
@ -115,7 +116,7 @@ const DismissNotificationItem: FC<{
onDismiss();
}}
>
<Icons icon="closeAlt" height={12} width={12} />
<Icon.CloseAlt size={12} />
</DismissButtonWrapper>
);

5
code/ui/manager/src/components/panel/panel.stories.tsx
View File

@ -1,6 +1,7 @@
import React, { useCallback, useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Badge, Icons, Spaced } from '@storybook/components';
import { Badge, Spaced } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { Addon_TypesEnum } from '@storybook/types';
import Panel from './panel';
import { panels, shortcuts } from '../layout/app.mockdata';
@ -66,7 +67,7 @@ export const JSXTitles = () => {
<div>
<Spaced col={1}>
<div style={{ display: 'inline-block', verticalAlign: 'middle' }}>Alert!</div>
<Icons icon="bell" />
<Icon.Bell />
</Spaced>
</div>
),

7
code/ui/manager/src/components/panel/panel.tsx
View File

@ -1,5 +1,6 @@
import React, { Component, Fragment } from 'react';
import { Tabs, Icons, IconButton } from '@storybook/components';
import { Tabs, IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import type { State } from '@storybook/manager-api';
import { shortcutToHumanString } from '@storybook/manager-api';
import type { Addon_BaseType } from '@storybook/types';
@ -66,14 +67,14 @@ const AddonPanel = React.memo<{
shortcuts.panelPosition
)}]`}
>
<Icons icon={panelPosition === 'bottom' ? 'sidebaralt' : 'bottombar'} />
{panelPosition === 'bottom' ? <Icon.SidebarAlt /> : <Icon.BottomBar />}
</IconButton>
<IconButton
key="visibility"
onClick={actions.toggleVisibility}
title={`Hide addons [${shortcutToHumanString(shortcuts.togglePanel)}]`}
>
<Icons icon="close" />
<Icon.Close />
</IconButton>
</Fragment>
) : undefined

5
code/ui/manager/src/components/preview/toolbar.tsx
View File

@ -3,7 +3,8 @@ import React, { Fragment, useMemo } from 'react';
import { styled } from '@storybook/theming';
import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
import { FlexBar, IconButton, Separator, TabButton, TabBar } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import {
shortcutToHumanString,
Consumer,
@ -71,7 +72,7 @@ export const fullScreenTool: Addon_BaseType = {
onClick={toggle as any}
title={`${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`}
>
<Icons icon={value ? 'close' : 'expand'} />
{value ? <Icon.Close /> : <Icon.Expand />}
</IconButton>
)
}

5
code/ui/manager/src/components/preview/tools/addons.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import { IconButton, Icons } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { Consumer, types } from '@storybook/manager-api';
import type { Combo } from '@storybook/manager-api';
import type { Addon_BaseType } from '@storybook/types';
@ -23,7 +24,7 @@ export const addonsTool: Addon_BaseType = {
!isVisible && (
<>
<IconButton aria-label="Show addons" key="addons" onClick={toggle} title="Show addons">
<Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
{panelPosition === 'bottom' ? <Icon.BottomBar /> : <Icon.SidebarAlt />}
</IconButton>
</>
)

5
code/ui/manager/src/components/preview/tools/copy.tsx
View File

@ -1,7 +1,8 @@
import { global } from '@storybook/global';
import React from 'react';
import copy from 'copy-to-clipboard';
import { getStoryHref, IconButton, Icons } from '@storybook/components';
import { getStoryHref, IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { Consumer, types } from '@storybook/manager-api';
import type { Combo } from '@storybook/manager-api';
import type { Addon_BaseType } from '@storybook/types';
@ -37,7 +38,7 @@ export const copyTool: Addon_BaseType = {
onClick={() => copy(getStoryHref(baseUrl, storyId, queryParams))}
title="Copy canvas link"
>
<Icons icon="link" />
<Icon.Link />
</IconButton>
) : null
}

5
code/ui/manager/src/components/preview/tools/eject.tsx
View File

@ -1,6 +1,7 @@
import { global } from '@storybook/global';
import React from 'react';
import { getStoryHref, IconButton, Icons } from '@storybook/components';
import { getStoryHref, IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { Consumer, types } from '@storybook/manager-api';
import type { Combo } from '@storybook/manager-api';
import type { Addon_BaseType } from '@storybook/types';
@ -34,7 +35,7 @@ export const ejectTool: Addon_BaseType = {
target="_blank"
title="Open canvas in new tab"
>
<Icons icon="sharealt" />
<Icon.ShareAlt />
</IconButton>
) : null
}

5
code/ui/manager/src/components/preview/tools/menu.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import { IconButton, Icons, Separator } from '@storybook/components';
import { IconButton, Separator } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { Consumer, types } from '@storybook/manager-api';
import type { Combo } from '@storybook/manager-api';
import type { Addon_BaseType } from '@storybook/types';
@ -22,7 +23,7 @@ export const menuTool: Addon_BaseType = {
!isVisible && (
<>
<IconButton aria-label="Show sidebar" key="menu" onClick={toggle} title="Show sidebar">
<Icons icon="menu" />
<Icon.Menu />
</IconButton>
<Separator />
</>

5
code/ui/manager/src/components/preview/tools/remount.tsx
View File

@ -1,6 +1,7 @@
import type { ComponentProps } from 'react';
import React, { useState } from 'react';
import { IconButton, Icons } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { Consumer, types } from '@storybook/manager-api';
import type { Combo } from '@storybook/manager-api';
import { styled } from '@storybook/theming';
@ -56,7 +57,7 @@ export const remountTool: Addon_BaseType = {
animating={isAnimating}
disabled={!storyId}
>
<Icons icon="sync" />
<Icon.Sync />
</StyledAnimatedIconButton>
);
}}

9
code/ui/manager/src/components/preview/tools/zoom.tsx
View File

@ -1,7 +1,8 @@
import type { SyntheticEvent, MouseEventHandler } from 'react';
import React, { Component, useCallback } from 'react';
import { Icons, IconButton, Separator } from '@storybook/components';
import { IconButton, Separator } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import type { Addon_BaseType } from '@storybook/types';
import { types } from '@storybook/manager-api';
@ -38,13 +39,13 @@ const Zoom = React.memo<{
return (
<>
<IconButton key="zoomin" onClick={zoomIn} title="Zoom in">
<Icons icon="zoom" />
<Icon.Zoom />
</IconButton>
<IconButton key="zoomout" onClick={zoomOut} title="Zoom out">
<Icons icon="zoomout" />
<Icon.ZoomOut />
</IconButton>
<IconButton key="zoomreset" onClick={reset} title="Reset zoom">
<Icons icon="zoomreset" />
<Icon.ZoomReset />
</IconButton>
</>
);

11
code/ui/manager/src/components/sidebar/Menu.tsx
View File

@ -4,7 +4,8 @@ import React, { useMemo, useState } from 'react';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import type { Button, TooltipLinkListLink } from '@storybook/components';
import { WithTooltip, TooltipLinkList, Icons, IconButton } from '@storybook/components';
import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
@ -16,7 +17,7 @@ const sharedStyles = {
display: 'block',
};
const Icon = styled(Icons)(sharedStyles, ({ theme }) => ({
const StyledIcon = styled(Icons)(sharedStyles, ({ theme }) => ({
color: theme.color.secondary,
}));
@ -77,7 +78,7 @@ export interface ListItemIconProps {
*/
export const MenuItemIcon = ({ icon, imgSrc }: ListItemIconProps) => {
if (icon) {
return <Icon icon={icon} />;
return <StyledIcon icon={icon} />;
}
if (imgSrc) {
return <Img src={imgSrc} alt="image" />;
@ -123,7 +124,7 @@ export const SidebarMenu: FC<{
highlighted={isHighlighted}
active={isTooltipVisible}
>
<Icons icon="cog" />
<Icon.Cog />
</SidebarIconButton>
</WithTooltip>
);
@ -147,7 +148,7 @@ export const ToolbarMenu: FC<{
tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
>
<IconButton title="Shortcuts" aria-label="Shortcuts">
<Icons icon="menu" />
<Icon.Menu />
</IconButton>
</WithTooltip>
);

9
code/ui/manager/src/components/sidebar/RefBlocks.tsx
View File

@ -2,7 +2,8 @@ import { global } from '@storybook/global';
import type { FC } from 'react';
import React, { useState, useCallback, Fragment } from 'react';
import { Icons, WithTooltip, Spaced, Button, Link, ErrorFormatter } from '@storybook/components';
import { WithTooltip, Spaced, Button, Link, ErrorFormatter } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { logger } from '@storybook/client-logger';
import { styled } from '@storybook/theming';
@ -78,7 +79,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
</Text>
<div>
<Button small gray onClick={refresh}>
<Icons icon="sync" />
<Icon.Sync />
Refresh now
</Button>
</div>
@ -88,7 +89,7 @@ export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }
<Text>Sign in to browse this Storybook.</Text>
<div>
<Button small gray onClick={open}>
<Icons icon="lock" />
<Icon.Lock />
Sign in
</Button>
</div>
@ -114,7 +115,7 @@ export const ErrorBlock: FC<{ error: Error }> = ({ error }) => (
>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link isButton>
View error <Icons icon="arrowdown" />
View error <Icon.ChevronDown />
</Link>
</WithTooltip>{' '}
<Link withArrow href="https://storybook.js.org/docs" cancel={false} target="_blank">

7
code/ui/manager/src/components/sidebar/RefIndicator.tsx
View File

@ -3,7 +3,8 @@ import type { FC } from 'react';
import React, { useMemo, useCallback, forwardRef } from 'react';
import type { TooltipLinkListLink } from '@storybook/components';
import { Icons, WithTooltip, Spaced, TooltipLinkList } from '@storybook/components';
import { WithTooltip, Spaced, TooltipLinkList, Icons } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { useStorybookApi } from '@storybook/manager-api';
@ -159,7 +160,7 @@ const CurrentVersion: FC<CurrentVersionProps> = ({ url, versions }) => {
return (
<Version>
<span>{currentVersionId}</span>
<Icons icon="arrowdown" />
<Icon.ChevronDown />
</Version>
);
};
@ -204,7 +205,7 @@ export const RefIndicator = React.memo(
}
>
<IndicatorClickTarget data-action="toggle-indicator" aria-label="toggle indicator">
<Icons icon="globe" />
<Icon.Globe />
</IndicatorClickTarget>
</WithTooltip>

3
code/ui/manager/src/components/sidebar/Tree.tsx
View File

@ -9,6 +9,7 @@ import type {
} from '@storybook/manager-api';
import { styled } from '@storybook/theming';
import { Button, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { transparentize } from 'polished';
import type { MutableRefObject } from 'react';
import React, { useCallback, useMemo, useRef } from 'react';
@ -301,7 +302,7 @@ const Node = React.memo<NodeProps>(function Node({
setFullyExpanded();
}}
>
<Icons icon={isFullyExpanded ? 'collapse' : 'expandalt'} />
{isFullyExpanded ? <Icon.Collapse /> : <Icon.ExpandAlt />}
</Action>
)}
</RootNode>

9
code/ui/manager/src/containers/menu.tsx
View File

@ -2,6 +2,7 @@ import type { FC } from 'react';
import React, { useCallback, useMemo } from 'react';
import { Badge, Icons } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import type { API, State } from '@storybook/manager-api';
import { shortcutToHumanString } from '@storybook/manager-api';
import { styled, useTheme } from '@storybook/theming';
@ -103,7 +104,7 @@ export const useMenu = (
onClick: () => api.toggleNav(),
active: showNav,
right: enableShortcuts ? <Shortcut keys={shortcutKeys.toggleNav} /> : null,
left: showNav ? <Icons icon="check" /> : null,
left: showNav ? <Icon.Check /> : null,
}),
[api, enableShortcuts, shortcutKeys, showNav]
);
@ -115,7 +116,7 @@ export const useMenu = (
onClick: () => api.toggleToolbar(),
active: showToolbar,
right: enableShortcuts ? <Shortcut keys={shortcutKeys.toolbar} /> : null,
left: showToolbar ? <Icons icon="check" /> : null,
left: showToolbar ? <Icon.Check /> : null,
}),
[api, enableShortcuts, shortcutKeys, showToolbar]
);
@ -127,7 +128,7 @@ export const useMenu = (
onClick: () => api.togglePanel(),
active: showPanel,
right: enableShortcuts ? <Shortcut keys={shortcutKeys.togglePanel} /> : null,
left: showPanel ? <Icons icon="check" /> : null,
left: showPanel ? <Icon.Check /> : null,
}),
[api, enableShortcuts, shortcutKeys, showPanel]
);
@ -149,7 +150,7 @@ export const useMenu = (
onClick: () => api.toggleFullscreen(),
active: isFullscreen,
right: enableShortcuts ? <Shortcut keys={shortcutKeys.fullScreen} /> : null,
left: isFullscreen ? <Icons icon="check" /> : null,
left: isFullscreen ? <Icon.Check /> : null,
}),
[api, enableShortcuts, shortcutKeys, isFullscreen]
);

5
code/ui/manager/src/settings/index.tsx
View File

@ -1,5 +1,6 @@
import { useStorybookApi, useStorybookState, types } from '@storybook/manager-api';
import { IconButton, Icons, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components';
import { IconButton, FlexBar, TabBar, TabButton, ScrollArea } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { Location, Route } from '@storybook/router';
import { styled } from '@storybook/theming';
import { global } from '@storybook/global';
@ -94,7 +95,7 @@ const Pages: FC<{
}}
title="Close settings page"
>
<Icons icon="close" />
<Icon.Close />
</IconButton>
</FlexBar>
<Content vertical horizontal={false}>

9
code/ui/manager/src/settings/whats_new.tsx
View File

@ -1,7 +1,8 @@
import type { ComponentProps, FC } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import { styled, useTheme } from '@storybook/theming';
import { Button, IconButton, Icons, Loader } from '@storybook/components';
import { Button, IconButton, Loader, Icons } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
import { global } from '@storybook/global';
@ -77,7 +78,7 @@ export const WhatsNewFooter = ({
return (
<Container>
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<Icons icon="heart" color={theme.color.mediumdark} />
<Icon.Heart color={theme.color.mediumdark} />
<div>Share this with your team.</div>
<CopyButton onClick={copyLink} small>
{copyText}
@ -86,12 +87,12 @@ export const WhatsNewFooter = ({
<ToggleNotificationButton onClick={onToggleNotifications}>
{isNotificationsEnabled ? (
<>
<Icons icon="eyeclose" />
<Icon.EyeClose />
&nbsp;Hide notifications
</>
) : (
<>
<Icons icon="eye" />
<Icon.Eye />
&nbsp;Show notifications
</>
)}

5
docs/addons/writing-addons.md
View File

@ -109,7 +109,8 @@ Going through the code blocks in sequence:
```ts
import { useGlobals, useStorybookApi } from '@storybook/manager-api';
import { Icons, IconButton } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
```
The [`useGlobals`](./addons-api.md#useglobals) and [`useStorybookApi`](./addons-api.md#usestorybookapi) hooks from the `manager-api` package are used to access the Storybook's APIs, allowing users to interact with the addon, such as enabling or disabling it. The `Icons` and `IconButtons` components from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package render the icons and buttons in the toolbar.
@ -144,7 +145,7 @@ export const Tool = memo(function MyAddonSelector() {
title="Apply outlines to the preview"
onClick={toggleMyTool}
>
<Icons icon="lightning" />
<Icon.Lightning />
</IconButton>
);
});

5
docs/snippets/common/addon-consume-and-update-globaltype.js.mdx
View File

@ -6,7 +6,8 @@ import React, { useCallback } from 'react';
import { FORCE_RE_RENDER } from '@storybook/core-events';
import { useGlobals } from '@storybook/manager-api';
import { IconButton, Icons } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { addons } from '@storybook/preview-api';
@ -34,7 +35,7 @@ const ExampleToolbar = () => {
title="Show a Storybook toolbar"
onClick={toggleOutline}
>
<Icons icon="outline" />
<Icon.Outline />
</IconButton>
);
};

5
docs/snippets/common/storybook-addon-tool-initial-setup.ts.mdx
View File

@ -4,7 +4,8 @@
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, TOOL_ID } from './constants';
export const Tool = memo(function MyAddonSelector() {
@ -36,7 +37,7 @@ export const Tool = memo(function MyAddonSelector() {
title="Apply outlines to the preview"
onClick={toggleMyTool}
>
<Icons icon="lightning" />
<Icon.Lightning />
</IconButton>
);
});

5
docs/snippets/common/storybook-addon-toolbar-example.js.mdx
View File

@ -5,7 +5,8 @@ import React from 'react';
import { addons, types } from '@storybook/manager-api';
import { Icons, IconButton } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
addons.register('my/toolbar', () => {
addons.add('my-toolbar-addon/toolbar', {
@ -16,7 +17,7 @@ addons.register('my/toolbar', () => {
match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
render: ({ active }) => (
<IconButton active={active} title="Show a Storybook toolbar">
<Icons icon="outline" />
<Icon.Outline />
</IconButton>
),
});

5
docs/snippets/common/storybook-addon-toolkit-toolbar-example.toolbar.ts.mdx
View File

@ -4,7 +4,8 @@
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, TOOL_ID } from './constants';
export const Tool = memo(function MyAddonSelector() {
@ -31,7 +32,7 @@ export const Tool = memo(function MyAddonSelector() {
return (
<IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
<Icons icon="lightning" />
<Icon.Lightning />
</IconButton>
);
});

5
docs/snippets/common/storybook-addons-api-getchannel.js.mdx
View File

@ -9,7 +9,8 @@ import { addons } from '@storybook/preview-api';
import { useGlobals } from '@storybook/manager-api';
import { IconButton, Icons } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
const ExampleToolbar = () => {
const [globals, updateGlobals] = useGlobals();
@ -34,7 +35,7 @@ const ExampleToolbar = () => {
title="Show the toolbar addon"
onClick={toggleToolbarAddon}
>
<Icons icon="outline" />
<Icon.Outline />
</IconButton>
);
};

4
docs/snippets/common/storybook-addons-api-useaddonstate.js.mdx
View File

@ -7,6 +7,8 @@ import { useAddonState } from '@storybook/manager-api';
import { AddonPanel, Button, IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
export const Panel = () => {
const [state, setState] = useAddonState('addon-unique-identifier', 'initial state');
@ -28,7 +30,7 @@ export const Tool = () => {
title="Enable my addon"
onClick={() => setState('Example')}
>
<Icons icon="lightning" />
<Icon.Lightning />
</IconButton>
);
};

6
docs/snippets/common/storybook-addons-api-useapi.js.mdx
View File

@ -3,7 +3,9 @@
import React, { useEffect, useCallback } from 'react';
import { Icons, IconButton } from '@storybook/components';
import { IconButton } from '@storybook/components';
import { Icon } from '@storybook/components/experimental';
import { useStorybookApi } from '@storybook/manager-api';
@ -26,7 +28,7 @@ export const Panel = () => {
return (
<IconButton key="custom-toolbar" active="true" title="Show a toolbar addon">
<Icons icon="arrowdown" />
<Icon.ChevronDown />
</IconButton>
);
};