Remove the base tabs component from blocks. It is no longer used. (#46219)
This commit is contained in:
Sam Seay
GitHub
parent
be93d94130
commit
f9c4b284ce
|
|
@ -27,4 +27,3 @@ export * from './sidebar-layout';
|
||||||
export * from './snackbar-list';
|
export * from './snackbar-list';
|
||||||
export * from './state-input';
|
export * from './state-input';
|
||||||
export * from './summary';
|
export * from './summary';
|
||||||
export * from './tabs';
|
|
||||||
|
|
|
||||||
|
|
@ -1,123 +0,0 @@
|
||||||
/**
|
|
||||||
* External dependencies
|
|
||||||
*/
|
|
||||||
import { withInstanceId } from '@wordpress/compose';
|
|
||||||
import classnames from 'classnames';
|
|
||||||
import { __ } from '@wordpress/i18n';
|
|
||||||
import { useTabState, Tab, TabList, TabPanel } from 'reakit/Tab';
|
|
||||||
/**
|
|
||||||
* Internal dependencies
|
|
||||||
*/
|
|
||||||
import './style.scss';
|
|
||||||
|
|
||||||
export interface TabsProps {
|
|
||||||
/**
|
|
||||||
* Component wrapper classname
|
|
||||||
*/
|
|
||||||
className?: string;
|
|
||||||
/**
|
|
||||||
* Event handler triggered when a tab is selected
|
|
||||||
*/
|
|
||||||
onSelect?: ( tabName: string ) => void;
|
|
||||||
/**
|
|
||||||
* Array of tab objects
|
|
||||||
*/
|
|
||||||
tabs: Array< {
|
|
||||||
name: string;
|
|
||||||
title: string;
|
|
||||||
content: JSX.Element;
|
|
||||||
ariaLabel?: string;
|
|
||||||
} >;
|
|
||||||
/**
|
|
||||||
* Classname to be applied to the active tab
|
|
||||||
*/
|
|
||||||
activeClass?: string;
|
|
||||||
/**
|
|
||||||
* Name of the tab to be selected by default
|
|
||||||
*/
|
|
||||||
initialTabName?: string | undefined;
|
|
||||||
/**
|
|
||||||
* Aria label for the tablist
|
|
||||||
*/
|
|
||||||
ariaLabel?: string;
|
|
||||||
/**
|
|
||||||
* Instance ID for the component
|
|
||||||
*/
|
|
||||||
instanceId: number;
|
|
||||||
/**
|
|
||||||
* ID for the component
|
|
||||||
*/
|
|
||||||
id?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Exporting the component for Storybook. Use the default export instead.
|
|
||||||
*/
|
|
||||||
export const __TabsWithoutInstanceId = ( {
|
|
||||||
className,
|
|
||||||
onSelect = () => null,
|
|
||||||
tabs,
|
|
||||||
activeClass = 'is-active',
|
|
||||||
initialTabName,
|
|
||||||
ariaLabel = __( 'Tabbed Content', 'woocommerce' ),
|
|
||||||
instanceId,
|
|
||||||
id,
|
|
||||||
}: TabsProps ): JSX.Element | null => {
|
|
||||||
const initialTab = initialTabName
|
|
||||||
? { selectedId: `${ instanceId }-${ initialTabName }` }
|
|
||||||
: undefined;
|
|
||||||
const tabState = useTabState( initialTab );
|
|
||||||
if ( tabs.length === 0 ) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className={ classnames( 'wc-block-components-tabs', className ) }>
|
|
||||||
<TabList
|
|
||||||
{ ...tabState }
|
|
||||||
id={ id }
|
|
||||||
className={ 'wc-block-components-tabs__list' }
|
|
||||||
aria-label={ ariaLabel }
|
|
||||||
>
|
|
||||||
{ tabs.map( ( { name, title, ariaLabel: tabAriaLabel } ) => (
|
|
||||||
<Tab
|
|
||||||
{ ...tabState }
|
|
||||||
id={ `${ instanceId }-${ name }` }
|
|
||||||
manual={ true }
|
|
||||||
className={ classnames(
|
|
||||||
'wc-block-components-tabs__item',
|
|
||||||
{
|
|
||||||
[ activeClass ]:
|
|
||||||
// reakit uses the ID as the selectedId
|
|
||||||
`${ instanceId }-${ name }` ===
|
|
||||||
tabState.selectedId,
|
|
||||||
}
|
|
||||||
) }
|
|
||||||
onClick={ () => onSelect( name ) }
|
|
||||||
type="button"
|
|
||||||
key={ name }
|
|
||||||
aria-label={ tabAriaLabel }
|
|
||||||
>
|
|
||||||
<span className="wc-block-components-tabs__item-content">
|
|
||||||
{ title }
|
|
||||||
</span>
|
|
||||||
</Tab>
|
|
||||||
) ) }
|
|
||||||
</TabList>
|
|
||||||
|
|
||||||
{ tabs.map( ( { name, content } ) => (
|
|
||||||
<TabPanel
|
|
||||||
{ ...tabState }
|
|
||||||
key={ name }
|
|
||||||
id={ `${ instanceId }-${ name }-view` }
|
|
||||||
tabId={ `${ instanceId }-${ name }` }
|
|
||||||
className="wc-block-components-tabs__content"
|
|
||||||
>
|
|
||||||
{ tabState.selectedId === `${ instanceId }-${ name }` &&
|
|
||||||
content }
|
|
||||||
</TabPanel>
|
|
||||||
) ) }
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withInstanceId( __TabsWithoutInstanceId );
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
/**
|
|
||||||
* External dependencies
|
|
||||||
*/
|
|
||||||
import type { Story, Meta } from '@storybook/react';
|
|
||||||
import { useState } from '@wordpress/element';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Internal dependencies
|
|
||||||
*/
|
|
||||||
import { __TabsWithoutInstanceId as Tabs, TabsProps } from '..';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'Base Components/Tabs',
|
|
||||||
component: Tabs,
|
|
||||||
args: {
|
|
||||||
tabs: [
|
|
||||||
{
|
|
||||||
name: 'firstTab',
|
|
||||||
title: 'First Tab',
|
|
||||||
content: <div>Content of the first tab</div>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'secondTab',
|
|
||||||
title: 'Second Tab',
|
|
||||||
content: <div>Content of the second tab</div>,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
initialTabName: 'firstTab',
|
|
||||||
},
|
|
||||||
argTypes: {
|
|
||||||
initialTabName: {
|
|
||||||
control: {
|
|
||||||
type: 'select',
|
|
||||||
options: [ 'firstTab', 'secondTab' ],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
} as Meta< TabsProps >;
|
|
||||||
|
|
||||||
const Template: Story< TabsProps > = ( args ) => {
|
|
||||||
const [ initialTab, setInitialTab ] = useState( args.initialTabName );
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Tabs
|
|
||||||
initialTabName={ initialTab }
|
|
||||||
onSelect={ ( newTabName ) => {
|
|
||||||
setInitialTab( newTabName );
|
|
||||||
} }
|
|
||||||
{ ...args }
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = Template.bind( {} );
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
.wc-block-components-tabs {
|
|
||||||
.wc-block-components-tabs__list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 100%;
|
|
||||||
> .wc-block-components-tabs__item {
|
|
||||||
border: none;
|
|
||||||
flex: auto;
|
|
||||||
background: transparent;
|
|
||||||
padding: $gap-small $gap;
|
|
||||||
color: inherit;
|
|
||||||
outline-offset: -1px;
|
|
||||||
text-align: center;
|
|
||||||
transition: box-shadow 0.1s linear;
|
|
||||||
box-shadow: inset 0 -1px currentColor;
|
|
||||||
border-radius: 0;
|
|
||||||
&.is-active {
|
|
||||||
box-shadow: inset 0 -3px currentColor;
|
|
||||||
font-weight: 600;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
outline-offset: -1px;
|
|
||||||
outline: 1px dotted currentColor;
|
|
||||||
}
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
.wc-block-components-tabs__item-content {
|
|
||||||
@include font-size(regular);
|
|
||||||
line-height: 1;
|
|
||||||
width: fit-content;
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
> img,
|
|
||||||
> svg {
|
|
||||||
height: 1.2em;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: 0.2em 0 -0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wc-block-components-payment-method-icons {
|
|
||||||
margin: 0.2em 0 -0.2em;
|
|
||||||
|
|
||||||
.wc-block-components-payment-method-icon {
|
|
||||||
height: 1.2em;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.wc-block-components-tabs__content {
|
|
||||||
padding: $gap 0;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -314,7 +314,6 @@
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react-number-format": "4.9.3",
|
"react-number-format": "4.9.3",
|
||||||
"react-transition-group": "^4.4.5",
|
"react-transition-group": "^4.4.5",
|
||||||
"reakit": "1.3.11",
|
|
||||||
"request": "2.88.2",
|
"request": "2.88.2",
|
||||||
"trim-html": "0.1.9",
|
"trim-html": "0.1.9",
|
||||||
"use-debounce": "9.0.4",
|
"use-debounce": "9.0.4",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: dev
|
||||||
|
Comment: Remove the unused WooCommerce blocks Tabs component, remove Reakit dependency.
|
||||||
|
|
||||||
|
|
@ -3965,9 +3965,6 @@ importers:
|
||||||
react-transition-group:
|
react-transition-group:
|
||||||
specifier: ^4.4.5
|
specifier: ^4.4.5
|
||||||
version: 4.4.5(react-dom@17.0.2)(react@17.0.2)
|
version: 4.4.5(react-dom@17.0.2)(react@17.0.2)
|
||||||
reakit:
|
|
||||||
specifier: 1.3.11
|
|
||||||
version: 1.3.11(react-dom@17.0.2)(react@17.0.2)
|
|
||||||
request:
|
request:
|
||||||
specifier: 2.88.2
|
specifier: 2.88.2
|
||||||
version: 2.88.2
|
version: 2.88.2
|
||||||
|
|
@ -45305,7 +45302,6 @@ packages:
|
||||||
prop-types: 15.8.1
|
prop-types: 15.8.1
|
||||||
react: 17.0.2
|
react: 17.0.2
|
||||||
scheduler: 0.19.1
|
scheduler: 0.19.1
|
||||||
bundledDependencies: false
|
|
||||||
|
|
||||||
/react-dom@17.0.2(react@17.0.2):
|
/react-dom@17.0.2(react@17.0.2):
|
||||||
resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
|
resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
|
||||||
|
|
@ -45838,7 +45834,6 @@ packages:
|
||||||
react-is: 16.13.1
|
react-is: 16.13.1
|
||||||
scheduler: 0.19.1
|
scheduler: 0.19.1
|
||||||
dev: true
|
dev: true
|
||||||
bundledDependencies: false
|
|
||||||
|
|
||||||
/react-test-renderer@17.0.2(react@17.0.2):
|
/react-test-renderer@17.0.2(react@17.0.2):
|
||||||
resolution: {integrity: sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==}
|
resolution: {integrity: sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue