;
+
+export const Default: ActionBarStory = {
+ render: (args) =>
-
- {
- docItems.map((itemProps) => (
-
-
- {
- docItems.map((itemProps) => {
- let IconElement = iconMap[itemProps.children];
- return (
- -
-
{itemProps.children}
-
- );
- })
- }
-
-
- {
- docItems.map((itemProps) => {
- let IconElement = iconMap[itemProps.children];
- return (
- -
-
- );
- })
- }
-
-
- )
- )
- .add(
- 'with falsy item key',
- () => (
-
- - Add
- - Delete
- - Edit
-
- )
- )
- .add(
- 'isDisabled',
- () => render({isDisabled: true, defaultSelectedKeys: ['1']}, docItems)
- )
- .add(
- 'all keys disabled',
- () => render({disabledKeys: ['1', '2']}, docItems)
- )
- .add(
- 'compact',
- () => render({density: 'compact', defaultSelectedKeys: ['1']}, viewItems)
- )
- .add(
- 'isJustified',
- () => render({isJustified: true, defaultSelectedKeys: ['1']}, viewItems2)
- )
- .add(
- 'compact, isJustified',
- () => render({density: 'compact', isJustified: true, defaultSelectedKeys: ['1']}, viewItems2)
- )
- .add(
- 'isQuiet',
- () => render({isQuiet: true, defaultSelectedKeys: ['1']}, editItems)
- )
- .add(
- 'compact, isQuiet',
- () => render({density: 'compact', isQuiet: true, defaultSelectedKeys: ['1']}, editItems)
- )
- .add(
- 'isEmphasized',
- () => render({isEmphasized: true, defaultSelectedKeys: ['1']}, docItems)
- )
- .add(
- 'compact, isEmphasized',
- () => render({isEmphasized: true, density: 'compact', defaultSelectedKeys: ['1']}, viewItems)
- )
- .add(
- 'isQuiet, isEmphasized',
- () => render({isEmphasized: true, isQuiet: true, defaultSelectedKeys: ['1', '2'], disabledKeys: ['2']}, viewItems)
- )
- .add(
- 'staticColor=white',
- () => (
-
- {render({staticColor: 'white', defaultSelectedKeys: ['1']}, viewItems)}
-
- )
- )
- .add(
- 'staticColor=white, isQuiet',
- () => (
-
- {render({staticColor: 'white', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
-
- )
- )
- .add(
- 'staticColor=black',
- () => (
-
- {render({staticColor: 'black', defaultSelectedKeys: ['1']}, viewItems)}
-
- )
- )
- .add(
- 'staticColor=black, isQuiet',
- () => (
-
- {render({staticColor: 'black', isQuiet: true, defaultSelectedKeys: ['1']}, viewItems)}
-
- )
- )
- .add(
- 'selectionMode: multiple',
- () => render({selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
- )
- .add(
- 'selectionMode: single, disallowEmptySelection',
- () => render({selectionMode: 'single', disallowEmptySelection: true, defaultSelectedKeys: ['1']}, dataItems)
- )
- .add(
- 'selectionMode: multiple, isQuiet',
- () => render({isQuiet: true, selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
- )
- .add(
- 'selectionMode: multiple, isQuiet, compact',
- () => render({isQuiet: true, density: 'compact', selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
- )
- .add(
- 'selectionMode: multiple, isEmphasized',
- () => render({isEmphasized: true, selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
- )
- .add(
- 'selectionMode: multiple, isEmphasized, compact',
- () => render({isEmphasized: true, density: 'compact', selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
- )
- .add(
- 'selectionMode: multiple, isEmphasized, isQuiet',
- () => render({isEmphasized: true, isQuiet: true, selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
- )
- .add(
- 'selectionMode: multiple, isEmphasized, isQuiet, compact',
- () => render({isEmphasized: true, isQuiet: true, density: 'compact', selectionMode: 'multiple', defaultSelectedKeys: ['1', '2']}, dataItems)
- )
- // no selection mode none, it's covered in the default story visually
- .add(
- 'vertical',
- () => render({orientation: 'vertical', defaultSelectedKeys: ['1']}, docItems)
- )
- .add(
- 'vertical, isJustified',
- () => render({isJustified: true, orientation: 'vertical', defaultSelectedKeys: ['1']}, docItems)
- )
- .add(
- 'vertical, compact',
- () => render({density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']}, viewItems)
- )
- .add(
- 'vertical, isJustified, compact',
- () => render({isJustified: true, density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']}, viewItems)
- )
- .add(
- 'vertical, isQuiet',
- () => render({isQuiet: true, orientation: 'vertical', defaultSelectedKeys: ['1']}, editItems)
- )
- .add(
- 'vertical, isQuiet, compact',
- () => render({isQuiet: true, density: 'compact', orientation: 'vertical', defaultSelectedKeys: ['1']}, viewItems)
- )
- .add(
- 'disabledKeys',
- () => render({disabledKeys: ['1', '2'], selectionMode: 'multiple'}, dataItems)
- )
- .add(
- 'dynamic default',
- () => (
-
- {item => - {item.children}
}
-
- )
- )
- .add(
- 'dynamic single selection',
- () => (
- onSelectionChange([...s])} items={viewItems}>
- {item => - {item.children}
}
-
- )
- )
- .add(
- 'with tooltips',
- () => renderTooltips({})
- )
- .add(
- 'overflowMode: wrap',
- () => (
-
-
- -
-
Edit
-
- -
-
Copy
-
- -
-
Delete
-
- -
-
Move
-
- -
-
Duplicate
-
-
-
- {renderCollapsible()}
- {renderCollapsible({density: 'compact'})}
- {renderCollapsible({density: 'compact', isJustified: true})}
- {renderCollapsible({isQuiet: true})}
-
- )
- )
- .add(
- 'overflowMode: collapse, disabledKeys',
- () => (
-
- {renderCollapsible({disabledKeys: ['edit', 'duplicate']})}
- {renderCollapsible({density: 'compact', disabledKeys: ['edit', 'duplicate']})}
- {renderCollapsible({density: 'compact', disabledKeys: ['edit', 'duplicate'], isJustified: true})}
- {renderCollapsible({disabledKeys: ['edit', 'duplicate'], isQuiet: true})}
-
- )
- )
- .add(
- 'buttonLabelBehavior: hide',
- () => (
-
- {renderCollapsible({buttonLabelBehavior: 'hide'})}
- {renderCollapsibleText({buttonLabelBehavior: 'hide'})}
-
- )
- )
- .add(
- 'buttonLabelBehavior: collapse',
- () => (
-
- {renderCollapsible({buttonLabelBehavior: 'collapse'})}
- {renderCollapsibleText({buttonLabelBehavior: 'collapse'})}
-
- )
- )
- .add(
- 'overflowMode: collapse, selection',
- () => (
-
- {renderCollapsibleFormatting({density: 'compact', maxWidth: '50%', isEmphasized: true})}
- {renderCollapsibleAlignment({density: 'compact', maxWidth: '50%', isEmphasized: true})}
-
- )
- )
- .add(
- 'overflowMode: collapse, summaryIcon',
- () => (
-
- {renderCollapsibleFormatting({density: 'compact', overflowMode: 'collapse', summaryIcon:
- )
- )
- .add(
- 'overflowMode: collapse, single selection',
- () => (
-
- {renderCollapsibleAlignment({density: 'compact', maxWidth: '50%', isEmphasized: true})}
- {renderCollapsibleAlignment({density: 'compact', maxWidth: '50%', isEmphasized: true, buttonLabelBehavior: 'show'})}
- {renderCollapsibleAlignmentNoIcons({density: 'compact', maxWidth: '50%', isEmphasized: true, buttonLabelBehavior: 'show'})}
-
- )
- )
- .add(
- 'orientation: vertical, overflowMode: collapse',
- () => (
-
- {renderCollapsible({orientation: 'vertical', buttonLabelBehavior: 'hide', maxHeight: '100%', marginBottom: 0})}
-
- )
- )
- .add(
- 'orientation: vertical, overflowMode: collapse, selection',
- () => (
-
- Note: this is currently unsupported by Spectrum. Container should scroll.
-
- {renderTools({orientation: 'vertical', buttonLabelBehavior: 'hide', maxHeight: '100%'})}
-
-
- )
- );
+export default {
+ title: 'ActionGroup',
+ component: ActionGroup,
+ args: {
+ onAction: action('onAction'),
+ onSelectionChange: s => onSelectionChange([...s])
+ },
+ argTypes: {
+ onAction: {
+ table: {
+ disable: true
+ }
+ },
+ onSelectionChange: {
+ table: {
+ disable: true
+ }
+ },
+ disabledKeys: {
+ table: {
+ disable: true
+ }
+ },
+ items: {
+ table: {
+ disable: true
+ }
+ },
+ summaryIcon: {
+ table: {
+ disable: true
+ }
+ },
+ selectionMode: {
+ control: 'select',
+ options: ['none', 'single', 'multiple']
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ density: {
+ control: 'select',
+ options: ['compact', 'regular', 'spacious']
+ },
+ isJustified: {
+ control: 'boolean'
+ },
+ isQuiet: {
+ control: 'boolean'
+ },
+ isEmphasized: {
+ control: 'boolean'
+ },
+ disallowEmptySelection: {
+ control: 'boolean'
+ },
+ orientation: {
+ control: 'select',
+ options: ['horizontal', 'vertical']
+ },
+ overflowMode: {
+ control: 'select',
+ options: ['wrap', 'collapse']
+ },
+ buttonLabelBehavior: {
+ control: 'select',
+ options: ['show', 'hide', 'collapse']
+ }
+ }
+} as ComponentMeta;
+export type ActionGroupStory = ComponentStoryObj;
-function render(props, items) {
- return (
-
- {renderText(props, items)}
- {renderBoth(props, items)}
- {renderIcons(props, items)}
-
- );
-}
+export const Default: ActionGroupStory = {
+ args: {items: viewItems},
+ render: (args) => render(args)
+};
-function renderText(props, items: any = docItems) {
- return (
- onSelectionChange([...s])} {...props}>
- {
- items.map((itemProps) => (
-
+ - Add
+ - Delete
+ - Edit
- );
-}
+ )
+};
-function renderBoth(props, items: any = docItems) {
- return (
- onSelectionChange([...s])} {...props}>
- {
- items.map((itemProps) => {
- let IconElement = iconMap[itemProps.children];
- return (
- -
-
{itemProps.children}
-
- );
- })
- }
-
- );
-}
+export const AllKeysDisabled: ActionGroupStory = {
+ ...Default,
+ args: {disabledKeys: ['1', '2', '3'], items: viewItems}
+};
-function renderIcons(props, items: any = docItems) {
- return (
- onSelectionChange([...s])} {...props}>
- {
- items.map((itemProps) => {
- let IconElement = iconMap[itemProps.children];
- return (
- -
-
- );
- })
- }
-
- );
-}
+export const SomeKeysDisabled: ActionGroupStory = {
+ ...Default,
+ args: {disabledKeys: ['1', '2'], items: viewItems}
+};
-function renderTooltips(props, items: any = docItems) {
+export const StaticColorWhite: ActionGroupStory = {
+ args: {staticColor: 'white', defaultSelectedKeys: ['1'], items: viewItems},
+ render: (args) => (
+
+ {render(args)}
+
+ ),
+ storyName: 'staticColor=white'
+};
+
+export const StaticColorBlack: ActionGroupStory = {
+ args: {staticColor: 'black', defaultSelectedKeys: ['1'], items: viewItems},
+ render: (args) => (
+
+ {render(args)}
+
+ ),
+ storyName: 'staticColor=black'
+};
+
+export const WithTooltips: ActionGroupStory = {
+ args: {items: viewItems},
+ render: (args) => renderTooltips(args)
+};
+
+export const Overflow: ActionGroupStory = {
+ args: {disabledKeys: ['1', '5']},
+ render: (args) => renderOverflow(args),
+ storyName: 'overflowMode'
+};
+
+export const SummaryIcon: ActionGroupStory = {
+ ...Overflow,
+ args: {disabledKeys: ['1', '5'], summaryIcon:
+ Note: this is currently unsupported by Spectrum. Container should scroll.
+
+ {renderTools({orientation: 'vertical', buttonLabelBehavior: 'hide', maxHeight: '100%', ...args})}
+
+
+ ),
+ storyName: 'special vertical overflow case'
+};
+
+
+function render(props) {
return (
- onSelectionChange([...s])} {...props}>
- {
- items.map((itemProps) => {
- let IconElement = iconMap[itemProps.children];
- return (
-
- -
-
- {itemProps.children}
-
- );
- })
- }
-
+
+ {renderText(props)}
+ {renderBoth(props)}
+ {renderIcons(props)}
+
);
}
-function renderCollapsible(props = {}) {
+function renderText(props) {
return (
-
- -
-
Edit
-
- -
-
Copy
-
- -
-
Delete
-
- -
-
Move
-
- -
-
Duplicate
-
+
+ {(item: any) => - {item.children}
}
);
}
-function renderCollapsibleText(props = {}) {
+function renderBoth(props) {
return (
-
- - Edit
- - Copy
- - Delete
- - Move
- - Duplicate
+
+ {(item: any) => {
+ let IconElement = iconMap[item.children];
+ return (
+ -
+
{item.children}
+
+ );
+ }}
);
}
-function renderCollapsibleFormatting(props = {}) {
+function renderIcons(props) {
return (
-
- -
-
Bold
-
- -
-
Italic
-
- -
-
Underline
-
- -
-
Strikethrough
-
+
+ {(item: any) => {
+ let IconElement = iconMap[item.children];
+ return (
+ -
+
+ );
+ }}
);
}
-function renderCollapsibleAlignment(props = {}) {
+function renderTooltips(props) {
return (
-
- -
-
Align Left
-
- -
-
Align Center
-
- -
-
Align Right
-
- -
-
Justify
-
+
+ {(item: any) => {
+ let IconElement = iconMap[item.children];
+ return (
+
+ -
+
+ {item.children}
+
+ );
+ }}
);
}
-function renderCollapsibleAlignmentNoIcons(props = {}) {
+function renderOverflow(props) {
return (
-
- - Align Left
- - Align Center
- - Align Right
- - Justify
-
+
+
} maxHeight="100%">
+
-
+
Edit
+
+
-
+
Copy
+
+
-
+
Delete
+
+
-
+
Move
+
+
-
+
Duplicate
+
+
+
- {children}
- <_123 />
-
- );
-}
diff --git a/packages/@react-spectrum/alert/stories/Alert.stories.tsx b/packages/@react-spectrum/alert/stories/Alert.stories.tsx
new file mode 100644
index 00000000000..8817f3a847b
--- /dev/null
+++ b/packages/@react-spectrum/alert/stories/Alert.stories.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import _123 from '@spectrum-icons/workflow/123';
+import {Alert} from '../';
+import CalendarCheckColor from '@spectrum-icons/color/CalendarCheckColor';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import React from 'react';
+
+export default {
+ title: 'Alert',
+ component: Alert,
+ args: {
+ 'title': 'Title',
+ variant: 'info'
+ },
+ argTypes: {
+ variant: {
+ control: 'select',
+ options: ['info', 'help', 'success', 'error', 'warning']
+ },
+ title: {
+ control: 'text'
+ },
+ 'aria-live': {
+ control: 'select',
+ options: ['polite', 'off']
+ }
+ }
+} as ComponentMeta;
+
+export type ActionGroupStory = ComponentStoryObj;
+
+export const Default: ActionGroupStory = {
+ render: (args) => render(args)
+};
+
+function render(props) {
+ return (
+
+ This is a React Spectrum alert
+ <_123 />
+
+ );
+}
diff --git a/packages/@react-spectrum/breadcrumbs/stories/Breadcrumbs.stories.tsx b/packages/@react-spectrum/breadcrumbs/stories/Breadcrumbs.stories.tsx
index 11ff625f693..c5a648801d6 100644
--- a/packages/@react-spectrum/breadcrumbs/stories/Breadcrumbs.stories.tsx
+++ b/packages/@react-spectrum/breadcrumbs/stories/Breadcrumbs.stories.tsx
@@ -12,158 +12,132 @@
import {action} from '@storybook/addon-actions';
import {Breadcrumbs} from '../';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
// import {Heading} from '@react-spectrum/text';
import {Item} from '@react-stately/collections';
import React from 'react';
-import {storiesOf} from '@storybook/react';
let styles = {
width: '100vw'
};
const CenterDecorator = storyFn => ;
-storiesOf('Breadcrumbs', module)
- .addDecorator(CenterDecorator)
- .addParameters({providerSwitcher: {status: 'negative'}})
- .add(
- 'Default (with 3 items)',
- () => render()
- )
- .add(
- 'Default (with 7 items)',
- () => renderMany({})
- )
- .add(
- 'isMultiline',
- () => render({isMultiline: true})
- )
- .add(
- 'size: S',
- () => render({size: 'S'})
- )
- .add(
- 'size: S, isMultiline',
- () => render({size: 'S', isMultiline: true})
- )
- .add(
- 'size: M',
- () => render({size: 'M'})
- )
- .add(
- 'size: M, isMultiline',
- () => render({size: 'M', isMultiline: true})
- )
- .add(
- 'truncated',
- () => (
-
- {render({})}
-
- )
- )
- .add(
- 'truncated, isMultiline',
- () => (
-
- {render({isMultiline: true})}
-
- )
- )
- .add(
- 'many items, showRoot: true',
- () => renderMany({showRoot: true})
- )
- .add(
- 'many items, isMultiline',
- () => renderMany({isMultiline: true})
- )
- .add(
- 'many items, isMultiline, showRoot: true',
- () => renderMany({maxVisibleItems: 'auto', isMultiline: true, showRoot: true})
- )
- .add(
- 'isDisabled: true',
- () => render({isDisabled: true})
- )
- .add(
- 'isDisabled: true, isMultiline',
- () => render({isDisabled: true, isMultiline: true})
- )
- .add(
- 'resizeable',
- () => (
-
- {renderMany({})}
-
- )
- )
- // .add(
- // 'last item Heading',
- // () => renderHeading()
- // )
- // .add(
- // 'last item Heading, size: S',
- // () => renderHeading({size: 'S'})
- // )
- // .add(
- // 'last item Heading, size: M',
- // () => renderHeading({size: 'M'})
- // )
- // .add(
- // 'last item Heading, isMultiline',
- // () => renderHeading({isMultiline: true})
- // )
- // .add(
- // 'last item Heading, size: S, isMultiline',
- // () => renderHeading({isMultiline: true, size: 'S'})
- // )
- // .add(
- // 'last item Heading, size: M, isMultiline',
- // () => renderHeading({isMultiline: true, size: 'M'})
- // )
- .add(
- 'Only one item',
- () => (
-
- - Root
-
- )
- )
- .add(
- 'Only one item, isMultiline',
- () => (
-
- - Root
-
- )
- )
- .add(
- 'Only one item, showRoot',
- () => (
-
- - Root
-
- )
- )
- .add(
- 'autoFocusCurrent',
- () => (
-
- {renderMany({autoFocusCurrent: true})}
-
- )
+export type BreadcrumbsStory = ComponentStoryObj;
+
+export default {
+ title: 'Breadcrumbs',
+ component: Breadcrumbs,
+ decorators: [storyFn => CenterDecorator(storyFn)],
+ args: {
+ onAction: action('onAction')
+ },
+ argTypes: {
+ onAction: {
+ table: {
+ disable: true
+ }
+ },
+ isMultiline: {
+ control: 'boolean'
+ },
+ showRoot: {
+ control: 'boolean'
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ autoFocusCurrent: {
+ control: 'boolean'
+ },
+ size: {
+ control: 'select',
+ options: ['S', 'M', 'L']
+ }
+ }
+} as ComponentMeta;
+
+export const Default: BreadcrumbsStory = {
+ render: (args) => render(args),
+ storyName: '3 items'
+};
+
+export const DefaultTruncated: BreadcrumbsStory = {
+ render: (args) => (
+
+ {render(args)}
+
+ ),
+ storyName: 'truncated'
+};
+
+export const RenderMany: BreadcrumbsStory = {
+ render: (args) => (
+
+ {renderMany(args)}
+
+ ),
+ storyName: '7 items, resizable container'
+};
+
+export const OneItem: BreadcrumbsStory = {
+ render: (args) => (
+
+ - Root
+
+ ),
+ storyName: '1 item'
+};
+
+function render(props) {
+ return (
+
+ - The quick brown fox jumps over
+ - My Documents
+ - Kangaroos jump high
+
);
+}
-function render(props = {}) {
+function renderMany(props = {}) {
return (
- The quick brown fox jumps over
- My Documents
- Kangaroos jump high
+ - Koalas are very cute
+ - Wombat's noses
+ - Wattle trees
+ - April 7
);
}
+// TODO: add back in when heading case is fixed?
+// .add(
+// 'last item Heading',
+// () => renderHeading()
+// )
+// .add(
+// 'last item Heading, size: S',
+// () => renderHeading({size: 'S'})
+// )
+// .add(
+// 'last item Heading, size: M',
+// () => renderHeading({size: 'M'})
+// )
+// .add(
+// 'last item Heading, isMultiline',
+// () => renderHeading({isMultiline: true})
+// )
+// .add(
+// 'last item Heading, size: S, isMultiline',
+// () => renderHeading({isMultiline: true, size: 'S'})
+// )
+// .add(
+// 'last item Heading, size: M, isMultiline',
+// () => renderHeading({isMultiline: true, size: 'M'})
+// )
+
// function renderHeading(props = {}) {
// return (
//
@@ -181,17 +155,3 @@ function render(props = {}) {
//
// );
// }
-
-function renderMany(props = {}) {
- return (
-
- - The quick brown fox jumps over
- - My Documents
- - Kangaroos jump high
- - Koalas are very cute
- - Wombat's noses
- - Wattle trees
- - April 7
-
- );
-}
diff --git a/packages/@react-spectrum/button/stories/ActionButton.stories.tsx b/packages/@react-spectrum/button/stories/ActionButton.stories.tsx
index aacefb522e2..2a135792096 100644
--- a/packages/@react-spectrum/button/stories/ActionButton.stories.tsx
+++ b/packages/@react-spectrum/button/stories/ActionButton.stories.tsx
@@ -13,87 +13,93 @@
import {action} from '@storybook/addon-actions';
import {ActionButton} from '../';
import Add from '@spectrum-icons/workflow/Add';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {Flex} from '@react-spectrum/layout';
import React from 'react';
-import {storiesOf} from '@storybook/react';
import {Text} from '@react-spectrum/text';
import {View} from '@react-spectrum/view';
-storiesOf('Button/ActionButton', module)
- .addParameters({providerSwitcher: {status: 'positive'}})
- .add(
- 'default',
- () => render()
- )
- .add(
- 'icon',
- () => renderWithIcon()
- )
- .add(
- 'icon only',
- () => (
-
-
-
-
-
-
- )
- )
- .add(
- 'isQuiet',
- () => render({isQuiet: true})
- )
- .add(
- 'autoFocus',
- () => render({autoFocus: true})
- )
- .add(
- 'staticColor: white',
- () => (
-
-
- {renderWithIcon({staticColor: 'white'})}
- {renderWithIcon({staticColor: 'white', isQuiet: true})}
-
-
- )
- )
- .add(
- 'staticColor: black',
- () => (
-
-
- {renderWithIcon({staticColor: 'black'})}
- {renderWithIcon({staticColor: 'black', isQuiet: true})}
-
-
- )
- );
+export type ActionButtonStory = ComponentStoryObj;
+
+export default {
+ title: 'Button/ActionButton',
+ component: ActionButton,
+ args: {
+ onPress: action('press'),
+ onPressStart: action('pressstart'),
+ onPressEnd: action('pressend')
+ },
+ argTypes: {
+ onPress: {
+ table: {
+ disable: true
+ }
+ },
+ onPressStart: {
+ table: {
+ disable: true
+ }
+ },
+ onPressEnd: {
+ table: {
+ disable: true
+ }
+ },
+ staticColor: {
+ table: {
+ disable: true
+ }
+ },
+ isQuiet: {
+ control: 'boolean'
+ },
+ autoFocus: {
+ control: 'boolean'
+ }
+ }
+} as ComponentMeta;
+
+
+export const Default: ActionButtonStory = {
+ render: (args) => render(args)
+};
+
+export const WithIcon: ActionButtonStory = {
+ render: (args) => renderWithIcon(args)
+};
+
+export const IconOnly: ActionButtonStory = {
+ render: (args) => renderOnlyIcon(args)
+};
+
+export const StaticWhite: ActionButtonStory = {
+ args: {staticColor: 'white'},
+ render: (args) => (
+
+ {renderWithIcon(args)}
+
+ ),
+ storyName: 'staticColor: white'
+};
+
+export const StaticBlack: ActionButtonStory = {
+ args: {staticColor: 'black'},
+ render: (args) => (
+
+ {renderWithIcon(args)}
+
+ ),
+ storyName: 'staticColor: black'
+};
function render(props = {}) {
return (
Default
Disabled
@@ -106,17 +112,11 @@ function renderWithIcon(props = {}) {
return (
Default
Disabled
@@ -125,3 +125,21 @@ function renderWithIcon(props = {}) {
);
}
+
+function renderOnlyIcon(props = {}) {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/packages/@react-spectrum/button/stories/Button.stories.tsx b/packages/@react-spectrum/button/stories/Button.stories.tsx
index 2a3c6e9d275..92541290c81 100644
--- a/packages/@react-spectrum/button/stories/Button.stories.tsx
+++ b/packages/@react-spectrum/button/stories/Button.stories.tsx
@@ -13,91 +13,101 @@
import {action} from '@storybook/addon-actions';
import Bell from '@spectrum-icons/workflow/Bell';
import {Button} from '../';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {Flex} from '@react-spectrum/layout';
-import {mergeProps} from '@react-aria/utils';
import React, {ElementType} from 'react';
import {SpectrumButtonProps} from '@react-types/button';
-import {storiesOf} from '@storybook/react';
import {Text} from '@react-spectrum/text';
import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
import {View} from '@react-spectrum/view';
-const parameters = {
+export type ButtonStory = ComponentStoryObj;
+
+export default {
+ title: 'Button',
+ component: Button,
args: {
- variant: 'cta',
- style: undefined,
- staticColor: undefined
+ onPress: action('press'),
+ onPressStart: action('pressstart'),
+ onPressEnd: action('pressend')
},
argTypes: {
- variant: {
- control: {
- type: 'radio',
- options: ['accent', 'primary', 'secondary', 'negative', 'cta', 'overBackground']
+ onPress: {
+ table: {
+ disable: true
}
},
- style: {
- control: {
- type: 'radio',
- options: [undefined, 'fill', 'outline']
+ onPressStart: {
+ table: {
+ disable: true
}
},
- staticColor: {
- control: {
- type: 'radio',
- options: [undefined, 'white', 'black']
+ onPressEnd: {
+ table: {
+ disable: true
}
+ },
+ autoFocus: {
+ control: 'boolean'
+ },
+ variant: {
+ control: 'select',
+ options: ['accent', 'primary', 'secondary', 'negative', 'cta', 'overBackground']
+ },
+ style: {
+ control: 'select',
+ options: ['fill', 'outline']
+ },
+ staticColor: {
+ control: 'select',
+ options: ['white', 'black']
}
}
+} as ComponentMeta;
+
+export const Default: ButtonStory = {
+ render: (args) => render(args)
+};
+
+export const WithIcon: ButtonStory = {
+ render: (args) => renderIconText(args)
};
-let actions = {
- onPress: action('press'),
- onPressStart: action('pressstart'),
- onPressEnd: action('pressend')
+export const IconOnly: ButtonStory = {
+ render: (args) => renderIconOnly(args)
};
+export const AnchorElement: ButtonStory = {
+ render: (args) => render({elementType: 'a', ...args}),
+ storyName: 'element: a'
+};
-storiesOf('Button', module)
- .addParameters({providerSwitcher: {status: 'positive'}, ...parameters})
- .add(
- 'default',
- (args) => render(args)
- )
- .add(
- 'with icon',
- (args) => renderIconText(args)
- )
- .add(
- 'icon only',
- (args) => renderIconOnly(args)
- )
- .add(
- 'element: a',
- (args) => render({elementType: 'a', ...args})
- )
- .add(
- 'element: a, href: \'//example.com\', target: \'_self\'',
- (args) => render({elementType: 'a', href: '//example.com', target: '_self', ...args})
- )
- .add(
- 'element: a, rel: \'noopener noreferrer\'',
- (args) => render({elementType: 'a', href: '//example.com', rel: 'noopener noreferrer', ...args})
- )
- .add(
- 'user-select:none on press test',
- () => (props: SpectrumButtonProps = {variant: 'primary'}) {
- let buttonProps = mergeProps(props, actions);
+export const AnchorElementNoRefferer: ButtonStory = {
+ render: (args) => render({elementType: 'a', href: '//example.com', rel: 'noopener noreferrer', ...args}),
+ storyName: 'element: a, rel: \'noopener noreferrer\''
+};
+export const UserSelect: ButtonStory = {
+ render: () => (props: SpectrumButtonProps = {variant: 'primary'}) {
let buttons = (
-
+
Default
-
+
Disabled
@@ -123,15 +133,13 @@ function render(props: SpectrumButtonProps
}
function renderIconText(props: SpectrumButtonProps = {variant: 'primary'}) {
- let buttonProps = mergeProps(props, actions);
-
let buttons = (
-
+
Default
-
+
Disabled
@@ -158,18 +166,16 @@ function renderIconText(props: SpectrumButtonP
}
function renderIconOnly(props: SpectrumButtonProps = {variant: 'primary'}) {
- let buttonProps = mergeProps(props, actions);
-
let buttons = (
-
+
Notifications
-
+
Notifications
diff --git a/packages/@react-spectrum/button/stories/LogicButton.stories.tsx b/packages/@react-spectrum/button/stories/LogicButton.stories.tsx
index e0fe28b2729..ef3d084cf4e 100644
--- a/packages/@react-spectrum/button/stories/LogicButton.stories.tsx
+++ b/packages/@react-spectrum/button/stories/LogicButton.stories.tsx
@@ -11,36 +11,59 @@
*/
import {action} from '@storybook/addon-actions';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {LogicButton} from '../';
import React from 'react';
-import {storiesOf} from '@storybook/react';
-storiesOf('Button/LogicButton', module)
- .addParameters({providerSwitcher: {status: 'positive'}})
- .add(
- 'logic variant: and',
- () => render({variant: 'and', label: 'and'})
- )
- .add(
- 'logic variant: or',
- () => render({variant: 'or', label: 'or'})
- );
+export type LogicButtonStory = ComponentStoryObj;
+
+export default {
+ title: 'Button/LogicButton',
+ component: LogicButton,
+ args: {
+ onPress: action('press'),
+ onPressStart: action('pressstart'),
+ onPressEnd: action('pressend')
+ },
+ argTypes: {
+ onPress: {
+ table: {
+ disable: true
+ }
+ },
+ onPressStart: {
+ table: {
+ disable: true
+ }
+ },
+ onPressEnd: {
+ table: {
+ disable: true
+ }
+ },
+ autoFocus: {
+ control: 'boolean'
+ },
+ variant: {
+ control: 'select',
+ options: ['and', 'or']
+ }
+ }
+} as ComponentMeta;
+
+export const Default: LogicButtonStory = {
+ render: (args) => render(args)
+};
function render(props: any = {}) {
return (
Default
Disabled
diff --git a/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx b/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx
index 75f410b27df..831e73f7b5e 100644
--- a/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx
+++ b/packages/@react-spectrum/button/stories/ToggleButton.stories.tsx
@@ -12,73 +12,118 @@
import {action} from '@storybook/addon-actions';
import Add from '@spectrum-icons/workflow/Add';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {Flex, Text, View} from '@adobe/react-spectrum';
import React, {useState} from 'react';
-import {storiesOf} from '@storybook/react';
import {ToggleButton} from '../';
-const parameters = {
+export type ToggleButtonStory = ComponentStoryObj;
+
+export default {
+ title: 'Button/ToggleButton',
+ component: ToggleButton,
args: {
- isQuiet: false,
- isEmphasized: false,
- isDisabled: false
+ onPress: action('press'),
+ onPressStart: action('pressstart'),
+ onPressEnd: action('pressend'),
+ variant: 'cta'
+ },
+ argTypes: {
+ onPress: {
+ table: {
+ disable: true
+ }
+ },
+ onPressStart: {
+ table: {
+ disable: true
+ }
+ },
+ onPressEnd: {
+ table: {
+ disable: true
+ }
+ },
+ staticColor: {
+ table: {
+ disable: true
+ }
+ },
+ isQuiet: {
+ control: 'boolean'
+ },
+ isEmphasized: {
+ control: 'boolean'
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ autoFocus: {
+ control: 'boolean'
+ }
}
+} as ComponentMeta;
+
+export const Default: ToggleButtonStory = {
+ render: (args) => render(args)
+};
+
+export const StaticWhite: ToggleButtonStory = {
+ args: {staticColor: 'white'},
+ render: (args) => (
+
+
+ {render(args)}
+
+
+ ),
+ storyName: 'staticColor: white'
};
-storiesOf('Button/ToggleButton', module)
- .addParameters({providerSwitcher: {status: 'positive'}, ...parameters})
- .add(
- 'default',
- args => render(args)
- )
- .add(
- 'staticColor: white',
- args => (
-
-
- {render({...args, staticColor: 'white'})}
-
-
- )
- )
- .add(
- 'staticColor: black',
- args => (
-
-
- {render({...args, staticColor: 'black'})}
-
-
- )
- )
- .add(
- 'styles to check WHCM support',
- () => (
-
-
- {render()}
- {render({isEmphasized: true})}
- {render({isQuiet: true})}
- {render({isQuiet: true, isEmphasized: true})}
-
-
- )
- )
- .add('controlled state', () => (
-
+
+ {render(args)}
+
+
+ ),
+ storyName: 'staticColor: black'
+};
+
+export const WHCM: ToggleButtonStory = {
+ render: () => (
+
+
+ {render()}
+ {render({isEmphasized: true})}
+ {render({isQuiet: true})}
+ {render({isQuiet: true, isEmphasized: true})}
+
+
+ ),
+ storyName: 'styles to check WHCM support'
+};
+
+export const Controlled: ToggleButtonStory = {
+ render: () =>
-
- Default
-
-
- Selected
-
- );
+ return (
+
+
+ Default
+
+
+ Selected
+
+
+ );
}
function ControlledToggleButton() {
diff --git a/packages/@react-spectrum/buttongroup/stories/ButtonGroup.stories.tsx b/packages/@react-spectrum/buttongroup/stories/ButtonGroup.stories.tsx
index 6832be10bc8..9be8a8c8724 100644
--- a/packages/@react-spectrum/buttongroup/stories/ButtonGroup.stories.tsx
+++ b/packages/@react-spectrum/buttongroup/stories/ButtonGroup.stories.tsx
@@ -14,57 +14,42 @@ import {action} from '@storybook/addon-actions';
import Bell from '@spectrum-icons/workflow/Bell';
import {Button} from '@react-spectrum/button';
import {ButtonGroup} from '../';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import React, {useState} from 'react';
-import {storiesOf} from '@storybook/react';
import {Text} from '@react-spectrum/text';
-storiesOf('ButtonGroup', module)
- .add(
- 'default',
- () => render({})
- )
- .add(
- 'isDisabled',
- () => render({isDisabled: true})
- )
- .add(
- 'orientation: vertical',
- () => render({orientation: 'vertical'})
- )
- .add(
- 'orientation: vertical, align: end',
- () => render({orientation: 'vertical', align: 'end'})
- )
- .add(
- 'isDisabled, orientation: vertical',
- () => render({isDisabled: true, orientation: 'vertical'})
- )
- .add(
- 'align: end',
- () => render({align: 'end'})
- )
- .add(
- 'align: center',
- () => render({align: 'center'})
- )
- .add(
- 'align: center, orientation: vertical',
- () => render({align: 'center', orientation: 'vertical'})
- )
- .add(
- 'resizeable container',
- () => (
-
- {render({})}
-
- )
+export type ButtonGroupStory = ComponentStoryObj;
+
+export default {
+ title: 'ButtonGroup',
+ component: ButtonGroup,
+ argTypes: {
+ isDisabled: {
+ control: 'boolean'
+ },
+ orientation: {
+ control: 'select',
+ options: ['horizontal', 'vertical']
+ },
+ align: {
+ control: 'select',
+ options: ['start', 'end', 'center']
+ }
+ }
+} as ComponentMeta;
+
+export const Default: ButtonGroupStory = {
+ render: (args) => (
+
+ {render(args)}
+
)
- .add(
- 'constant container, changing siblings',
- () => (
-
+
setIsExpanded(prev => !prev)}>{isExpanded ? 'Shrink' : 'Expand'}
@@ -88,7 +73,6 @@ let Component = (props) => {
Button 1
Button long long long name
- Quiet button
Disabled button
setShow(show => !show)}>
;
+
+export default {
+ title: 'Date and Time/Calendar',
+ component: Calendar,
+ args: {
+ onChange: action('onChange')
+ },
+ argTypes: {
+ onChange: {
+ table: {
+ disable: true
+ }
+ },
+ defaultValue: {
+ table: {
+ disable: true
+ }
+ },
+ minValue: {
+ table: {
+ disable: true
+ }
+ },
+ value: {
+ table: {
+ disable: true
+ }
+ },
+ maxValue: {
+ table: {
+ disable: true
+ }
+ },
+ defaultFocusedValue: {
+ table: {
+ disable: true
+ }
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ isReadOnly: {
+ control: 'boolean'
+ },
+ autoFocus: {
+ control: 'boolean'
+ },
+ visibleMonths: {
+ control: 'number'
+ },
+ validationState: {
+ control: 'select',
+ options: [null, 'valid', 'invalid']
+ },
+ 'aria-label': {
+ control: 'text'
+ },
+ errorMessage: {
+ control: 'text'
}
- )
- .add(
- 'aria-label',
- () => render({'aria-label': 'Appointment date'})
- );
+ }
+} as ComponentMeta;
-function render(props = {}) {
- return {
+ const disabledIntervals = [[today(getLocalTimeZone()), today(getLocalTimeZone()).add({weeks: 1})], [today(getLocalTimeZone()).add({weeks: 2}), today(getLocalTimeZone()).add({weeks: 3})]];
+ return disabledIntervals.some((interval) => date.compare(interval[0]) > 0 && date.compare(interval[1]) < 0);
+ }} />
+ ),
+ storyName: 'isDateUnavailable'
+};
+
+export const MinValue: CalendarStory = {
+ ...Default,
+ args: {minValue: today(getLocalTimeZone())},
+ storyName: 'minValue: today'
+};
+
+export const MinValueDefaultVal: CalendarStory = {
+ ...Default,
+ args: {minValue: today(getLocalTimeZone()), defaultValue: new CalendarDate(2019, 6, 5)},
+ storyName: 'minValue: today, defaultValue'
+};
+
+export const DefaultFocusedValue: CalendarStory = {
+ ...Default,
+ args: {defaultFocusedValue: new CalendarDate(2019, 6, 5)},
+ storyName: 'defaultFocusedValue'
+};
+
+export const FocusedValue: CalendarStory = {
+ render: (args) =>
-
);
}
-function CalendarWithZonedTime() {
+function CalendarWithZonedTime(props) {
let [value, setValue] = useState(parseZonedDateTime('2021-03-14T00:45-08:00[America/Los_Angeles]'));
let onChange = (v: ZonedDateTime) => {
setValue(v);
- action('onChange')(v);
+ props?.onChange?.(v);
};
return (
-
);
}
-function ControlledFocus() {
+function ControlledFocus(props) {
let [focusedDate, setFocusedDate] = useState(new CalendarDate(2019, 6, 5));
return (
setFocusedDate(new CalendarDate(2019, 6, 5))}>Reset focused date
-
);
}
diff --git a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
index e9a699d84b5..021cb6cc1fc 100644
--- a/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
+++ b/packages/@react-spectrum/calendar/stories/RangeCalendar.stories.tsx
@@ -12,188 +12,182 @@
import {action} from '@storybook/addon-actions';
import {CalendarDate, CalendarDateTime, getLocalTimeZone, isWeekend, parseZonedDateTime, today} from '@internationalized/date';
-import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {DateValue} from '@react-types/calendar';
-import {Flex, Grid, repeat} from '@react-spectrum/layout';
-import {generatePowerset} from '@react-spectrum/story-utils';
+import {Flex} from '@react-spectrum/layout';
import {RangeCalendar} from '../';
import React, {useState} from 'react';
-import {storiesOf} from '@storybook/react';
-import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
import {TimeField} from '@react-spectrum/datepicker';
import {useLocale} from '@react-aria/i18n';
import {View} from '@react-spectrum/view';
-storiesOf('Date and Time/RangeCalendar', module)
- .add(
- 'Default',
- () => render()
- )
- .add(
- 'defaultValue',
- () => render({defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}})
- )
- .add(
- 'controlled value',
- () => render({value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}})
- )
- .add(
- 'with time',
- () => ;
+
+export default {
+ title: 'Date and Time/RangeCalendar',
+ component: RangeCalendar,
+ args: {
+ onChange: action('onChange')
+ },
+ argTypes: {
+ onChange: {
+ table: {
+ disable: true
+ }
+ },
+ defaultValue: {
+ table: {
+ disable: true
+ }
+ },
+ minValue: {
+ table: {
+ disable: true
+ }
+ },
+ value: {
+ table: {
+ disable: true
+ }
+ },
+ maxValue: {
+ table: {
+ disable: true
+ }
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ isReadOnly: {
+ control: 'boolean'
+ },
+ allowsNonContiguousRanges: {
+ control: 'boolean'
+ },
+ autoFocus: {
+ control: 'boolean'
+ },
+ visibleMonths: {
+ control: 'number'
+ },
+ validationState: {
+ control: 'select',
+ options: [null, 'valid', 'invalid']
+ },
+ errorMessage: {
+ control: 'text'
}
- );
+ }
+} as ComponentMeta;
- // Fake cell for testing css
-function Cell({isToday, isSelected, isFocused, isHovered, isPressed, isDisabled, isRangeStart, isRangeEnd, isRangeSelection, isSelectionStart, isSelectionEnd}) {
- return (
-
- 12
-
- );
-}
+export const Default: RangeCalendarStory = {
+ render: (args) => render(args)
+};
+
+export const DefaultValue: RangeCalendarStory = {
+ ...Default,
+ args: {defaultValue: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}
+};
+
+export const ControlledValue: RangeCalendarStory = {
+ ...Default,
+ args: {value: {start: new CalendarDate(2019, 6, 5), end: new CalendarDate(2019, 6, 10)}}
+};
+
+export const WithTime: RangeCalendarStory = {
+ render: (args) =>
- {generatePowerset(states, (merged) =>
- (merged.isDisabled && (merged.isFocused || merged.isHovered || merged.isPressed)) ||
- (!merged.isSelected && (merged.isRangeSelection || merged.isSelectionStart || merged.isSelectionEnd || merged.isRangeStart || merged.isRangeEnd)) ||
- ((merged.isRangeStart || merged.isRangeEnd) && !merged.isRangeSelection) ||
- (merged.isRangeStart && merged.isRangeEnd) ||
- (merged.isSelectionStart && !merged.isRangeStart) ||
- (merged.isSelectionEnd && !merged.isRangeEnd)
- ).map(props => {Object.keys(props).join(' ')}
|
- )
-);
-
-function render(props = {}) {
+export const OneWeek: RangeCalendarStory = {
+ ...Default,
+ args: {minValue: today(getLocalTimeZone()), maxValue: today(getLocalTimeZone()).add({weeks: 1})},
+ storyName: 'minValue: today, maxValue: 1 week from now'
+};
+
+export const DefaultMinMax: RangeCalendarStory = {
+ ...Default,
+ args: {defaultValue: {start: new CalendarDate(2019, 6, 10), end: new CalendarDate(2019, 6, 12)}, minValue: new CalendarDate(2019, 6, 5), maxValue: new CalendarDate(2019, 6, 20)},
+ storyName: 'defaultValue + minValue + maxValue'
+};
+
+export const DateUnavailable: RangeCalendarStory = {
+ ...Default,
+ args: {isDateUnavailable: (date: DateValue) => {
+ const disabledIntervals = [[today(getLocalTimeZone()), today(getLocalTimeZone()).add({weeks: 1})], [today(getLocalTimeZone()).add({weeks: 2}), today(getLocalTimeZone()).add({weeks: 3})]];
+ return disabledIntervals.some((interval) => date.compare(interval[0]) > 0 && date.compare(interval[1]) < 0);
+ }},
+ storyName: 'isDateUnavailable'
+};
+
+export const MinValue: RangeCalendarStory = {
+ ...Default,
+ args: {minValue: today(getLocalTimeZone())},
+ storyName: 'minValue: today'
+};
+
+export const DefaultValVisibleMonths: RangeCalendarStory = {
+ ...Default,
+ args: {visibleMonths: 3, defaultValue: {start: new CalendarDate(2021, 10, 5), end: new CalendarDate(2021, 12, 10)}},
+ storyName: 'defaultValue, visibleMonths: 3'
+};
+
+export const DateUnavailableInvalid: RangeCalendarStory = {
+ render: (args) =>
-
);
}
-function RangeCalendarWithTime() {
+function RangeCalendarWithTime(props) {
let [value, setValue] = useState({start: new CalendarDateTime(2019, 6, 5, 8), end: new CalendarDateTime(2019, 6, 10, 12)});
+ let onChange = (v) => {
+ setValue(v);
+ props?.onChange?.(v);
+ };
return (
-
- setValue({...value, start: v})} />
- setValue({...value, end: v})} />
+ onChange({...value, start: v})} />
+ onChange({...value, end: v})} />
);
}
-function RangeCalendarWithZonedTime() {
+function RangeCalendarWithZonedTime(props) {
let [value, setValue] = useState({start: parseZonedDateTime('2021-03-10T00:45-05:00[America/New_York]'), end: parseZonedDateTime('2021-03-26T18:05-07:00[America/Los_Angeles]')});
+ let onChange = (v) => {
+ setValue(v);
+ props?.onChange?.(v);
+ };
return (
-
- setValue({...value, start: v})} />
- setValue({...value, end: v})} />
+ onChange({...value, start: v})} />
+ onChange({...value, end: v})} />
);
}
+
+function DateUnavailableAndInvalid(props) {
+ let {locale} = useLocale();
+ return (
+ render({...props, isDateUnavailable: (date: DateValue) => isWeekend(date, locale), allowsNonContiguousRanges: true, defaultValue: {start: new CalendarDate(2021, 10, 3), end: new CalendarDate(2021, 10, 16)}})
+ );
+}
diff --git a/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx b/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx
new file mode 100644
index 00000000000..15e8763b7ac
--- /dev/null
+++ b/packages/@react-spectrum/calendar/stories/RangeCalendarCell.stories.tsx
@@ -0,0 +1,60 @@
+import {classNames} from '@react-spectrum/utils';
+import {generatePowerset} from '@react-spectrum/story-utils';
+import {Grid, repeat} from '@react-spectrum/layout';
+import React from 'react';
+import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
+
+let states = [
+ {isToday: true},
+ {isSelected: true},
+ {isFocused: true},
+ {isHovered: true},
+ {isPressed: true},
+ {isDisabled: true},
+ {isRangeSelection: true},
+ {isRangeStart: true},
+ {isRangeEnd: true},
+ {isSelectionStart: true},
+ {isSelectionEnd: true}
+];
+
+export default {
+ title: 'Date and Time/RangeCalendar/cell'
+};
+
+// Fake cell for testing css
+function Cell({isToday, isSelected, isFocused, isHovered, isPressed, isDisabled, isRangeStart, isRangeEnd, isRangeSelection, isSelectionStart, isSelectionEnd}) {
+ return (
+
+ 12
+
+ );
+}
+
+export const Default = {
+ render: () => (
+
+ {generatePowerset(states, (merged) =>
+ (merged.isDisabled && (merged.isFocused || merged.isHovered || merged.isPressed)) ||
+ (!merged.isSelected && (merged.isRangeSelection || merged.isSelectionStart || merged.isSelectionEnd || merged.isRangeStart || merged.isRangeEnd)) ||
+ ((merged.isRangeStart || merged.isRangeEnd) && !merged.isRangeSelection) ||
+ (merged.isRangeStart && merged.isRangeEnd) ||
+ (merged.isSelectionStart && !merged.isRangeStart) ||
+ (merged.isSelectionEnd && !merged.isRangeEnd)
+ ).map(props => {Object.keys(props).join(' ')}
|
+ )
+};
diff --git a/packages/@react-spectrum/checkbox/stories/Checkbox.stories.tsx b/packages/@react-spectrum/checkbox/stories/Checkbox.stories.tsx
index 06a3e213882..24d133d9e16 100644
--- a/packages/@react-spectrum/checkbox/stories/Checkbox.stories.tsx
+++ b/packages/@react-spectrum/checkbox/stories/Checkbox.stories.tsx
@@ -12,107 +12,94 @@
import {action} from '@storybook/addon-actions';
import {Checkbox} from '../';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {Flex} from '@react-spectrum/layout';
import {Link} from '@react-spectrum/link';
import React from 'react';
-import {storiesOf} from '@storybook/react';
-storiesOf('Checkbox', module)
- .addParameters({providerSwitcher: {status: 'positive'}})
- .add(
- 'Default',
- () => render()
- )
- .add(
- 'defaultSelected: true',
- () => render({defaultSelected: true})
- )
- .add(
- 'isSelected: true',
- () => render({isSelected: true})
- )
- .add(
- 'isSelected: false',
- () => render({isSelected: false})
- )
- .add(
- 'isIndeterminate: true',
- () => render({isIndeterminate: true})
- )
- .add(
- 'validationState: "invalid"',
- () => render({validationState: 'invalid'})
- )
- .add(
- 'isDisabled: true',
- () => render({isDisabled: true})
- )
- .add(
- 'isEmphasized: true',
- () => render({isEmphasized: true})
- )
- .add(
- 'isEmphasized: true, isIndeterminate: true',
- () => render({isEmphasized: true, isIndeterminate: true})
- )
- .add(
- 'isEmphasized: true, validationState: "invalid"',
- () => render({isEmphasized: true, validationState: 'invalid'})
- )
- .add(
- 'isEmphasized: true, validationState: "invalid", isIndeterminate: true',
- () => render({isEmphasized: true, validationState: 'invalid', isIndeterminate: true})
- )
- .add(
- 'isEmphasized: true, isDisabled: true',
- () => render({isEmphasized: true, isDisabled: true})
- )
- .add(
- 'isReadOnly: true, isSelected: true',
- () => render({isReadOnly: true, isSelected: true})
- )
- .add(
- 'autoFocus: true',
- () => render({autoFocus: true})
- )
- .add(
- 'custom label',
- () => renderCustomLabel()
- )
- .add(
- 'long label',
- () => (
-
- Super long checkbox label. Sample text. Arma virumque cano, Troiae qui primus ab oris. Italiam, fato profugus, Laviniaque venit.
-
- )
- )
- .add(
- 'no label',
- () => renderNoLabel({'aria-label': 'This checkbox has no visible label'})
+export type CheckboxStory = ComponentStoryObj;
+
+export default {
+ title: 'Checkbox',
+ component: Checkbox,
+ args: {
+ onChange: action('onChange')
+ },
+ argTypes: {
+ onChange: {
+ table: {
+ disable: true
+ }
+ },
+ defaultSelected: {
+ control: 'boolean'
+ },
+ isSelected: {
+ control: 'boolean'
+ },
+ isIndeterminate: {
+ control: 'boolean'
+ },
+ isEmphasized: {
+ control: 'boolean'
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ isReadOnly: {
+ control: 'boolean'
+ },
+ autoFocus: {
+ control: 'boolean'
+ },
+ validationState: {
+ control: {
+ type: 'select',
+ options: [null, 'valid', 'invalid']
+ }
+ }
+ }
+} as ComponentMeta;
+
+export const Default: CheckboxStory = {
+ render: (args) => render(args)
+};
+
+export const CustomLabel: CheckboxStory = {
+ render: (args) => renderCustomLabel(args)
+};
+
+export const LongLabel: CheckboxStory = {
+ render: (args) => (
+
+ Super long checkbox label. Sample text. Arma virumque cano, Troiae qui primus ab oris. Italiam, fato profugus, Laviniaque venit.
+
)
- .add(
- 'WHCM test',
- () => (
-
- Shows the different states from spectrum
- {renderRow()}
- {renderRow({isSelected: true, isEmphasized: true})}
- {renderRow({isIndeterminate: true, isEmphasized: true})}
- {renderRow({isSelected: true, isEmphasized: false})}
- {renderRow({isIndeterminate: true, isEmphasized: false})}
- {renderRow({validationState: 'invalid'})}
- {renderRow({isSelected: true, validationState: 'invalid'})}
-
- )
- );
+};
+
+export const NoLabel: CheckboxStory = {
+ render: (args) => renderNoLabel(args)
+};
+
+export const WHCM: CheckboxStory = {
+ render: () => (
+
+ Shows the different states from spectrum
+ {renderRow()}
+ {renderRow({isSelected: true, isEmphasized: true})}
+ {renderRow({isIndeterminate: true, isEmphasized: true})}
+ {renderRow({isSelected: true, isEmphasized: false})}
+ {renderRow({isIndeterminate: true, isEmphasized: false})}
+ {renderRow({validationState: 'invalid'})}
+ {renderRow({isSelected: true, validationState: 'invalid'})}
+
+ )
+};
function render(props = {}) {
return (
-
+
Checkbox Label
);
@@ -120,9 +107,7 @@ function render(props = {}) {
function renderCustomLabel(props = {}) {
return (
-
+
Italicized Checkbox Label
);
@@ -130,26 +115,19 @@ function renderCustomLabel(props = {}) {
function renderNoLabel(props = {}) {
return (
-
-
+
Option
-
+
Option
-
+
);
}
diff --git a/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx b/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx
index 7727bdaaabe..4804a760f91 100644
--- a/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx
+++ b/packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx
@@ -12,136 +12,154 @@
import {action} from '@storybook/addon-actions';
import {Checkbox, CheckboxGroup} from '../';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {Content, ContextualHelp, Heading} from '@adobe/react-spectrum';
import {Flex} from '@adobe/react-spectrum';
import React, {useState} from 'react';
import {SpectrumCheckboxGroupProps} from '@react-types/checkbox';
-import {storiesOf} from '@storybook/react';
-
-storiesOf('CheckboxGroup', module)
- .addParameters({
- providerSwitcher: {status: 'positive'},
- args: {
- label: 'Pets',
- isEmphasized: false,
- isDisabled: false,
- isReadOnly: false,
- isRequired: false,
- necessityIndicator: 'icon',
- labelPosition: 'top',
- labelAlign: 'start',
- validationState: null,
- orientation: 'vertical'
- },
- argTypes: {
- labelPosition: {
- control: {
- type: 'radio',
- options: ['top', 'side']
- }
- },
- necessityIndicator: {
- control: {
- type: 'radio',
- options: ['icon', 'label']
- }
- },
- labelAlign: {
- control: {
- type: 'radio',
- options: ['start', 'end']
- }
- },
- validationState: {
- control: {
- type: 'radio',
- options: [null, 'valid', 'invalid']
- }
- },
- orientation: {
- control: {
- type: 'radio',
- options: ['horizontal', 'vertical']
- }
+
+export type CheckboxGroupStory = ComponentStoryObj;
+
+export default {
+ title: 'CheckboxGroup',
+ component: CheckboxGroup,
+ args: {
+ label: 'Pets',
+ onChange: action('onChange')
+ },
+ argTypes: {
+ onChange: {
+ table: {
+ disable: true
}
+ },
+ contextualHelp: {
+ table: {
+ disable: true
+ }
+ },
+ defaultValue: {
+ table: {
+ disable: true
+ }
+ },
+ value: {
+ table: {
+ disable: true
+ }
+ },
+ isEmphasized: {
+ control: 'boolean'
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ isReadOnly: {
+ control: 'boolean'
+ },
+ isRequired: {
+ control: 'boolean'
+ },
+ necessityIndicator: {
+ control: 'select',
+ options: ['icon', 'label']
+ },
+ labelPosition: {
+ control: 'select',
+ options: ['top', 'side']
+ },
+ labelAlign: {
+ control: 'select',
+ options: ['start', 'end']
+ },
+ validationState: {
+ control: 'select',
+ options: [null, 'valid', 'invalid']
+ },
+ description: {
+ control: 'text'
+ },
+ errorMessage: {
+ control: 'text'
+ },
+ showErrorIcon: {
+ control: 'boolean'
+ },
+ orientation: {
+ control: 'select',
+ options: ['horizontal', 'vertical']
+ },
+ 'aria-label': {
+ control: 'text'
+ },
+ name: {
+ control: 'text'
}
- })
- .add(
- 'Default',
- args => render(args)
- )
- .add(
- 'defaultValue: dragons',
- args => render({...args, defaultValue: ['dragons']})
- )
- .add(
- 'controlled: dragons',
- args => render({...args, value: ['dragons']})
- )
- .add(
- 'isDisabled on one checkbox',
- () => render({}, [{}, {isDisabled: true}, {}])
- )
- .add(
- 'isDisabled two checkboxes and one checked',
- args => render({...args, defaultValue: ['dragons']}, [{}, {isDisabled: true}, {isDisabled: true}])
- )
- .add(
- 'isEmphasized, isDisabled two checkboxes and one checked',
- args => render({...args, isEmphasized: true, defaultValue: ['dragons']}, [{}, {isDisabled: true}, {isDisabled: true}])
- )
- .add(
- 'validationState: "invalid" on one checkbox',
- args => render(args, [{}, {validationState: 'invalid'}, {}])
- )
- .add(
- 'with description',
- args => render({...args, description: 'Please select some pets.'})
- )
- .add(
- 'with error message',
- args => render({...args, errorMessage: 'Please select a valid combination of pets.', validationState: 'invalid'})
- )
- .add(
- 'with error message and error icon',
- args => render({...args, errorMessage: 'Please select a valid combination of pets.', validationState: 'invalid', showErrorIcon: true})
- )
- .add(
- 'with description, error message and validation, fixed width',
- () => renderWithDescriptionErrorMessageAndValidation()
- )
- .add(
- 'contextual help',
- args => render({
- ...args,
- contextualHelp: (
-
- What is a segment?
- Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
-
- )
- })
- )
- .add(
- 'no visible label',
- args => render({...args, label: null, 'aria-label': 'Pets'})
- )
- .add(
- 'autoFocus on one checkbox',
- args => render(args, [{}, {autoFocus: true}, {}])
- )
- .add(
- 'form name',
- args => render({...args, name: 'pets'})
- )
- .add(
- 'controlled',
- args => ;
+
+export const Default: CheckboxGroupStory = {
+ render: (args) => render(args)
+};
+
+export const DefaultValue: CheckboxGroupStory = {
+ ...Default,
+ args: {defaultValue: ['dragons']},
+ storyName: 'defaultValue: dragons'
+};
+
+export const ControlledValue: CheckboxGroupStory = {
+ ...Default,
+ args: {value: ['dragons']},
+ storyName: 'controlled: dragons'
+};
+
+export const OneCheckboxDisabled: CheckboxGroupStory = {
+ render: (args) => render(args, [{}, {isDisabled: true}, {}]),
+ storyName: 'isDisabled on one checkbox'
+};
+
+export const TwoCheckboxDisabled: CheckboxGroupStory = {
+ render: (args) => render({...args, defaultValue: ['dragons']}, [{}, {isDisabled: true}, {isDisabled: true}]),
+ storyName: 'isDisabled two checkboxes and one checked'
+};
+
+export const OneInvalidCheckbox: CheckboxGroupStory = {
+ render: (args) => render(args, [{}, {validationState: 'invalid'}, {}]),
+ storyName: 'validationState: "invalid" on one checkbox'
+};
+
+export const FixedWidth: CheckboxGroupStory = {
+ render: (args) => renderWithDescriptionErrorMessageAndValidation(args),
+ storyName: 'with description, error message and validation, fixed width'
+};
+
+export const ContextualHelpStory: CheckboxGroupStory = {
+ ...Default,
+ args: {
+ contextualHelp: (
+
+ What is a segment?
+ Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
+
+ )
+ },
+ storyName: 'contextual help'
+};
+
+export const AutoFocus: CheckboxGroupStory = {
+ render: (args) => render(args, [{}, {autoFocus: true}, {}]),
+ storyName: 'autoFocus on one checkbox'
+};
+
+export const ControlledGroup: CheckboxGroupStory = {
+ render: (args) => = {}, checkboxProps: any[] = []) {
return (
-
+
Dogs
Cats
Dragons
@@ -151,8 +169,13 @@ function render(props: Omit = {}, checkb
function ControlledCheckboxGroup(props) {
let [checked, setChecked] = useState([]);
+ let onChange = (value) => {
+ setChecked(value);
+ props?.onChange?.(value);
+ };
+
return (
-
+
Dogs
Cats
Dragons
@@ -160,14 +183,15 @@ function ControlledCheckboxGroup(props) {
);
}
-function renderWithDescriptionErrorMessageAndValidation() {
- function Example() {
+function renderWithDescriptionErrorMessageAndValidation(props) {
+ function Example(props) {
let [checked, setChecked] = useState(['dogs', 'dragons']);
let isValid = checked.length === 2 && checked.includes('dogs') && checked.includes('dragons');
return (
= {
title: 'ColorArea',
- component: ColorArea
+ component: ColorArea,
+ argTypes: {
+ xChannel: {
+ table: {
+ disable: true
+ }
+ },
+ yChannel: {
+ table: {
+ disable: true
+ }
+ },
+ onChange: {
+ table: {
+ disable: true
+ }
+ },
+ onChangeEnd: {
+ table: {
+ disable: true
+ }
+ }
+ }
};
export default meta;
diff --git a/packages/@react-spectrum/color/stories/ColorField.stories.tsx b/packages/@react-spectrum/color/stories/ColorField.stories.tsx
index aad3cf4afc1..dba65d0a8a0 100644
--- a/packages/@react-spectrum/color/stories/ColorField.stories.tsx
+++ b/packages/@react-spectrum/color/stories/ColorField.stories.tsx
@@ -13,124 +13,133 @@
import {action} from '@storybook/addon-actions';
import {Color, SpectrumColorFieldProps} from '@react-types/color';
import {ColorField} from '../';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {Content} from '@react-spectrum/view';
import {ContextualHelp} from '@react-spectrum/contextualhelp';
import {Flex} from '@react-spectrum/layout';
import {Heading} from '@react-spectrum/text';
import {parseColor} from '@react-stately/color';
import React, {useState} from 'react';
-import {storiesOf} from '@storybook/react';
import {useId} from '@react-aria/utils';
import {View} from '@react-spectrum/view';
import {VisuallyHidden} from '@react-aria/visually-hidden';
-storiesOf('ColorField', module)
- .add(
- 'Default',
- () => render()
- )
- .add(
- 'has default value',
- () => render({defaultValue: '#abcdef'})
- )
- .add(
- 'value',
- () => render({
- value: '#FF00AA',
- onChange: action('change')
- })
- )
- .add(
- 'isQuiet',
- () => render({isQuiet: true})
- )
- .add(
- 'isReadOnly',
- () => render({isReadOnly: true, defaultValue: '#abcdef'})
- )
- .add(
- 'isDisabled',
- () => render({isDisabled: true, defaultValue: '#abcdef'})
- )
- .add(
- 'validationState valid',
- () => render({validationState: 'valid'})
- )
- .add(
- 'validationState invalid',
- () => render({validationState: 'invalid'})
- )
- .add(
- 'required, label, optional',
- () => (
-
- {render({isRequired: 'true'})}
- {render({isRequired: 'true', necessityIndicator: 'label'})}
- {render({necessityIndicator: 'label'})}
-
- )
- )
- .add(
- 'controlled value',
- () => (
- Primary Color
- {renderNoLabel({isRequired: true, id: 'colorfield', 'aria-labelledby': 'label'})}
-
- )
- )
- .add(
- 'custom width',
- () => render({width: 'size-3000'})
- )
- .add(
- 'custom width no visible label',
- () => renderNoLabel({width: 'size-3000', isRequired: true, 'aria-label': 'Primary Color'})
- )
- .add(
- 'custom width, labelPosition=side',
- () => render({width: 'size-3000', labelPosition: 'side'})
- )
- .add(
- 'custom width, 10px for min-width',
- () => (
-
- {render({width: '10px'})}
-
- {render()}
-
-
- )
- )
- .add(
- 'contextual help',
- () => render({contextualHelp: (
+export type ColorFieldStory = ComponentStoryObj;
+
+export default {
+ title: 'ColorField',
+ component: ColorField,
+ args: {
+ onChange: action('onChange'),
+ label: 'Primary Color'
+ },
+ argTypes: {
+ onChange: {
+ table: {
+ disable: true
+ }
+ },
+ contextualHelp: {
+ table: {
+ disable: true
+ }
+ },
+ label: {
+ control: 'text'
+ },
+ 'aria-label': {
+ control: 'text'
+ },
+ isQuiet: {
+ control: 'boolean'
+ },
+ isReadOnly: {
+ control: 'boolean'
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ autoFocus: {
+ control: 'boolean'
+ },
+ isRequired: {
+ control: 'boolean'
+ },
+ necessityIndicator: {
+ control: 'select',
+ options: ['icon', 'label']
+ },
+ labelAlign: {
+ control: 'select',
+ options: ['end', 'start']
+ },
+ labelPosition: {
+ control: 'select',
+ options: ['top', 'side']
+ },
+ validationState: {
+ control: 'select',
+ options: [null, 'valid', 'invalid']
+ },
+ description: {
+ control: 'text'
+ },
+ errorMessage: {
+ control: 'text'
+ },
+ width: {
+ control: 'text'
+ }
+ }
+} as ComponentMeta;
+
+export const Default: ColorFieldStory = {
+ render: (args) => render(args)
+};
+
+export const DefaultValue: ColorFieldStory = {
+ ...Default,
+ args: {defaultValue: '#abcdef'}
+};
+
+export const ControlledValue: ColorFieldStory = {
+ render: (args) => Primary Color
+ {render({...args, id: 'colorfield', 'aria-labelledby': 'label'})}
+
+ ),
+ storyName: 'aria-labelledy'
+};
+
+export const MinWidth: ColorFieldStory = {
+ render: (args) => (
+
+ {render({...args, width: '10px'})}
+
+ {render(args)}
+
+
+ ),
+ storyName: 'custom width, 10px for min-width'
+};
+
+export const ContextualHelpStory: ColorFieldStory = {
+ ...Default,
+ args: {
+ contextualHelp: (
What is a segment?
Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
- )})
- );
+ )
+ },
+ storyName: 'contextual help'
+};
function ControlledColorField(props: SpectrumColorFieldProps) {
let [color, setColor] = useState(props.value);
@@ -160,15 +169,6 @@ function ControlledColorField(props: SpectrumColorFieldProps) {
function render(props: any = {}) {
return (
- ;
+
+export default {
+ title: 'ColorSlider',
+ component: ColorSlider,
+ args: {
+ onChange: action('onChange'),
+ onChangeEnd: action('onChangeEnd')
+ },
+ argTypes: {
+ onChange: {
+ table: {
+ disable: true
+ }
},
- argTypes: {
- label: {
- control: {
- type: 'text'
- }
+ onChangeEnd: {
+ table: {
+ disable: true
}
+ },
+ contextualHelp: {
+ table: {
+ disable: true
+ }
+ },
+ channel: {
+ table: {
+ disable: true
+ }
+ },
+ label: {
+ control: 'text'
+ },
+ 'aria-label': {
+ control: 'text'
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ showValueLabel: {
+ control: 'boolean'
+ },
+ orientation: {
+ control: 'select',
+ options: ['horizontal', 'vertical']
+ },
+ width: {
+ control: 'text'
+ },
+ height: {
+ control: 'text'
}
- })
- .add(
- 'default',
- args =>
- What is a segment?
- Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
-
- )} />
+ }
+} as ComponentMeta;
+
+export const Default: ColorSliderStory = {
+ args: {defaultValue: '#800000', channel: 'red'},
+ render: (args) =>
+ What is a segment?
+ Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
+
)
- )
- .add(
- 'rgba',
- args => {
- let [color, setColor] = useState(parseColor('#ff00ff'));
- return (
-
-
-
-
-
- {color.toString('hexa')}
-
+ },
+ storyName: 'contextual help'
+};
+
+export const RGBA: ColorSliderStory = {
+ render: (args) =>
+
+
+
-
);
- }
- )
- .add(
- 'hsla',
- args => {
- let [color, setColor] = useState(parseColor('hsla(0, 100%, 50%, 0.5)'));
- return (
-
-
-
-
-
-
+
+
+ {color.toString('hexa')}
-
+
+
+
-
);
- }
+
+
+
+
+
;
+
+export default {
+ title: 'ColorThumb',
+ component: ColorThumb,
+ argTypes: {
+ value: {
+ table: {
+ disable: true
+ }
+ },
+ isFocused: {
+ control: 'boolean'
+ },
+ isDragging: {
+ control: 'boolean'
+ },
+ isDisabled: {
+ control: 'boolean'
+ }
+ }
+} as ComponentMeta;
+
+export const Default: ColorThumbStory = {
+ args: {value: parseColor('#f00')},
+ render: (args) =>
-
- setSize('size-2400')}>size-2400
- setSize('size-5000')}>size-5000
- setSize('50vh')}>50vh
-
- );
- }
- )
- .add(
- 'controlled',
- () => {
- let [color, setColor] = useState(parseColor('hsl(0, 100%, 50%)'));
- let colorCSS = color?.toString('css');
- return (
-
- );
+export type ColorWheelStory = ComponentStoryObj;
+
+export default {
+ title: 'ColorWheel',
+ component: ColorWheel,
+ excludeStories: ['ControlledHSL'],
+ args: {
+ onChange: action('onChange'),
+ onChangeEnd: action('onChangeEnd')
+ },
+ argTypes: {
+ onChange: {
+ table: {
+ disable: true
+ }
+ },
+ onChangeEnd: {
+ table: {
+ disable: true
+ }
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ size: {
+ control: 'text'
}
+ }
+} as ComponentMeta;
+
+export const Default: ColorWheelStory = {
+ args: {defaultValue: 'hsl(0, 100%, 50%)'},
+ render: (args) =>
+
)
- .add(
- 'controlled hsl',
- () => ;
+
+export default {
+ title: 'ComboBox',
+ component: ComboBox,
+ args: {
+ label: 'Combobox',
+ onOpenChange: action('onOpenChange'),
+ onInputChange: action('onInputChange'),
+ onSelectionChange: action('onSelectionChange'),
+ onBlur: action('onBlur'),
+ onFocus: action('onFocus')
+ },
+ argTypes: {
+ defaultItems: {
+ table: {
+ disable: true
+ }
+ },
+ contextualHelp: {
+ table: {
+ disable: true
+ }
+ },
+ onOpenChange: {
+ table: {
+ disable: true
+ }
+ },
+ disabledKeys: {
+ table: {
+ disable: true
+ }
+ },
+ inputValue: {
+ table: {
+ disable: true
+ }
+ },
+ defaultInputValue: {
+ table: {
+ disable: true
+ }
+ },
+ defaultSelectedKey: {
+ table: {
+ disable: true
+ }
+ },
+ selectedKey: {
+ table: {
+ disable: true
+ }
+ },
+ onInputChange: {
+ table: {
+ disable: true
+ }
+ },
+ onSelectionChange: {
+ table: {
+ disable: true
+ }
+ },
+ onBlur: {
+ table: {
+ disable: true
+ }
+ },
+ onFocus: {
+ table: {
+ disable: true
+ }
+ },
+ label: {
+ control: 'text'
+ },
+ 'aria-label': {
+ control: 'text'
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ isQuiet: {
+ control: 'boolean'
+ },
+ isReadOnly: {
+ control: 'boolean'
+ },
+ autoFocus: {
+ control: 'boolean'
+ },
+ isRequired: {
+ control: 'boolean'
+ },
+ necessityIndicator: {
+ control: 'select',
+ options: ['icon', 'label']
+ },
+ labelAlign: {
+ control: 'select',
+ options: ['end', 'start']
+ },
+ labelPosition: {
+ control: 'select',
+ options: ['top', 'side']
+ },
+ validationState: {
+ control: 'select',
+ options: [null, 'valid', 'invalid']
+ },
+ description: {
+ control: 'text'
+ },
+ errorMessage: {
+ control: 'text'
+ },
+ menuTrigger: {
+ control: 'select',
+ options: ['focus', 'manual']
+ },
+ direction: {
+ control: 'select',
+ options: ['top', 'bottom']
+ },
+ allowsCustomValue: {
+ control: 'boolean'
+ },
+ width: {
+ control: 'text'
+ }
+ }
+} as ComponentMeta;
+
+export const Default: ComboBoxStory = {
+ render: (args) => render(args),
+ storyName: 'static items'
};
-storiesOf('ComboBox', module)
- .add(
- 'static items',
- () => render({})
- )
- .add(
- 'dynamic items',
- () => (
-
- {(item) => - {item.name}
}
-
- )
- )
- .add(
- 'no items',
- () => (
-
- {(item: any) => - {item.name}
}
-
- )
- )
- .add(
- 'with mapped items (defaultItem and items undef)',
- () => (
-
- {(item) => (
-
- {(item) => - {item.name}
}
-
- )}
-
- )
- )
- .add(
- 'with many sections',
- () => (
-
- {(item) => (
-
- {(item: any) => - {item.name}
}
-
- )}
-
- )
+export const Dynamic: ComboBoxStory = {
+ args: {defaultItems: items},
+ render: (args) => (
+
+ {(item: any) => - {item.name}
}
+
+ ),
+ storyName: 'dynamic items'
+};
+
+export const NoItems: ComboBoxStory = {
+ ...Dynamic,
+ args: {defaultItems: []},
+ storyName: 'no items'
+};
+
+export const MappedItems: ComboBoxStory = {
+ args: {defaultSelectedKey: '2'},
+ render: (args) =>
+ {(item: any) => (
+
+ {(item: any) => - {item.name}
}
+
+ )}
+
+ ),
+ storyName: 'with sections'
+};
+
+export const ManySections: ComboBoxStory = {
+ ...Sections,
+ args: {defaultItems: lotsOfSections},
+ storyName: 'with many sections'
+};
+
+export const ComplexItems: ComboBoxStory = {
+ args: {label: 'Select action'},
+ render: (args) => (
+
+ -
+
Add to queue
+ Add to current watch queue.
+
+ -
+
Add review
+ Post a review for the episode.
+
+ -
+
Subscribe to series
+
+ Add series to your subscription list and be notified when a new episode
+ airs.
+
+
+ -
+
Report
+ Report an issue/violation.
+
+
)
- .add(
- 'complex items',
- () => (
-
- -
-
Add to queue
- Add to current watch queue.
-
- -
-
Add review
- Post a review for the episode.
-
- -
-
Subscribe to series
-
- Add series to your subscription list and be notified when a new episode
- airs.
-
-
- -
-
Report
- Report an issue/violation.
+};
+
+export const UserProvidedLabel: ComboBoxStory = {
+ args: {label: 'Select action'},
+ render: (args) => (
+
+ Combobox
+
+ - Item One
+ -
+
Item Two
+ - Item Three
- )
- )
- .add(
- 'user provided id and label',
- () => (
-
- Combobox
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- )
- )
- .add(
- 'menuTrigger: focus',
- () => render({menuTrigger: 'focus'})
- )
- .add(
- 'menuTrigger: manual',
- () => (
-
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- )
- )
- .add(
- 'disabled keys',
- () => (
-
- {(item) => (
-
- {(item) => - {item.name}
}
-
- )}
-
- )
- )
- .add(
- 'isQuiet',
- () => render({isQuiet: true})
- )
- .add(
- 'isDisabled',
- () => render({isDisabled: true})
- )
- .add(
- 'isDisabled, isQuiet',
- () => render({isDisabled: true, isQuiet: true})
- )
- .add(
- 'isReadOnly',
- () => render({isReadOnly: true, defaultSelectedKey: 'two'})
- )
- .add(
- 'labelPosition: top, labelAlign: end',
- () => render({labelAlign: 'end'})
- )
- .add(
- 'labelPosition: side',
- () => render({labelPosition: 'side'})
- )
- .add(
- 'no visible label',
- () => (
-
- {(item: any) => - {item.name}
}
-
- )
- )
- .add(
- 'no visible label, isQuiet',
- () => (
-
- {(item: any) => - {item.name}
}
-
- )
- )
- .add(
- 'with descrption, labelAlign: end',
- () => render({description: 'Please select your spirit animal.', labelAlign: 'end'})
+
)
- .add(
- 'with error message, labelPosition: side',
- () => render({errorMessage: 'You did not select a valid spirit animal.', validationState: 'invalid', labelPosition: 'side'})
+};
+
+export const DisabledKeys: ComboBoxStory = {
+ args: {defaultItems: withSection, label: 'Combobox', disabledKeys: ['Snake', 'Ross']},
+ render: (args) => (
+
+ {(item: any) => (
+
+ {(item: any) => - {item.name}
}
+
+ )}
+
)
- .add(
- 'contextual help',
- () => render({contextualHelp: (
+};
+
+export const ContextualHelpStory: ComboBoxStory = {
+ ...Default,
+ args: {
+ ...Default.args,
+ contextualHelp: (
What is a segment?
Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
- )})
- )
- .add(
- 'isRequired',
- () => render({isRequired: true})
- )
- .add(
- 'isRequired, necessityIndicator: label',
- () => render({isRequired: true, necessityIndicator: 'label'})
- )
- .add(
- 'validationState: invalid',
- () => render({validationState: 'invalid', defaultSelectedKey: 'two'})
- )
- .add(
- 'validationState: valid',
- () => render({validationState: 'valid', defaultSelectedKey: 'two'})
- )
- .add(
- 'validationState: invalid, isQuiet',
- () => render({validationState: 'invalid', isQuiet: true, defaultSelectedKey: 'two'})
- )
- .add(
- 'validationState: valid, isQuiet',
- () => render({validationState: 'valid', isQuiet: true, defaultSelectedKey: 'two'})
- )
- .add(
- 'autoFocus: true',
- () => render({autoFocus: true})
- )
- .add(
- 'direction: top',
- () => render({direction: 'top'})
- )
- .add(
- 'allowsCustomValue: true',
- () => (
-
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- )
- )
- .add(
- 'no visible label, customWidth',
- () => (
-
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- )
- )
- .add(
- 'resize',
- () =>
-
- - Item One
- -
-
Item Two
-
- - Item Three
-
-
- )
- )
- .add(
- 'inputValue (controlled)',
- () => (
-
-
- {(item) => - {item.name}
}
-
-
- {(item) => - {item.name}
}
-
-
- )
- )
- .add(
- 'within a dialog',
- () =>
- Shows the different states from spectrum
- {renderRow({placeholder: 'Type here...'})}
- {renderRow()}
- {renderRow({labelPosition: 'side'})}
- {renderRow({isQuiet: true, placeholder: 'Type here...'})}
- {renderRow({isQuiet: true})}
- {renderRow({isRequired: true})}
- {renderRow({isRequired: true, isQuiet: true})}
- {renderRow({validationState: 'invalid'})}
- {renderRow({validationState: 'invalid', isQuiet: true})}
-
- )
- );
+ },
+ storyName: 'contextual help'
+};
+
+export const Resize: ComboBoxStory = {
+ render: (args) =>
+ {render(args)}
+
+ ),
+ storyName: 'in small div'
+};
+
+export const ControlledInputValueStory: ComboBoxStory = {
+ args: {inputValue: 'Snake', disabledKeys: ['2', '6']},
+ render: (args) =>
+ Shows the different states from spectrum
+ {renderRow({placeholder: 'Type here...'})}
+ {renderRow()}
+ {renderRow({labelPosition: 'side'})}
+ {renderRow({isQuiet: true, placeholder: 'Type here...'})}
+ {renderRow({isQuiet: true})}
+ {renderRow({isRequired: true})}
+ {renderRow({isRequired: true, isQuiet: true})}
+ {renderRow({validationState: 'invalid'})}
+ {renderRow({validationState: 'invalid', isQuiet: true})}
+
+ )
+};
function LoadingExamples(props) {
return (
@@ -531,7 +448,7 @@ function LoadingExamples(props) {
);
}
-function ListDataExample() {
+function ListDataExample(props) {
let {contains} = useFilter({sensitivity: 'base'});
let list = useListData({
initialItems: items,
@@ -546,6 +463,7 @@ function ListDataExample() {
return (
{
if (reason === 'manual' && open) {
setShowAll(true);
@@ -558,20 +476,21 @@ function ListDataExample() {
setShowAll(false);
list.setFilterText(value);
}}>
- {item => - {item.name}
}
+ {(item: any) => - {item.name}
}
- {item => - {item.name}
}
+ {(item: any) => - {item.name}
}
);
}
-function AsyncLoadingExample() {
+function AsyncLoadingExample(props) {
interface StarWarsChar {
name: string,
url: string
@@ -598,18 +517,18 @@ function AsyncLoadingExample() {
return (
- {item => - {item.name}
}
+ onLoadMore={chain(props?.onLoadMore, list.loadMore)}>
+ {(item: any) => - {item.name}
}
);
}
-function AsyncLoadingExampleControlledKey() {
+function AsyncLoadingExampleControlledKey(props) {
interface StarWarsChar {
name: string,
url: string
@@ -653,20 +572,20 @@ function AsyncLoadingExampleControlledKey() {
return (
- {item => - {item.name}
}
+ onLoadMore={list.loadMore}>
+ {(item: any) => - {item.name}
}
);
}
-function AsyncLoadingExampleControlledKeyWithReset() {
+function AsyncLoadingExampleControlledKeyWithReset(props) {
interface StarWarsChar {
name: string,
url: string
@@ -720,17 +639,17 @@ function AsyncLoadingExampleControlledKeyWithReset() {
let selectedKey = (list.selectedKeys as Set).values().next().value;
return (
isFocused.current = focus}
label="Star Wars Character Lookup"
+ {...props}
+ onFocusChange={(focus) => isFocused.current = focus}
selectedKey={selectedKey}
onSelectionChange={onSelectionChange}
items={list.items}
inputValue={list.filterText}
onInputChange={onInputChange}
loadingState={list.loadingState}
- onLoadMore={list.loadMore}
- onOpenChange={action('onOpenChange')}>
- {item => - {item.name}
}
+ onLoadMore={list.loadMore}>
+ {(item: any) => - {item.name}
}
);
}
@@ -749,8 +668,8 @@ let CustomFilterComboBox = (props) => {
return (
@@ -810,10 +729,10 @@ function AllControlledComboBox(props) {
Clear key
-
- {item => (
+
+ {(item: any) => (
- {item => - {item.value.name}
}
+ {(item: any) => - {item.value.name}
}
)}
@@ -850,7 +769,7 @@ let ControlledKeyComboBox = (props) => {
Clear key
-
+
{(item: any) => (
{(item: any) => - {item.name}
}
@@ -882,30 +801,7 @@ let ControlledValueComboBox = (props) => {
Clear field
-
- {(item: any) => (
-
- {(item: any) => - {item.name}
}
-
- )}
-
-
- );
-};
-
-let CustomValueComboBox = (props) => {
- let [selectedKey, setSelectedKey] = React.useState(props.selectedKey);
-
- let onSelectionChange = (key) => {
- setSelectedKey(key);
- };
-
- actions['onKeyDown'] = action('onKeyDown');
-
- return (
-
-
Selected Key: {selectedKey}
-
+
{(item: any) => (
{(item: any) => - {item.name}
}
@@ -916,13 +812,13 @@ let CustomValueComboBox = (props) => {
);
};
-function ResizeCombobox() {
+function ResizeCombobox(props) {
let [size, setSize] = useState(true);
return (
-
+
- Item One
-
+
- Item One
-
-
+
- Option 1
-
- Option 3
-
+
- Option 1
-
Press to change items
-
+
{items.map((item) => (
-
{item.name}
@@ -1024,6 +920,7 @@ function ComboBoxWithinDialog(props) {
- {(item) => (
+ {(item: any) => (
- {(item) => - {item.name}
}
+ {(item: any) => - {item.name}
}
)}
diff --git a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx
index 9b86e18382b..0940ee58f2c 100644
--- a/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx
+++ b/packages/@react-spectrum/contextualhelp/stories/ContextualHelp.stories.tsx
@@ -25,7 +25,6 @@ export default {
},
placement: {
control: 'select',
- defaultValue: 'bottom',
options: [
'bottom', 'bottom left', 'bottom right', 'bottom start', 'bottom end',
'top', 'top left', 'top right', 'top start', 'top end',
@@ -42,25 +41,21 @@ export default {
},
offset: {
control: 'number',
- defaultValue: 0,
min: -500,
max: 500
},
crossOffset: {
control: 'number',
- defaultValue: 0,
min: -500,
max: 500
},
containerPadding: {
control: 'number',
- defaultValue: 0,
min: -500,
max: 500
},
shouldFlip: {
- control: 'boolean',
- defaultValue: true
+ control: 'boolean'
},
children: {
table: {disable: true}
diff --git a/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx b/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
index e71a858b4b0..502c17b181e 100644
--- a/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
+++ b/packages/@react-spectrum/datepicker/stories/DateField.stories.tsx
@@ -12,6 +12,7 @@
import {action} from '@storybook/addon-actions';
import {CalendarDate, CalendarDateTime, parseAbsolute, parseAbsoluteToLocal, parseDate, parseDateTime, parseZonedDateTime, toZoned} from '@internationalized/date';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
import {Content} from '@react-spectrum/view';
import {ContextualHelp} from '@react-spectrum/contextualhelp';
import {DateField} from '../';
@@ -20,189 +21,230 @@ import {Heading} from '@react-spectrum/text';
import {Item, Picker, Section} from '@react-spectrum/picker';
import {Provider} from '@react-spectrum/provider';
import React from 'react';
-import {storiesOf} from '@storybook/react';
import {useLocale} from '@react-aria/i18n';
+
+export type DateFieldStory = ComponentStoryObj;
const BlockDecorator = storyFn => {storyFn()}
;
-storiesOf('Date and Time/DateField', module)
- .addDecorator(BlockDecorator)
- .add(
- 'default',
- () => render()
- )
- .add(
- 'defaultValue',
- () => render({defaultValue: parseDate('2020-02-03')})
- )
- .add(
- 'controlled value',
- () => render({value: new CalendarDate(2020, 2, 3)})
- )
- .add(
- 'defaultValue, zoned',
- () => render({defaultValue: toZoned(parseDate('2020-02-03'), 'America/Los_Angeles')})
- )
- .add(
- 'granularity: minute',
- () => render({granularity: 'minute'})
- )
- .add(
- 'granularity: second',
- () => render({granularity: 'second'})
- )
- .add(
- 'hourCycle: 12',
- () => render({granularity: 'minute', hourCycle: 12})
- )
- .add(
- 'hourCycle: 24',
- () => render({granularity: 'minute', hourCycle: 24})
- )
- .add(
- 'granularity: minute, defaultValue',
- () => render({granularity: 'minute', defaultValue: parseDateTime('2021-03-14T08:45')})
- )
- .add(
- 'granularity: minute, defaultValue, zoned',
- () => render({granularity: 'minute', defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]')})
- )
- .add('granularity: minute, defaultValue, zoned, absolute',
- () => render({granularity: 'minute', defaultValue: parseAbsoluteToLocal('2021-11-07T07:45:00Z')})
- )
- .add('granularity: minute, defaultValue, zoned, absolute, timeZone',
- () => render({granularity: 'minute', defaultValue: parseAbsolute('2021-11-07T07:45:00Z', 'America/New_York')})
- )
- .add(
- 'defaultValue with time, granularity: day',
- () => render({granularity: 'day', defaultValue: parseDateTime('2021-03-14T08:45')})
- )
- .add(
- 'hideTimeZone',
- () => render({granularity: 'minute', defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]'), hideTimeZone: true})
- )
- .add(
- 'isDisabled',
- () => render({isDisabled: true, value: new CalendarDate(2020, 2, 3)})
- )
- .add(
- 'isQuiet, isDisabled',
- () => render({isQuiet: true, isDisabled: true, value: new CalendarDate(2020, 2, 3)})
- )
- .add(
- 'isReadOnly',
- () => render({isReadOnly: true, value: new CalendarDate(2020, 2, 3)})
- )
- .add(
- 'autoFocus',
- () => render({autoFocus: true})
- )
- .add(
- 'validationState: invalid',
- () => render({validationState: 'invalid', value: new CalendarDate(2020, 2, 3)})
- )
- .add(
- 'validationState: valid',
- () => render({validationState: 'valid', value: new CalendarDate(2020, 2, 3)})
- )
- .add(
- 'minValue: 2010/1/1, maxValue: 2020/1/1',
- () => render({minValue: new CalendarDate(2010, 0, 1), maxValue: new CalendarDate(2020, 0, 1)})
- )
- .add(
- 'placeholderValue: 1980/1/1',
- () => render({placeholderValue: new CalendarDate(1980, 1, 1)})
- )
- .add(
- 'placeholderValue: 1980/1/1 8 AM',
- () => render({placeholderValue: new CalendarDateTime(1980, 1, 1, 8)})
- )
- .add(
- 'placeholderValue: 1980/1/1, zoned',
- () => render({placeholderValue: toZoned(new CalendarDate(1980, 1, 1), 'America/Los_Angeles')})
- )
- .add(
- 'showFormatHelpText',
- () => render({showFormatHelpText: true})
- )
- .add(
- 'all the events',
- () => render({onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp'), onOpenChange: action('onOpenChange')})
- );
+export default {
+ title: 'Date and Time/DateField',
+ component: DateField,
+ decorators: [storyFn => BlockDecorator(storyFn)],
+ args: {
+ onChange: action('onChange')
+ },
+ argTypes: {
+ onChange: {
+ table: {
+ disable: true
+ }
+ },
+ defaultValue: {
+ table: {
+ disable: true
+ }
+ },
+ value: {
+ table: {
+ disable: true
+ }
+ },
+ minValue: {
+ table: {
+ disable: true
+ }
+ },
+ maxValue: {
+ table: {
+ disable: true
+ }
+ },
+ placeholderValue: {
+ table: {
+ disable: true
+ }
+ },
+ onBlur: {
+ table: {
+ disable: true
+ }
+ },
+ onFocus: {
+ table: {
+ disable: true
+ }
+ },
+ onFocusChange: {
+ table: {
+ disable: true
+ }
+ },
+ onKeyDown: {
+ table: {
+ disable: true
+ }
+ },
+ onKeyUp: {
+ table: {
+ disable: true
+ }
+ },
+ contextualHelp: {
+ table: {
+ disable: true
+ }
+ },
+ label: {
+ control: 'text'
+ },
+ granularity: {
+ control: 'select',
+ options: ['day', 'hour', 'minute', 'second']
+ },
+ hourCycle: {
+ control: 'select',
+ options: [12, 24]
+ },
+ hideTimeZone: {
+ control: 'boolean'
+ },
+ isDisabled: {
+ control: 'boolean'
+ },
+ isQuiet: {
+ control: 'boolean'
+ },
+ isReadOnly: {
+ control: 'boolean'
+ },
+ isRequired: {
+ control: 'boolean'
+ },
+ necessityIndicator: {
+ control: 'select',
+ options: ['icon', 'label']
+ },
+ validationState: {
+ control: 'select',
+ options: [null, 'valid', 'invalid']
+ },
+ description: {
+ control: 'text'
+ },
+ errorMessage: {
+ control: 'text'
+ },
+ labelAlign: {
+ control: 'select',
+ options: ['end', 'start']
+ },
+ labelPosition: {
+ control: 'select',
+ options: ['top', 'side']
+ },
+ autoFocus: {
+ control: 'boolean'
+ },
+ showFormatHelpText: {
+ control: 'boolean'
+ },
+ 'aria-label': {
+ control: 'text'
+ },
+ width: {
+ control: 'text'
+ }
+ }
+} as ComponentMeta;
+
+export const Default: DateFieldStory = {
+ render: (args) => render(args)
+};
+
+export const DefaultValue: DateFieldStory = {
+ ...Default,
+ args: {defaultValue: parseDate('2020-02-03')}
+};
+
+export const ControlledValue: DateFieldStory = {
+ ...Default,
+ args: {value: new CalendarDate(2020, 2, 3)}
+};
+
+export const DefaultValueZoned: DateFieldStory = {
+ ...Default,
+ args: {defaultValue: toZoned(parseDate('2020-02-03'), 'America/Los_Angeles')},
+ storyName: 'defaultValue date, zoned'
+};
+
+export const DateTimeValue: DateFieldStory = {
+ ...Default,
+ args: {defaultValue: parseDateTime('2021-03-14T08:45')}
+};
+
+export const DateTimeValueZoned: DateFieldStory = {
+ ...Default,
+ args: {defaultValue: parseZonedDateTime('2021-11-07T00:45-07:00[America/Los_Angeles]')}
+};
-storiesOf('Date and Time/DateField/styling', module)
- .addDecorator(BlockDecorator)
- .add(
- 'isQuiet',
- () => render({isQuiet: true})
- )
- .add(
- 'labelPosition: side',
- () => render({labelPosition: 'side'})
- )
- .add(
- 'labelAlign: end',
- () => render({labelPosition: 'top', labelAlign: 'end'})
- )
- .add(
- 'required',
- () => render({isRequired: true})
- )
- .add(
- 'required with label',
- () => render({isRequired: true, necessityIndicator: 'label'})
- )
- .add(
- 'optional',
- () => render({necessityIndicator: 'label'})
- )
- .add(
- 'no visible label',
- () => render({'aria-label': 'Date', label: null})
- )
- .add(
- 'quiet no visible label',
- () => render({isQuiet: true, 'aria-label': 'Date', label: null})
- )
- .add(
- 'custom width',
- () => render({width: 'size-3000'})
- )
- .add(
- 'quiet custom width',
- () => render({isQuiet: true, width: 'size-3000'})
- )
- .add(
- 'custom width no visible label',
- () => render({width: 'size-3000', label: null, 'aria-label': 'Date'})
- )
- .add(
- 'custom width, labelPosition=side',
- () => render({width: 'size-3000', labelPosition: 'side'})
- )
- .add(
- 'description',
- () => render({description: 'Help text'})
- )
- .add(
- 'errorMessage',
- () => render({errorMessage: 'Enter a date after today', validationState: 'invalid'})
- )
- .add(
- 'contextual help',
- () => render({contextualHelp: (
+export const DateTimeValueAbsolute: DateFieldStory = {
+ ...Default,
+ args: {defaultValue: parseAbsoluteToLocal('2021-11-07T07:45:00Z')}
+};
+
+export const DateTimeValueAbsoluteZoned: DateFieldStory = {
+ ...Default,
+ args: {defaultValue: parseAbsolute('2021-11-07T07:45:00Z', 'America/New_York')}
+};
+
+export const MinMaxValue: DateFieldStory = {
+ ...Default,
+ args: {minValue: new CalendarDate(2010, 0, 1), maxValue: new CalendarDate(2020, 0, 1)},
+ storyName: 'minValue: 2010/1/1, maxValue: 2020/1/1'
+};
+
+export const PlaceholderVal: DateFieldStory = {
+ ...Default,
+ args: {placeholderValue: new CalendarDate(1980, 1, 1)},
+ storyName: 'placeholder value: 1980/1/1'
+};
+
+export const PlaceholderValTime: DateFieldStory = {
+ ...Default,
+ args: {placeholderValue: new CalendarDateTime(1980, 1, 1, 8)},
+ storyName: 'placeholder value: 1980/1/1 8AM'
+};
+
+export const PlaceholderValTimeZoned: DateFieldStory = {
+ ...Default,
+ args: {placeholderValue: toZoned(new CalendarDate(1980, 1, 1), 'America/Los_Angeles')},
+ storyName: 'placeholder value: 1980/1/1 zoned'
+};
+
+export const AllEvents: DateFieldStory = {
+ ...Default,
+ args: {onBlur: action('onBlur'), onFocus: action('onFocus'), onFocusChange: action('onFocusChange'), onKeyDown: action('onKeyDown'), onKeyUp: action('onKeyUp')},
+ storyName: 'all the events'
+};
+
+export const ContextualHelpStory: DateFieldStory = {
+ ...Default,
+ args: {
+ contextualHelp: (
What is a segment?
Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
- )})
- );
+ )
+ },
+ storyName: 'contextual help'
+};
function render(props = {}) {
return (
;
const BlockDecorator = storyFn => {storyFn()}
;
-storiesOf('Date and Time/DatePicker', module)
- .addDecorator(BlockDecorator)
- .add(
- 'default',
- () => render()
- )
- .add(
- 'defaultValue',
- () => render({defaultValue: parseDate('2020-02-03')})
- )
- .add(
- 'controlled value',
- () => ;
+
+export const Default: DatePickerStory = {
+ render: (args) => render(args)
+};
+
+export const DefaultValue: DatePickerStory = {
+ ...Default,
+ args: {defaultValue: parseDate('2020-02-03')}
+};
+
+export const ControlledValue: DatePickerStory = {
+ args: {value: new CalendarDate(2020, 2, 3)},
+ render: (args) =>
What is a segment?
Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.
- )})
- )
- .add(
- 'shouldFlip: false',
- () => render({shouldFlip: false})
- );
+ )
+ },
+ storyName: 'contextual help'
+};
function render(props = {}) {
return (
- setValue(new CalendarDate(2020, 2, 3))}>Change value
setValue(null)}>Clear
diff --git a/packages/@react-spectrum/label/stories/Label.stories.tsx b/packages/@react-spectrum/label/stories/Label.stories.tsx
index cbd318b371a..4854b8c529c 100644
--- a/packages/@react-spectrum/label/stories/Label.stories.tsx
+++ b/packages/@react-spectrum/label/stories/Label.stories.tsx
@@ -19,22 +19,18 @@ type LabelStory = ComponentStoryObj;
const argTypes = {
labelAlign: {
control: 'radio',
- defaultValue: 'start',
options: ['end', 'start']
},
labelPosition: {
control: 'radio',
- defaultValue: 'top',
options: ['side', 'top']
},
necessityIndicator: {
control: 'radio',
- defaultValue: 'icon',
options: ['icon', 'label']
},
isRequired: {
- control: 'boolean',
- defaultValue: false
+ control: 'boolean'
},
htmlFor: {control: {disable: true}}
};
diff --git a/packages/@react-spectrum/picker/stories/Picker.stories.tsx b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
index ec30826419c..1e91bf53666 100644
--- a/packages/@react-spectrum/picker/stories/Picker.stories.tsx
+++ b/packages/@react-spectrum/picker/stories/Picker.stories.tsx
@@ -112,27 +112,22 @@ export default {
control: 'text'
},
isDisabled: {
- control: 'boolean',
- defaultValue: false
+ control: 'boolean'
},
labelAlign: {
control: 'radio',
- defaultValue: 'start',
options: ['end', 'start']
},
labelPosition: {
control: 'radio',
- defaultValue: 'top',
options: ['side', 'top']
},
necessityIndicator: {
control: 'radio',
- defaultValue: 'icon',
options: ['icon', 'label']
},
isRequired: {
- control: 'boolean',
- defaultValue: false
+ control: 'boolean'
},
validationState: {
control: {
@@ -141,8 +136,7 @@ export default {
}
},
isQuiet: {
- control: 'boolean',
- defaultValue: false
+ control: 'boolean'
},
width: {
control: {
@@ -157,12 +151,10 @@ export default {
}
},
isLoading: {
- control: 'boolean',
- defaultValue: false
+ control: 'boolean'
},
autoFocus: {
- control: 'boolean',
- defaultValue: false
+ control: 'boolean'
},
isOpen: {
control: 'boolean'
diff --git a/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx b/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
index daf9d2884f0..d3feb84c956 100644
--- a/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
+++ b/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
@@ -18,17 +18,14 @@ type TooltipStory = ComponentStoryObj;
const argTypes = {
placement: {
control: 'radio',
- defaultValue: 'top',
options: ['top', 'bottom', 'left', 'right']
},
variant: {
control: 'radio',
- defaultValue: undefined,
options: [undefined, 'neutral', 'info', 'positive', 'negative']
},
showIcon: {
- control: 'boolean',
- defaultValue: false
+ control: 'boolean'
},
isOpen: {
control: {disable: true}
diff --git a/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx b/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx
index 29db0844629..ef58f95120e 100644
--- a/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx
+++ b/packages/@react-spectrum/tooltip/stories/TooltipTrigger.stories.tsx
@@ -37,45 +37,37 @@ type TooltipTriggerStory = ComponentStoryObj;
const argTypes = {
placement: {
control: 'select',
- defaultValue: 'bottom',
options: ['bottom', 'bottom left', 'bottom right', 'bottom start', 'bottom end', 'top', 'top left', 'top right', 'top start', 'top end', 'left', 'left top', 'left bottom', 'start', 'start top', 'start bottom', 'right', 'right top', 'right bottom', 'end', 'end top', 'end bottom']
},
delay: {
control: 'number',
- defaultValue: 1500,
min: 0,
max: 50000,
step: 500
},
offset: {
control: 'number',
- defaultValue: 0,
min: -500,
max: 500
},
crossOffset: {
control: 'number',
- defaultValue: 0,
min: -500,
max: 500
},
containerPadding: {
control: 'number',
- defaultValue: 0,
min: -500,
max: 500
},
isDisabled: {
- control: 'boolean',
- defaultValue: false
+ control: 'boolean'
},
shouldFlip: {
- control: 'boolean',
- defaultValue: true
+ control: 'boolean'
},
trigger: {
control: 'radio',
- defaultValue: undefined,
options: [undefined, 'focus']
},
children: {