- {file.name}{' '}
-
- {file.size} bytes
-
+
+
+
+
-
- ))}
-
- );
-
- const errorMessage = hasError && (
-
-
- {rejectedFiles.map((file, index) => (
-
- {`"${file.name}" is not supported. File type must be .svg.`}
-
- ))}
-
-
- );
-
- return (
-
- {errorMessage}
-
- {uploadedFiles}
-
-
- );
-}
-
-export function Nested() {
- const [files, setFiles] = useState([]);
-
- const handleDrop = useCallback((dropFiles) => {
- setFiles((files) => [...files, dropFiles]);
- }, []);
-
- const handleDropZoneClick = useCallback(() => {}, []);
-
- const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
-
- const fileUpload = !files.length &&
;
- const uploadedFiles = files.length > 0 && (
-
- {files.map((file, index) => (
-
-
+
+
- {file.name}{' '}
-
- {file.size} bytes
+
+ Medium sized Drop zone with label and hint
-
- ))}
-
- );
-
- return (
-
-
-
- {uploadedFiles}
- {fileUpload}
-
-
-
- );
-}
+
+
+
+
+
+
+
+ );
+ },
+};
-export function MediumSized() {
- return (
-
-
-
+export const SmallSized = {
+ render() {
+ return (
+
+
- Medium sized Drop zone
+ Small sized Drop zone (40px)
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
- Medium sized Drop zone with label and hint
+ Small sized Drop zone without outline
-
-
-
-
-
-
-
- );
-}
-export function SmallSized() {
- return (
-
-
-
- Small sized Drop zone (40px)
-
+
+
+
+
+
+
+
+
+ Small sized Drop zone with error
+
+ Drag file in to see error state
-
-
-
-
-
-
-
-
- Small sized Drop zone without outline
-
+
+
+
+
+
+
+
+
+ Small sized Drop zone with disabled state
+
-
-
-
-
-
-
-
-
- Small sized Drop zone with error
-
- Drag file in to see error state
-
-
-
-
-
-
+
+
+
+
+
+
-
-
- Small sized Drop zone with disabled state
-
+ );
+ },
+};
-
-
-
-
-
-
-
- );
-}
-
-export function WithCustomFileUploadText() {
- const [files, setFiles] = useState([]);
-
- const handleDropZoneDrop = useCallback(
- (_dropFiles, acceptedFiles, _rejectedFiles) =>
- setFiles((files) => [...files, ...acceptedFiles]),
- [],
- );
-
- const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
-
- const fileUpload = !files.length && (
-
- );
-
- const uploadedFiles = files.length > 0 && (
-
- {files.map((file, index) => (
-
-
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
-
- ))}
-
- );
-
- return (
-
- {uploadedFiles}
- {fileUpload}
-
- );
-}
-
-export function WithCustomFileDialogTrigger() {
- const [files, setFiles] = useState([]);
- const [openFileDialog, setOpenFileDialog] = useState(false);
-
- const handleDropZoneDrop = useCallback(
- (dropFiles, _acceptedFiles, _rejectedFiles) =>
- setFiles((files) => [...files, ...dropFiles]),
- [],
- );
- const toggleOpenFileDialog = useCallback(
- () => setOpenFileDialog((openFileDialog) => !openFileDialog),
- [],
- );
-
- const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
-
- const uploadedFiles = files.length > 0 && (
-
- {files.map((file, index) => (
-
-
-
- {file.name}{' '}
-
- {file.size} bytes
-
-
-
- ))}
-
- );
-
- return (
-
-
- {uploadedFiles}
-
-
- );
-}
+export const WithCustomFileUploadText = {
+ render() {
+ const [files, setFiles] = useState([]);
-export function Error() {
- const [files, setFiles] = useState([]);
+ const handleDropZoneDrop = useCallback(
+ (_dropFiles, acceptedFiles, _rejectedFiles) =>
+ setFiles((files) => [...files, ...acceptedFiles]),
+ [],
+ );
- const handleDropZoneDrop = useCallback(
- (_dropFiles, acceptedFiles, _rejectedFiles) =>
- setFiles((files) => [...files, ...acceptedFiles]),
- [],
- );
+ const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
- const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
+ const fileUpload = !files.length && (
+
+ );
- const fileUpload = !files.length &&
;
- const uploadedFiles = files.length > 0 && (
-
+ const uploadedFiles = files.length > 0 && (
{files.map((file, index) => (
@@ -568,34 +480,148 @@ export function Error() {
))}
-
- );
-
- return (
-
-
-
- Drop zone with error
-
- Drag file in to see error state
-
-
+ );
+
+ return (
+
{uploadedFiles}
{fileUpload}
-
- );
-}
-
-export function Disabled() {
- const handleDropZoneDrop = () => {
- // eslint-disable-next-line no-alert
- alert("this shouldn't be called");
- };
-
- return (
-
-
-
- );
-}
+ );
+ },
+};
+
+export const WithCustomFileDialogTrigger = {
+ render() {
+ const [files, setFiles] = useState([]);
+ const [openFileDialog, setOpenFileDialog] = useState(false);
+
+ const handleDropZoneDrop = useCallback(
+ (dropFiles, _acceptedFiles, _rejectedFiles) =>
+ setFiles((files) => [...files, ...dropFiles]),
+ [],
+ );
+ const toggleOpenFileDialog = useCallback(
+ () => setOpenFileDialog((openFileDialog) => !openFileDialog),
+ [],
+ );
+
+ const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
+
+ const uploadedFiles = files.length > 0 && (
+
+ {files.map((file, index) => (
+
+
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+
+ ))}
+
+ );
+
+ return (
+
+
+ {uploadedFiles}
+
+
+ );
+ },
+};
+
+export const Error = {
+ render() {
+ const [files, setFiles] = useState([]);
+
+ const handleDropZoneDrop = useCallback(
+ (_dropFiles, acceptedFiles, _rejectedFiles) =>
+ setFiles((files) => [...files, ...acceptedFiles]),
+ [],
+ );
+
+ const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
+
+ const fileUpload = !files.length &&
;
+ const uploadedFiles = files.length > 0 && (
+
+
+ {files.map((file, index) => (
+
+
+
+ {file.name}{' '}
+
+ {file.size} bytes
+
+
+
+ ))}
+
+
+ );
+
+ return (
+
+
+
+ Drop zone with error
+
+ Drag file in to see error state
+
+
+ {uploadedFiles}
+ {fileUpload}
+
+
+ );
+ },
+};
+
+export const Disabled = {
+ render() {
+ const handleDropZoneDrop = () => {
+ // eslint-disable-next-line no-alert
+ alert("this shouldn't be called");
+ };
+
+ return (
+
+
+
+ );
+ },
+};
diff --git a/polaris-react/src/components/EmptyState/EmptyState.stories.tsx b/polaris-react/src/components/EmptyState/EmptyState.stories.tsx
index d31879b9981..83ccb1b0866 100644
--- a/polaris-react/src/components/EmptyState/EmptyState.stories.tsx
+++ b/polaris-react/src/components/EmptyState/EmptyState.stories.tsx
@@ -1,34 +1,89 @@
import React from 'react';
-import type {ComponentMeta} from '@storybook/react';
+import type {Meta} from '@storybook/react';
import {LegacyCard, EmptyState, Link, Text} from '@shopify/polaris';
export default {
component: EmptyState,
-} as ComponentMeta
;
+} as Meta;
-export function Default() {
- return (
-
-
-
- Track and receive your incoming inventory from suppliers.
-
-
-
- );
-}
+export const Default = {
+ render() {
+ return (
+
+
+
+ Track and receive your incoming inventory from suppliers.
+
+
+
+ );
+ },
+};
-export function WithSubduedFooterContext() {
- return (
-
+export const WithSubduedFooterContext = {
+ render() {
+ return (
+
+
+ If you don’t want to add a transfer, you can import your inventory
+ from{' '}
+
+ settings
+
+ .
+
+ }
+ image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
+ >
+
+ Track and receive your incoming inventory from suppliers.
+
+
+
+ );
+ },
+};
+
+export const WithFullWidthLayout = {
+ render() {
+ return (
+
+
+
+ You can use the Files section to upload images, videos, and other
+ documents. This example shows the content with a centered layout and
+ full width.
+
+
+
+ );
+ },
+};
+
+export const WithoutContentContainer = {
+ render() {
+ return (
- If you don’t want to add a transfer, you can import your inventory
- from{' '}
-
- settings
-
- .
-
- }
image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
>
Track and receive your incoming inventory from suppliers.
-
- );
-}
-
-export function WithFullWidthLayout() {
- return (
-
-
-
- You can use the Files section to upload images, videos, and other
- documents. This example shows the content with a centered layout and
- full width.
-
-
-
- );
-}
-
-export function WithoutContentContainer() {
- return (
-
-
- Track and receive your incoming inventory from suppliers.
-
-
- );
-}
+ );
+ },
+};
diff --git a/polaris-react/src/components/ExceptionList/ExceptionList.stories.tsx b/polaris-react/src/components/ExceptionList/ExceptionList.stories.tsx
index e223128c373..885b6d81857 100644
--- a/polaris-react/src/components/ExceptionList/ExceptionList.stories.tsx
+++ b/polaris-react/src/components/ExceptionList/ExceptionList.stories.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import type {ComponentMeta} from '@storybook/react';
+import type {Meta} from '@storybook/react';
import {ExceptionList} from '@shopify/polaris';
import {
NoteIcon,
@@ -9,63 +9,65 @@ import {
export default {
component: ExceptionList,
-} as ComponentMeta;
+} as Meta;
-export function All() {
- return (
-
- );
-}
+export const All = {
+ render() {
+ return (
+
+ );
+ },
+};
diff --git a/polaris-react/src/components/Filters/Filters.stories.tsx b/polaris-react/src/components/Filters/Filters.stories.tsx
index b84ee9d36b4..facbdfbf363 100644
--- a/polaris-react/src/components/Filters/Filters.stories.tsx
+++ b/polaris-react/src/components/Filters/Filters.stories.tsx
@@ -1,5 +1,5 @@
import React, {useCallback, useState} from 'react';
-import type {ComponentMeta} from '@storybook/react';
+import type {Meta} from '@storybook/react';
import type {FiltersProps} from '@shopify/polaris';
import {
Avatar,
@@ -27,2019 +27,2048 @@ export default {
},
},
},
-} as ComponentMeta;
-
-export function WithAResourceList() {
- const [accountStatus, setAccountStatus] = useState(null);
- const [moneySpent, setMoneySpent] = useState(null);
- const [taggedWith, setTaggedWith] = useState('');
- const [queryValue, setQueryValue] = useState('');
-
- const handleAccountStatusChange = useCallback(
- (value) => setAccountStatus(value),
- [],
- );
- const handleMoneySpentChange = useCallback(
- (value) => setMoneySpent(value),
- [],
- );
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleFiltersQueryChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleAccountStatusRemove = useCallback(
- () => setAccountStatus(null),
- [],
- );
- const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(''), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(''), []);
- const handleFiltersClearAll = useCallback(() => {
- handleAccountStatusRemove();
- handleMoneySpentRemove();
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [
- handleAccountStatusRemove,
- handleMoneySpentRemove,
- handleQueryValueRemove,
- handleTaggedWithRemove,
- ]);
-
- const filters = [
- {
- key: 'accountStatus',
- label: 'Account status',
- filter: (
-
- ),
- shortcut: true,
- pinned: true,
- },
- {
- key: 'taggedWith',
- label: 'Tagged with',
- filter: (
-
- ),
- shortcut: true,
- pinned: true,
- },
- {
- key: 'moneySpent',
- label: 'Money spent',
- filter: (
-
- ),
- },
- ];
-
- const appliedFilters: FiltersProps['appliedFilters'] = [];
- if (!isEmpty(accountStatus)) {
- const key = 'accountStatus';
- appliedFilters.push({
- key,
- label: disambiguateLabel(key, accountStatus),
- onRemove: handleAccountStatusRemove,
- });
- }
- if (!isEmpty(moneySpent)) {
- const key = 'moneySpent';
- appliedFilters.push({
- key,
- label: disambiguateLabel(key, moneySpent),
- onRemove: handleMoneySpentRemove,
- });
- }
- if (!isEmpty(taggedWith)) {
- const key = 'taggedWith';
- appliedFilters.push({
- key,
- label: disambiguateLabel(key, taggedWith),
- onRemove: handleTaggedWithRemove,
- });
- }
-
- return (
-
-
-
- }
- flushFilters
- items={[
- {
- id: '341',
- url: '#',
- name: 'Mae Jemison',
- location: 'Decatur, USA',
- },
- {
- id: '256',
- url: '#',
- name: 'Ellen Ochoa',
- location: 'Los Angeles, USA',
- },
- ]}
- renderItem={(item) => {
- const {id, url, name, location} = item;
- const media = ;
-
- return (
-
-
- {name}
-
- {location}
-
- );
- }}
- />
-
-
+
+
+ }
+ flushFilters
+ items={[
+ {
+ id: '341',
+ url: '#',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ },
+ {
+ id: '256',
+ url: '#',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ },
+ ]}
+ renderItem={(item) => {
+ const {id, url, name, location} = item;
+ const media = ;
+
+ return (
+
+
+ {name}
+
+ {location}
+
+ );
+ }}
+ />
+
+
-
-
-
-
-
- );
-
- function disambiguateLabel(key, value) {
- switch (key) {
- case 'taggedWith':
- return `Tagged with ${value}`;
- case 'availability':
- return value.map((val) => `Available on ${val}`).join(', ');
- case 'productType':
- return value.join(', ');
- default:
- return value;
+
+ function isEmpty(value) {
+ if (Array.isArray(value)) {
+ return value.length === 0;
+ } else {
+ return value === '' || value == null;
+ }
}
- }
+ },
+};
+
+export const WithADataTable = {
+ render() {
+ const [availability, setAvailability] = useState(null);
+ const [productType, setProductType] = useState(null);
+ const [taggedWith, setTaggedWith] = useState('');
+ const [queryValue, setQueryValue] = useState('');
+
+ const handleAvailabilityChange = useCallback(
+ (value) => setAvailability(value),
+ [],
+ );
+ const handleProductTypeChange = useCallback(
+ (value) => setProductType(value),
+ [],
+ );
+ const handleTaggedWithChange = useCallback(
+ (value) => setTaggedWith(value),
+ [],
+ );
+ const handleFiltersQueryChange = useCallback(
+ (value) => setQueryValue(value),
+ [],
+ );
+ const handleAvailabilityRemove = useCallback(
+ () => setAvailability(null),
+ [],
+ );
+ const handleProductTypeRemove = useCallback(() => setProductType(null), []);
+ const handleTaggedWithRemove = useCallback(() => setTaggedWith(''), []);
+ const handleQueryValueRemove = useCallback(() => setQueryValue(''), []);
+ const handleFiltersClearAll = useCallback(() => {
+ handleAvailabilityRemove();
+ handleProductTypeRemove();
+ handleTaggedWithRemove();
+ handleQueryValueRemove();
+ }, [
+ handleAvailabilityRemove,
+ handleQueryValueRemove,
+ handleProductTypeRemove,
+ handleTaggedWithRemove,
+ ]);
+
+ const filters = [
+ {
+ key: 'availability',
+ label: 'Availability',
+ filter: (
+
+ ),
+ shortcut: true,
+ },
+ {
+ key: 'productType',
+ label: 'Product type',
+ filter: (
+
+ ),
+ },
+ {
+ key: 'taggedWith',
+ label: 'Tagged with',
+ filter: (
+
+ ),
+ },
+ ];
- function isEmpty(value) {
- if (Array.isArray(value)) {
- return value.length === 0;
- } else {
- return value === '' || value == null;
+ const appliedFilters: FiltersProps['appliedFilters'] = [];
+ if (!isEmpty(availability)) {
+ const key = 'availability';
+ appliedFilters.push({
+ key,
+ label: disambiguateLabel(key, availability),
+ onRemove: handleAvailabilityRemove,
+ });
+ }
+ if (!isEmpty(productType)) {
+ const key = 'productType';
+ appliedFilters.push({
+ key,
+ label: disambiguateLabel(key, productType),
+ onRemove: handleProductTypeRemove,
+ });
+ }
+ if (!isEmpty(taggedWith)) {
+ const key = 'taggedWith';
+ appliedFilters.push({
+ key,
+ label: disambiguateLabel(key, taggedWith),
+ onRemove: handleTaggedWithRemove,
+ });
}
- }
-}
-
-export function WithChildrenContent() {
- const [taggedWith, setTaggedWith] = useState('');
- const [queryValue, setQueryValue] = useState('');
-
- const handleTaggedWithChange = useCallback(
- (value) => setTaggedWith(value),
- [],
- );
- const handleQueryValueChange = useCallback(
- (value) => setQueryValue(value),
- [],
- );
- const handleTaggedWithRemove = useCallback(() => setTaggedWith(''), []);
- const handleQueryValueRemove = useCallback(() => setQueryValue(''), []);
-
- const handleClearAll = useCallback(() => {
- handleTaggedWithRemove();
- handleQueryValueRemove();
- }, [handleQueryValueRemove, handleTaggedWithRemove]);
-
- const filters = [
- {
- key: 'taggedWith',
- label: 'Tagged with',
- filter: (
-
- ),
- shortcut: true,
- },
- ];
- const appliedFilters = !isEmpty(taggedWith)
- ? [
- {
- key: 'taggedWith',
- label: disambiguateLabel('taggedWith', taggedWith),
- onRemove: handleTaggedWithRemove,
- },
- ]
- : [];
-
- return (
-
-
-
-
-
-
-
- }
- flushFilters
- items={[
- {
- id: '341',
- url: '#',
- name: 'Mae Jemison',
- location: 'Decatur, USA',
- },
- {
- id: '256',
- url: '#',
- name: 'Ellen Ochoa',
- location: 'Los Angeles, USA',
- },
- ]}
- renderItem={(item) => {
- const {id, url, name, location} = item;
- const media = ;
-
- return (
-
+
+
+
+
+
+
+
-
- {name}
-
- {location}
-
- );
- }}
- />
-
-
+
+
+
+ }
+ flushFilters
+ items={[
+ {
+ id: '341',
+ url: '#',
+ name: 'Mae Jemison',
+ location: 'Decatur, USA',
+ },
+ {
+ id: '256',
+ url: '#',
+ name: 'Ellen Ochoa',
+ location: 'Los Angeles, USA',
+ },
+ ]}
+ renderItem={(item) => {
+ const {id, url, name, location} = item;
+ const media = ;
+
+ return (
+
+
+ {name}
+
+ {location}
+
+ );
+ }}
+ />
+
+