Remove `woocommerce/experimental` dependency from `woocommerce/components` (https://github.com/woocommerce/woocommerce-admin/pull/6986)
* Removed the experimental dependency from the components package, and moved stories to experimental package * Add changelog * Fix typo
This commit is contained in:
louwie17
GitHub
parent
8983a4d371
commit
844f71486b
|
|
@ -10,6 +10,7 @@
|
|||
- Add `controlId` and `name` props to `<SearchListItem>`. #6871
|
||||
- Minor styling tweaks and fixes to `<SearchListcontrol>`. #6871
|
||||
- Fix `autocompleter` for custom Search in `FilterPicker` #6880
|
||||
- Remove `woocommerce/experimental` dependency. #6986
|
||||
|
||||
# 6.1.2
|
||||
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@ import {
|
|||
getQueryFromActiveFilters,
|
||||
getHistory,
|
||||
} from '@woocommerce/navigation';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Link from '../link';
|
||||
import AdvancedFilterItem from './item';
|
||||
import { Text } from '../experimental';
|
||||
|
||||
const matches = [
|
||||
{ value: 'all', label: __( 'All', 'woocommerce-admin' ) },
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
} from '@wordpress/components';
|
||||
import { isEqual, isFunction } from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
|
||||
|
||||
/**
|
||||
|
|
@ -20,6 +19,7 @@ import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
|
|||
*/
|
||||
import CompareButton from './button';
|
||||
import Search from '../search';
|
||||
import { Text } from '../experimental';
|
||||
|
||||
export { default as CompareButton } from './button';
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import {
|
||||
__experimentalText,
|
||||
Text as TextComponent,
|
||||
} from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Export experimental components within the components package to prevent a circular
|
||||
* dependency with woocommerce/experimental. Only for internal use.
|
||||
*/
|
||||
export const Text = TextComponent || __experimentalText;
|
||||
|
|
@ -4,10 +4,15 @@
|
|||
import Gridicon from 'gridicons';
|
||||
import { withConsole } from '@storybook/addon-console';
|
||||
import {
|
||||
List as ExperimentalList,
|
||||
ListItem as ExperimentalListItem,
|
||||
CollapsibleList as ExperimentalCollapsibleList,
|
||||
} from '@woocommerce/experimental';
|
||||
Title,
|
||||
Subtitle,
|
||||
Description,
|
||||
Primary,
|
||||
ArgsTable,
|
||||
Stories,
|
||||
PRIMARY_STORY,
|
||||
} from '@storybook/addon-docs/blocks';
|
||||
import { withLinks } from '@storybook/addon-links';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
|
|
@ -35,7 +40,32 @@ function logItemClick( event ) {
|
|||
export default {
|
||||
title: 'WooCommerce Admin/components/List',
|
||||
component: List,
|
||||
decorators: [ ( storyFn, context ) => withConsole()( storyFn )( context ) ],
|
||||
decorators: [
|
||||
( storyFn, context ) => withConsole()( storyFn )( context ),
|
||||
withLinks,
|
||||
],
|
||||
parameters: {
|
||||
docs: {
|
||||
page: () => (
|
||||
<>
|
||||
<Title />
|
||||
<Subtitle />
|
||||
<Description
|
||||
markdown={ `[deprecated] and will be replaced by
|
||||
<a
|
||||
data-sb-kind="woocommerce-admin-experimental-list"
|
||||
data-sb-story="default"
|
||||
>
|
||||
ExperimentalList
|
||||
</a>` }
|
||||
/>
|
||||
<Primary />
|
||||
<ArgsTable story={ PRIMARY_STORY } />
|
||||
<Stories />
|
||||
</>
|
||||
),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = () => {
|
||||
|
|
@ -146,67 +176,3 @@ export const CustomStyleAndTags = () => {
|
|||
};
|
||||
|
||||
CustomStyleAndTags.storyName = 'Custom style and tags (deprecated)';
|
||||
|
||||
export const ExperimentalListExample = () => {
|
||||
return (
|
||||
<ExperimentalList>
|
||||
<ExperimentalListItem disableGutters onClick={ () => {} }>
|
||||
<div>Without gutters no padding is added to the list item.</div>
|
||||
</ExperimentalListItem>
|
||||
<ExperimentalListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ExperimentalListItem>
|
||||
<ExperimentalListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ExperimentalListItem>
|
||||
<ExperimentalListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ExperimentalListItem>
|
||||
</ExperimentalList>
|
||||
);
|
||||
};
|
||||
|
||||
ExperimentalListExample.storyName = 'ExperimentalList / ExperimentalListItem.';
|
||||
|
||||
export const ExperimentalCollapsibleListExample = () => {
|
||||
return (
|
||||
<ExperimentalCollapsibleList
|
||||
collapseLabel="Show less"
|
||||
expandLabel="Show more items"
|
||||
show={ 2 }
|
||||
onCollapse={ () => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log( 'collapsed' );
|
||||
} }
|
||||
onExpand={ () => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log( 'expanded' );
|
||||
} }
|
||||
>
|
||||
<ExperimentalListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ExperimentalListItem>
|
||||
<ExperimentalListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ExperimentalListItem>
|
||||
<ExperimentalListItem onClick={ () => {} }>
|
||||
<div>
|
||||
Any markup can go here.
|
||||
<br />
|
||||
Bigger task item
|
||||
<br />
|
||||
Another line
|
||||
</div>
|
||||
</ExperimentalListItem>
|
||||
<ExperimentalListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ExperimentalListItem>
|
||||
<ExperimentalListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ExperimentalListItem>
|
||||
</ExperimentalCollapsibleList>
|
||||
);
|
||||
};
|
||||
|
||||
ExperimentalCollapsibleListExample.storyName =
|
||||
'ExperimentalList with ExperimentalCollapsibleListItem.';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
* External dependencies
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import { Text } from '../experimental';
|
||||
|
||||
export function Pill( { children } ) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ import classnames from 'classnames';
|
|||
import ChevronDownIcon from 'gridicons/dist/chevron-down';
|
||||
import { isNil, noop } from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import Link from '../link';
|
||||
import { Text } from '../experimental';
|
||||
|
||||
/**
|
||||
* A component to show a value, label, and optionally a change percentage and children node. Can also act as a link to a specific report focus.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { withConsole } from '@storybook/addon-console';
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { List, ListItem, CollapsibleList } from '../../';
|
||||
import './style.scss';
|
||||
|
||||
export default {
|
||||
title: 'WooCommerce Admin/experimental/List',
|
||||
component: List,
|
||||
decorators: [ ( storyFn, context ) => withConsole()( storyFn )( context ) ],
|
||||
};
|
||||
|
||||
export const Default = () => {
|
||||
return (
|
||||
<List>
|
||||
<ListItem disableGutters onClick={ () => {} }>
|
||||
<div>Without gutters no padding is added to the list item.</div>
|
||||
</ListItem>
|
||||
<ListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ListItem>
|
||||
<ListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ListItem>
|
||||
<ListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ListItem>
|
||||
</List>
|
||||
);
|
||||
};
|
||||
|
||||
Default.storyName = 'List / ListItem.';
|
||||
|
||||
export const CollapsibleListExample = () => {
|
||||
return (
|
||||
<CollapsibleList
|
||||
collapseLabel="Show less"
|
||||
expandLabel="Show more items"
|
||||
show={ 2 }
|
||||
onCollapse={ () => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log( 'collapsed' );
|
||||
} }
|
||||
onExpand={ () => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log( 'expanded' );
|
||||
} }
|
||||
>
|
||||
<ListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ListItem>
|
||||
<ListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ListItem>
|
||||
<ListItem onClick={ () => {} }>
|
||||
<div>
|
||||
Any markup can go here.
|
||||
<br />
|
||||
Bigger task item
|
||||
<br />
|
||||
Another line
|
||||
</div>
|
||||
</ListItem>
|
||||
<ListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ListItem>
|
||||
<ListItem onClick={ () => {} }>
|
||||
<div>Any markup can go here.</div>
|
||||
</ListItem>
|
||||
</CollapsibleList>
|
||||
);
|
||||
};
|
||||
|
||||
CollapsibleListExample.storyName = 'List with CollapsibleListItem.';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.storybook-custom-list {
|
||||
border: 1px solid $gray-400;
|
||||
border-radius: 2px;
|
||||
padding: 0;
|
||||
|
||||
.woocommerce-list__item {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,8 @@ module.exports = {
|
|||
stories: [
|
||||
// WooCommerce Admin / @woocommerce/components components
|
||||
'../packages/components/src/**/stories/*.js',
|
||||
// WooCommerce Admin / @woocommerce/experimental components
|
||||
'../packages/experimental/src/**/stories/*.js',
|
||||
'../client/**/stories/*.js',
|
||||
],
|
||||
addons: [
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ const wcAdminPackages = [
|
|||
'number',
|
||||
'data',
|
||||
'tracks',
|
||||
'experimental',
|
||||
];
|
||||
|
||||
module.exports = ( { config: storybookConfig } ) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue