Fixes on icons

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
2025-10-18 22:41:50 +01:00
parent 87cf96e1ea
commit 717f7080d1
10 changed files with 10 additions and 148 deletions
@@ -1,24 +0,0 @@
-import { CodeBlock } from '@/components/CodeBlock';
-import { IconLibrary } from '@/components/IconLibrary';
-
-# Iconography
-
-All our default icons are provided by [Remix Icon](https://remixicon.com/). We
-don't import all icons to reduce the bundle size but we cherry pick a nice
-selection for you to use in your application. The list of names is set down
-below. To use an icon, you can use the `Icon` component and pass the name of
-the icon you want to use.
-
-<CodeBlock code={`<Icon name="heart" />`} />
-
-## Icon overrides
-
-You can override any icons in our library by using the `IconProvider` at the root of your application.
-
-<CodeBlock
-  code={`<IconProvider overrides={{ heart: () => <div>Custom Icon</div> }} />`}
-/>
-
-## Icon library
-
-<IconLibrary />
@@ -6,9 +6,9 @@ import { sass } from '@codemirror/lang-sass';
 import styles from './styles.module.css';
 import { usePlayground } from '@/utils/playground-context';
 import { AnimatePresence, motion } from 'motion/react';
-import { Icon } from '../../../../packages/ui';
 import { createTheme } from '@uiw/codemirror-themes';
 import { tags as t } from '@lezer/highlight';
+import { RiArrowDownSLine } from '@remixicon/react';

 const defaultTheme = `:root {
  --bui-bg-solid: #000;
@@ -125,7 +125,12 @@ export const CustomTheme = () => {
                className={styles.buttonClose}
                onClick={() => setOpen(!open)}
              >
-                <Icon name={open ? 'chevron-down' : 'chevron-up'} />
+                <RiArrowDownSLine
+                  aria-hidden="true"
+                  style={{
+                    transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+                  }}
+                />
              </button>
            </div>
          </div>
@@ -1,22 +0,0 @@
-'use client';
-
-import { Text, Icon, icons } from '../../../../packages/ui';
-import type { IconNames } from '../../../../packages/ui';
-import styles from './styles.module.css';
-
-export const IconLibrary = () => {
-  const list = Object.keys(icons);
-
-  return (
-    <div className={styles.library}>
-      {list.map(icon => (
-        <div key={icon} className={styles.item}>
-          <div className={styles.icon}>
-            <Icon name={icon as IconNames} />
-          </div>
-          <Text variant="body">{icon}</Text>
-        </div>
-      ))}
-    </div>
-  );
-};
@@ -1 +0,0 @@
-export { IconLibrary } from './IconLibrary';
@@ -1,28 +0,0 @@
-.library {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: 1rem;
-}
-
-.item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.icon {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  height: 80px;
-  border-radius: 0.5rem;
-  border: 1px solid var(--border);
-  background-color: var(--panel);
-  transition: background-color 0.2s ease-in-out;
-
-  &:hover {
-    background-color: var(--surface-1);
-  }
-}
@@ -3,7 +3,6 @@
 import * as Table from '../Table';
 import { Chip } from '../Chip';
 import { TypePopup } from './TypePopup';
-import { icons } from '../../../../packages/ui';

 import { PropDef } from '@/utils/propDefs';

@@ -33,10 +32,8 @@ export const PropsTable = <T extends Record<string, PropData>>({
      <Table.Body>
        {Object.keys(data).map(n => {
          const enumValues =
-            data[n].values === 'icon'
-              ? Object.keys(icons).map(icon => <Chip key={icon}>{icon}</Chip>)
-              : Array.isArray(data[n].values) &&
-                data[n].values.map(t => <Chip key={t}>{t}</Chip>);
+            Array.isArray(data[n].values) &&
+            data[n].values.map(t => <Chip key={t}>{t}</Chip>);

          return (
            <Table.Row key={n}>
@@ -1,36 +0,0 @@
-import { PropsTable } from '@/components/PropsTable';
-import { IconSnippet } from '@/snippets/stories-snippets';
-import { Snippet } from '@/components/Snippet';
-import { CodeBlock } from '@/components/CodeBlock';
-import {
-  iconPropDefs,
-  iconUsageSnippet,
-  iconDefaultSnippet,
-} from './icon.props';
-import { PageTitle } from '@/components/PageTitle';
-import { Theming } from '@/components/Theming';
-import { ChangelogComponent } from '@/components/ChangelogComponent';
-
-<PageTitle
-  title="Icon"
-  description="Icons are used to represent an action or a state."
-/>
-
-<Snippet
-  py={4}
-  align="center"
-  preview={<IconSnippet story="Default" />}
-  code={iconDefaultSnippet}
-/>
-
-## Usage
-
-<CodeBlock code={iconUsageSnippet} />
-
-## API reference
-
-<PropsTable data={iconPropDefs} />
-
-<Theming component="Icon" />
-
-<ChangelogComponent component="icon" />
@@ -1,25 +0,0 @@
-import {
-  classNamePropDefs,
-  stylePropDefs,
-  type PropDef,
-} from '@/utils/propDefs';
-
-export const iconPropDefs: Record<string, PropDef> = {
-  name: {
-    type: 'enum',
-    values: 'icon',
-    responsive: false,
-  },
-  size: {
-    type: 'number',
-    responsive: false,
-  },
-  ...classNamePropDefs,
-  ...stylePropDefs,
-};
-
-export const iconUsageSnippet = `import { Icon } from '@backstage/ui';
-
-<Icon />`;
-
-export const iconDefaultSnippet = `<Icon name="heart" />`;
@@ -24,10 +24,6 @@ export const overview: Page[] = [
 ];

 export const coreConcepts: Page[] = [
-  {
-    title: 'Iconography',
-    slug: 'iconography',
-  },
  {
    title: 'Layout',
    slug: 'layout',
@@ -8,7 +8,7 @@ import {
 import { components } from './data';

 type Theme = 'light' | 'dark';
-type ThemeName = 'backstage' | 'spotify';
+type ThemeName = 'backstage' | 'spotify' | 'custom';

 // Create a context with an empty array as the default value
 const PlaygroundContext = createContext<{
				`@@ -1 +0,0 @@`
				`export { IconLibrary } from './IconLibrary';`