@wordpress/components 29.1.1 → 29.3.0

package/src/tabs/stories/index.story.tsx

@@ -15,7 +15,6 @@ import { useState } from '@wordpress/element';
  */
 import { Tabs } from '..';
 import { Slot, Fill, Provider as SlotFillProvider } from '../../slot-fill';
-import DropdownMenu from '../../dropdown-menu';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
 import Icon from '../../icon';
@@ -367,133 +366,3 @@ const CloseButtonTemplate: StoryFn< typeof Tabs > = ( props ) => {
 	);
 };
 export const InsertCustomElements = CloseButtonTemplate.bind( {} );
-
-const ControlledModeTemplate: StoryFn< typeof Tabs > = ( props ) => {
-	const [ selectedTabId, setSelectedTabId ] = useState<
-		string | undefined | null
-	>( props.selectedTabId );
-
-	return (
-		<>
-			<Tabs
-				{ ...props }
-				selectedTabId={ selectedTabId }
-				onSelect={ ( selectedId ) => {
-					setSelectedTabId( selectedId );
-					props.onSelect?.( selectedId );
-				} }
-			>
-				<Tabs.TabList>
-					<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
-
-					<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
-
-					<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
-				</Tabs.TabList>
-				<Tabs.TabPanel tabId="tab1">
-					<p>Selected tab: Tab 1</p>
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId="tab2">
-					<p>Selected tab: Tab 2</p>
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId="tab3">
-					<p>Selected tab: Tab 3</p>
-				</Tabs.TabPanel>
-			</Tabs>
-			<div style={ { marginTop: '200px' } }>
-				<p>Select a tab:</p>
-				<DropdownMenu
-					controls={ [
-						{
-							onClick: () => setSelectedTabId( 'tab1' ),
-							title: 'Tab 1',
-							isActive: selectedTabId === 'tab1',
-						},
-						{
-							onClick: () => setSelectedTabId( 'tab2' ),
-							title: 'Tab 2',
-							isActive: selectedTabId === 'tab2',
-						},
-						{
-							onClick: () => setSelectedTabId( 'tab3' ),
-							title: 'Tab 3',
-							isActive: selectedTabId === 'tab3',
-						},
-					] }
-					label="Choose a tab. The power is yours."
-				/>
-			</div>
-		</>
-	);
-};
-
-export const ControlledMode = ControlledModeTemplate.bind( {} );
-ControlledMode.args = {
-	selectedTabId: 'tab3',
-};
-
-const TabBecomesDisabledTemplate: StoryFn< typeof Tabs > = ( props ) => {
-	const [ disableTab2, setDisableTab2 ] = useState( false );
-
-	return (
-		<>
-			<Button
-				variant="primary"
-				onClick={ () => setDisableTab2( ! disableTab2 ) }
-			>
-				{ disableTab2 ? 'Enable' : 'Disable' } Tab 2
-			</Button>
-			<Tabs { ...props }>
-				<Tabs.TabList>
-					<Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab>
-					<Tabs.Tab tabId="tab2" disabled={ disableTab2 }>
-						Tab 2
-					</Tabs.Tab>
-					<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
-				</Tabs.TabList>
-				<Tabs.TabPanel tabId="tab1">
-					<p>Selected tab: Tab 1</p>
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId="tab2">
-					<p>Selected tab: Tab 2</p>
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId="tab3">
-					<p>Selected tab: Tab 3</p>
-				</Tabs.TabPanel>
-			</Tabs>
-		</>
-	);
-};
-export const TabBecomesDisabled = TabBecomesDisabledTemplate.bind( {} );
-
-const TabGetsRemovedTemplate: StoryFn< typeof Tabs > = ( props ) => {
-	const [ removeTab1, setRemoveTab1 ] = useState( false );
-
-	return (
-		<>
-			<Button
-				variant="primary"
-				onClick={ () => setRemoveTab1( ! removeTab1 ) }
-			>
-				{ removeTab1 ? 'Restore' : 'Remove' } Tab 1
-			</Button>
-			<Tabs { ...props }>
-				<Tabs.TabList>
-					{ ! removeTab1 && <Tabs.Tab tabId="tab1">Tab 1</Tabs.Tab> }
-					<Tabs.Tab tabId="tab2">Tab 2</Tabs.Tab>
-					<Tabs.Tab tabId="tab3">Tab 3</Tabs.Tab>
-				</Tabs.TabList>
-				<Tabs.TabPanel tabId="tab1">
-					<p>Selected tab: Tab 1</p>
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId="tab2">
-					<p>Selected tab: Tab 2</p>
-				</Tabs.TabPanel>
-				<Tabs.TabPanel tabId="tab3">
-					<p>Selected tab: Tab 3</p>
-				</Tabs.TabPanel>
-			</Tabs>
-		</>
-	);
-};
-export const TabGetsRemoved = TabGetsRemovedTemplate.bind( {} );

package/src/text/README.md

@@ -156,7 +156,7 @@ Adjusts all text line-height based on the typography system.
 
 **Type**: `number`
 
-Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end.
+Clamps the text content to the specific `numberOfLines`, adding the `ellipsis` at the end.
 
 ### optimizeReadabilityFor
 

package/src/text/hook.ts

@@ -104,9 +104,10 @@ export default function useText(
 			const isOptimalTextColorDark =
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
+			// Should not use theme colors
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.theme.foreground } )
-				: css( { color: COLORS.theme.foregroundInverted } );
+				? css( { color: COLORS.gray[ 900 ] } )
+				: css( { color: COLORS.white } );
 		}
 
 		return cx(

package/src/text/stories/index.story.tsx

@@ -49,7 +49,7 @@ Truncate.args = {
 facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
 Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
 Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
-facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
+facilities. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
 In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
 arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
 eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
@@ -68,7 +68,7 @@ Highlight.args = {
 facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
 Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
 Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
-facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
+facilities. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
 In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
 arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
 eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada

package/src/text/test/index.tsx

@@ -25,7 +25,7 @@ describe( 'Text', () => {
 			</Text>
 		);
 		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
-			color: 'rgb( 255, 255, 255 )',
+			color: COLORS.white,
 		} );
 	} );
 

package/src/text/utils.ts

@@ -27,7 +27,7 @@ import { createElement } from '@wordpress/element';
  * @property {string | Record<string, unknown>}                           [highlightClassName='']   Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
  * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}]       Styles to apply to highlighted text.
  * @property {keyof JSX.IntrinsicElements}                                [highlightTag='mark']     Tag to use for the highlighted text.
- * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `santize` function to pass to `highlight-words-core`.
+ * @property {import('highlight-words-core').FindAllArgs['sanitize']}     [sanitize]                Custom `sanitize` function to pass to `highlight-words-core`.
  * @property {string[]}                                                   [searchWords=[]]          Words to search for and highlight.
  * @property {string}                                                     [unhighlightClassName=''] Classname to apply to unhighlighted text.
  * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle]        Style to apply to unhighlighted text.

package/src/text-highlight/test/index.tsx

@@ -20,7 +20,7 @@ const defaultText =
 describe( 'TextHighlight', () => {
 	describe( 'Basic rendering', () => {
 		it.each( [ [ 'Gutenberg' ], [ 'media' ] ] )(
-			'should highlight the singular occurance of the text "%s" in the text if it exists',
+			'should highlight the singular occurrence of the text "%s" in the text if it exists',
 			( highlight ) => {
 				const { container } = render(
 					<TextHighlight
@@ -39,7 +39,7 @@ describe( 'TextHighlight', () => {
 			}
 		);
 
-		it( 'should highlight multiple occurances of the string every time it exists in the text', () => {
+		it( 'should highlight multiple occurrences of the string every time it exists in the text', () => {
 			const highlight = 'edit';
 
 			const { container } = render(
@@ -55,7 +55,7 @@ describe( 'TextHighlight', () => {
 			} );
 		} );
 
-		it( 'should highlight occurances of a string regardless of capitalisation', () => {
+		it( 'should highlight occurrences of a string regardless of capitalisation', () => {
 			// Note that `The` occurs twice in the default text, once in
 			// lowercase and once capitalized.
 			const highlight = 'The';

package/src/toolbar/toolbar/style.scss

@@ -56,9 +56,10 @@
 			z-index: -1;
 
 			// Animate in.
-			animation: components-button__appear-animation 0.1s ease;
-			animation-fill-mode: forwards;
-			@include reduce-motion("animation");
+			@media not (prefers-reduced-motion) {
+				animation: components-button__appear-animation 0.1s ease;
+				animation-fill-mode: forwards;
+			}
 		}
 
 		svg {