Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2021-05-14 12:23:01 -03:00 committed by GitHub
parent 8983a4d371
commit 844f71486b
11 changed files with 146 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
plugins/woocommerce-admin/packages/components/CHANGELOG.md
View File

@ -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

2
plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js
View File

@ -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' ) },

2
plugins/woocommerce-admin/packages/components/src/compare-filter/index.js
View File

@ -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';

13
plugins/woocommerce-admin/packages/components/src/experimental.js Normal file
View File

@ -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;

104
plugins/woocommerce-admin/packages/components/src/list/stories/index.js
View File

@ -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.';

4
plugins/woocommerce-admin/packages/components/src/pill/pill.js
View File

@ -1,7 +1,7 @@
/**
* External dependencies
* Internal dependencies
*/
import { Text } from '@woocommerce/experimental';
import { Text } from '../experimental';
export function Pill( { children } ) {
return (

2
plugins/woocommerce-admin/packages/components/src/summary/number.js
View File

@ -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.

78
plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/index.js Normal file
View File

@ -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.';

11
plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/style.scss Normal file
View File

@ -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
plugins/woocommerce-admin/storybook/main.js
View File

@ -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: [

1
plugins/woocommerce-admin/storybook/webpack.config.js
View File

@ -18,6 +18,7 @@ const wcAdminPackages = [
'number',
'data',
'tracks',
'experimental',
];
module.exports = ( { config: storybookConfig } ) => {