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 './state-input';
|
||||
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",
|
||||
"react-number-format": "4.9.3",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"reakit": "1.3.11",
|
||||
"request": "2.88.2",
|
||||
"trim-html": "0.1.9",
|
||||
"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:
|
||||
specifier: ^4.4.5
|
||||
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:
|
||||
specifier: 2.88.2
|
||||
version: 2.88.2
|
||||
|
|
@ -45305,7 +45302,6 @@ packages:
|
|||
prop-types: 15.8.1
|
||||
react: 17.0.2
|
||||
scheduler: 0.19.1
|
||||
bundledDependencies: false
|
||||
|
||||
/react-dom@17.0.2(react@17.0.2):
|
||||
resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
|
||||
|
|
@ -45838,7 +45834,6 @@ packages:
|
|||
react-is: 16.13.1
|
||||
scheduler: 0.19.1
|
||||
dev: true
|
||||
bundledDependencies: false
|
||||
|
||||
/react-test-renderer@17.0.2(react@17.0.2):
|
||||
resolution: {integrity: sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==}
|
||||
|
|
|
|||
Loading…
Reference in New Issue