Merge pull request #23356 from storybookjs/charles/update-button

UI: Improve Button layout and props

code/ui/.storybook/main.ts

@@ -6,17 +6,21 @@ import type { StorybookConfig } from '../../frameworks/react-vite';
 const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true';
 
 const allStories = [
+  {
+    directory: '../components/src/new',
+    titlePrefix: '@core-ui',
+  },
   {
     directory: '../manager/src',
-    titlePrefix: '@storybook-manager',
+    titlePrefix: '@manager',
   },
   {
-    directory: '../components/src',
-    titlePrefix: '@storybook-components',
+    directory: '../components/src/legacy',
+    titlePrefix: '@components',
   },
   {
     directory: '../blocks/src',
-    titlePrefix: '@storybook-blocks',
+    titlePrefix: '@blocks',
   },
 ];
 

code/ui/components/package.json

@@ -27,6 +27,12 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./experimental": {
+      "types": "./dist/experimantal.d.ts",
+      "node": "./dist/experimantal.js",
+      "require": "./dist/experimantal.js",
+      "import": "./dist/experimantal.mjs"
+    },
     "./html": {
       "types": "./dist/html.d.ts",
       "require": "./dist/html.js",
@@ -37,6 +43,19 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "html": [
+        "dist/html.d.ts"
+      ],
+      "experimental": [
+        "dist/experimantal.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -81,7 +100,8 @@
   },
   "bundler": {
     "entries": [
-      "./src/index.ts"
+      "./src/index.ts",
+      "./src/experimantal.ts"
     ],
     "platform": "neutral"
   },

code/ui/components/src/experimantal.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./typings.d.ts" />
+
+/* ABSOLUTELY DO NOT:
+ * - EXPORT PROPS INTERFACES OF COMPONENTS
+ * - EXPORT * FROM ANY FILES, EVERY EXPORT SHOULD BE DELIBERATE
+ * - EXPORT IMPORT / EXPORT ANYTHING FROM LEGACY
+ */
+
+export { Button } from './new/Button/Button';

code/ui/components/src/index.ts

@@ -3,88 +3,91 @@
 
 import type { ElementType } from 'react';
 import { createElement, forwardRef } from 'react';
-import * as typography from './typography/components';
-
-export { A } from './typography/elements/A';
-export { Blockquote } from './typography/elements/Blockquote';
-export { Code } from './typography/elements/Code';
-export { Div } from './typography/elements/Div';
-export { DL } from './typography/elements/DL';
-export { H1 } from './typography/elements/H1';
-export { H2 } from './typography/elements/H2';
-export { H3 } from './typography/elements/H3';
-export { H4 } from './typography/elements/H4';
-export { H5 } from './typography/elements/H5';
-export { H6 } from './typography/elements/H6';
-export { HR } from './typography/elements/HR';
-export { Img } from './typography/elements/Img';
-export { LI } from './typography/elements/LI';
-export { OL } from './typography/elements/OL';
-export { P } from './typography/elements/P';
-export { Pre } from './typography/elements/Pre';
-export { Span } from './typography/elements/Span';
-export { Table } from './typography/elements/Table';
-export { TT } from './typography/elements/TT';
-export { UL } from './typography/elements/UL';
-export { Badge } from './Badge/Badge';
+import * as typography from './legacy/typography/components';
+
+export { A } from './legacy/typography/elements/A';
+export { Blockquote } from './legacy/typography/elements/Blockquote';
+export { Code } from './legacy/typography/elements/Code';
+export { Div } from './legacy/typography/elements/Div';
+export { DL } from './legacy/typography/elements/DL';
+export { H1 } from './legacy/typography/elements/H1';
+export { H2 } from './legacy/typography/elements/H2';
+export { H3 } from './legacy/typography/elements/H3';
+export { H4 } from './legacy/typography/elements/H4';
+export { H5 } from './legacy/typography/elements/H5';
+export { H6 } from './legacy/typography/elements/H6';
+export { HR } from './legacy/typography/elements/HR';
+export { Img } from './legacy/typography/elements/Img';
+export { LI } from './legacy/typography/elements/LI';
+export { OL } from './legacy/typography/elements/OL';
+export { P } from './legacy/typography/elements/P';
+export { Pre } from './legacy/typography/elements/Pre';
+export { Span } from './legacy/typography/elements/Span';
+export { Table } from './legacy/typography/elements/Table';
+export { TT } from './legacy/typography/elements/TT';
+export { UL } from './legacy/typography/elements/UL';
+export { Badge } from './legacy/Badge/Badge';
 
 // Typography
-export { Link } from './typography/link/link';
-export { DocumentWrapper } from './typography/DocumentWrapper';
+export { Link } from './legacy/typography/link/link';
+export { DocumentWrapper } from './legacy/typography/DocumentWrapper';
 export type {
   SyntaxHighlighterFormatTypes,
   SyntaxHighlighterProps,
   SyntaxHighlighterRendererProps,
-} from './syntaxhighlighter/syntaxhighlighter-types';
-export { SyntaxHighlighter } from './syntaxhighlighter/lazy-syntaxhighlighter';
-export { createCopyToClipboardFunction } from './syntaxhighlighter/syntaxhighlighter';
+} from './legacy/syntaxhighlighter/syntaxhighlighter-types';
+export { SyntaxHighlighter } from './legacy/syntaxhighlighter/lazy-syntaxhighlighter';
+export { createCopyToClipboardFunction } from './legacy/syntaxhighlighter/syntaxhighlighter';
 
 // UI
-export { ActionBar } from './ActionBar/ActionBar';
-export { Spaced } from './spaced/Spaced';
-export { Placeholder } from './placeholder/placeholder';
-export { ScrollArea } from './ScrollArea/ScrollArea';
-export { Zoom } from './Zoom/Zoom';
-export type { ActionItem } from './ActionBar/ActionBar';
-export { ErrorFormatter } from './ErrorFormatter/ErrorFormatter';
+export { ActionBar } from './legacy/ActionBar/ActionBar';
+export { Spaced } from './legacy/spaced/Spaced';
+export { Placeholder } from './legacy/placeholder/placeholder';
+export { ScrollArea } from './legacy/ScrollArea/ScrollArea';
+export { Zoom } from './legacy/Zoom/Zoom';
+export type { ActionItem } from './legacy/ActionBar/ActionBar';
+export { ErrorFormatter } from './legacy/ErrorFormatter/ErrorFormatter';
 
 // Forms
-export { Button } from './Button/Button';
-export { Form } from './form/index';
+export { Button } from './legacy/Button/Button';
+export { Form } from './legacy/form/index';
 
 // Tooltips
-export { WithTooltip, WithTooltipPure } from './tooltip/lazy-WithTooltip';
-export { TooltipMessage } from './tooltip/TooltipMessage';
-export { TooltipNote } from './tooltip/TooltipNote';
-export { TooltipLinkList, type Link as TooltipLinkListLink } from './tooltip/TooltipLinkList';
-export { default as ListItem } from './tooltip/ListItem';
+export { WithTooltip, WithTooltipPure } from './legacy/tooltip/lazy-WithTooltip';
+export { TooltipMessage } from './legacy/tooltip/TooltipMessage';
+export { TooltipNote } from './legacy/tooltip/TooltipNote';
+export {
+  TooltipLinkList,
+  type Link as TooltipLinkListLink,
+} from './legacy/tooltip/TooltipLinkList';
+export { default as ListItem } from './legacy/tooltip/ListItem';
 
 // Toolbar and subcomponents
-export { Tabs, TabsState, TabBar, TabWrapper } from './tabs/tabs';
-export { IconButton, IconButtonSkeleton, TabButton } from './bar/button';
-export { Separator, interleaveSeparators } from './bar/separator';
-export { Bar, FlexBar } from './bar/bar';
-export { AddonPanel } from './addon-panel/addon-panel';
+export { Tabs, TabsState, TabBar, TabWrapper } from './legacy/tabs/tabs';
+export { IconButton, IconButtonSkeleton, TabButton } from './legacy/bar/button';
+export { Separator, interleaveSeparators } from './legacy/bar/separator';
+export { Bar, FlexBar } from './legacy/bar/bar';
+export { AddonPanel } from './legacy/addon-panel/addon-panel';
 
 // Graphics
-export type { IconsProps } from './icon/icon';
-export { Icons, Symbols } from './icon/icon';
-export { icons } from './icon/icons';
-export { StorybookLogo } from './brand/StorybookLogo';
-export { StorybookIcon } from './brand/StorybookIcon';
+export type { IconsProps } from './legacy/icon/icon';
+export { Icons, Symbols } from './legacy/icon/icon';
+export { icons } from './legacy/icon/icons';
+export { StorybookLogo } from './legacy/brand/StorybookLogo';
+export { StorybookIcon } from './legacy/brand/StorybookIcon';
 
 // Loader
-export { Loader } from './Loader/Loader';
+export { Loader } from './legacy/Loader/Loader';
 
 // Utils
-export { getStoryHref } from './utils/getStoryHref';
+export { getStoryHref } from './legacy/utils/getStoryHref';
 
-export * from './typography/DocumentFormatting';
-export * from './typography/ResetWrapper';
+export * from './legacy/typography/DocumentFormatting';
+export * from './legacy/typography/ResetWrapper';
 
-export { withReset, codeCommon } from './typography/lib/common';
+export { withReset, codeCommon } from './legacy/typography/lib/common';
 
-export { ClipboardCode } from './clipboard/ClipboardCode';
+export { ClipboardCode } from './legacy/clipboard/ClipboardCode';
 
 // eslint-disable-next-line prefer-destructuring
 export const components = typography.components;