@wordpress/components 25.0.0 → 25.1.1

package/src/dropdown-menu-v2/stories/index.tsx

@@ -7,6 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
+import { COLORS } from '../../utils';
 import {
 	DropdownMenu,
 	DropdownMenuItem,
@@ -20,6 +21,8 @@ import {
 	DropdownSubMenuTrigger,
 } from '..';
 import Button from '../../button';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 /**
  * WordPress dependencies
@@ -31,6 +34,7 @@ import { menu, wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import Icon from '../../icon';
+import { ContextSystemProvider } from '../../ui/context';
 
 const meta: ComponentMeta< typeof DropdownMenu > = {
 	title: 'Components (Experimental)/DropdownMenu v2',
@@ -71,8 +75,8 @@ const meta: ComponentMeta< typeof DropdownMenu > = {
 export default meta;
 
 const ItemHelpText = styled.span`
-	font-size: 10px;
-	color: #777;
+	font-size: 12px;
+	color: ${ COLORS.gray[ '700' ] };
 
 	/* "> * > &" syntax is to target only immediate parent menu item */
 	[data-highlighted] > * > &,
@@ -127,7 +131,11 @@ const RadioItemsGroup = () => {
 };
 
 const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
-	<DropdownMenu { ...props } />
+	<SlotFillProvider>
+		<DropdownMenu { ...props } />
+		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
+		<Popover.Slot />
+	</SlotFillProvider>
 );
 export const Default = Template.bind( {} );
 Default.args = {
@@ -138,7 +146,7 @@ Default.args = {
 			<DropdownMenuGroup>
 				<DropdownMenuItem>Menu item</DropdownMenuItem>
 				<DropdownMenuItem
-					prefix={ <Icon icon={ wordpress } size={ 18 } /> }
+					prefix={ <Icon icon={ wordpress } size={ 24 } /> }
 				>
 					Menu item with prefix
 				</DropdownMenuItem>
@@ -191,3 +199,19 @@ Default.args = {
 		</>
 	),
 };
+
+const toolbarVariantContextValue = {
+	DropdownMenu: {
+		variant: 'toolbar',
+	},
+};
+export const ToolbarVariant: ComponentStory< typeof DropdownMenu > = (
+	props
+) => (
+	<ContextSystemProvider value={ toolbarVariantContextValue }>
+		<DropdownMenu { ...props } />
+	</ContextSystemProvider>
+);
+ToolbarVariant.args = {
+	...Default.args,
+};

package/src/dropdown-menu-v2/styles.ts

@@ -8,9 +8,10 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 /**
  * Internal dependencies
  */
-import { COLORS, font, rtl } from '../utils';
+import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 import Icon from '../icon';
+import type { DropdownMenuInternalContext } from './types';
 
 const ANIMATION_PARAMS = {
 	SLIDE_AMOUNT: '2px',
@@ -18,10 +19,17 @@ const ANIMATION_PARAMS = {
 	EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )',
 };
 
+const CONTENT_WRAPPER_PADDING = space( 2 );
 const ITEM_PREFIX_WIDTH = space( 7 );
 const ITEM_PADDING_INLINE_START = space( 2 );
 const ITEM_PADDING_INLINE_END = space( 2.5 );
 
+// TODO: should bring this into the config, and make themeable
+const DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled;
+const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[ '900' ];
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.popoverShadow }`;
+const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
+
 const slideUpAndFade = keyframes( {
 	'0%': {
 		opacity: 0,
@@ -54,15 +62,16 @@ const slideLeftAndFade = keyframes( {
 	'100%': { opacity: 1, transform: 'translateX(0)' },
 } );
 
-const baseContent = css`
+const baseContent = (
+	variant: DropdownMenuInternalContext[ 'variant' ]
+) => css`
 	min-width: 220px;
 	background-color: ${ COLORS.ui.background };
-	border-radius: 6px;
-	padding: ${ space( 2 ) };
-	box-shadow: 0.1px 4px 16.4px -0.5px rgba( 0, 0, 0, 0.1 ),
-		0px 5.5px 7.8px -0.3px rgba( 0, 0, 0, 0.1 ),
-		0px 2.7px 3.8px -0.2px rgba( 0, 0, 0, 0.1 ),
-		0px 0.7px 1px rgba( 0, 0, 0, 0.1 );
+	border-radius: ${ CONFIG.radiusBlockUi };
+	padding: ${ CONTENT_WRAPPER_PADDING };
+	box-shadow: ${ variant === 'toolbar'
+		? TOOLBAR_VARIANT_BOX_SHADOW
+		: DEFAULT_BOX_SHADOW };
 	animation-duration: ${ ANIMATION_PARAMS.DURATION };
 	animation-timing-function: ${ ANIMATION_PARAMS.EASING };
 	will-change: transform, opacity;
@@ -155,7 +164,7 @@ const baseItem = css`
 	font-weight: normal;
 	line-height: 20px;
 	color: ${ COLORS.gray[ 900 ] };
-	border-radius: 3px;
+	border-radius: ${ CONFIG.radiusBlockUi };
 	display: flex;
 	align-items: center;
 	padding: ${ space( 2 ) } ${ ITEM_PADDING_INLINE_END } ${ space( 2 ) }
@@ -174,14 +183,13 @@ const baseItem = css`
 		pointer-events: none;
 	}
 
+	/* Hover and Focus styles */
 	&[data-highlighted] {
-		/*
-			TODO: reconcile with global focus styles
-			(incl high contrast mode fallbacks)
-		 */
+		/* TODO: reconcile with global focus styles */
+		background-color: ${ COLORS.gray[ '100' ] };
 
-		background-color: ${ COLORS.ui.theme };
-		color: white;
+		/* Only visible in Windows High Contrast mode */
+		outline: 2px solid transparent;
 	}
 
 	svg {
@@ -193,11 +201,15 @@ const baseItem = css`
 	}
 `;
 
-export const Content = styled( DropdownMenu.Content )`
-	${ baseContent }
+export const Content = styled( DropdownMenu.Content )<
+	Pick< DropdownMenuInternalContext, 'variant' >
+>`
+	${ ( props ) => baseContent( props.variant ) }
 `;
-export const SubContent = styled( DropdownMenu.SubContent )`
-	${ baseContent }
+export const SubContent = styled( DropdownMenu.SubContent )<
+	Pick< DropdownMenuInternalContext, 'variant' >
+>`
+	${ ( props ) => baseContent( props.variant ) }
 `;
 
 export const Item = styled( DropdownMenu.Item )`
@@ -210,13 +222,11 @@ export const RadioItem = styled( DropdownMenu.RadioItem )`
 	${ baseItem }
 `;
 export const SubTrigger = styled( DropdownMenu.SubTrigger )`
-	&[data-state='open']:not( [data-highlighted] ) {
-		/* TODO: use variable */
-		background-color: rgba( 56, 88, 233, 0.04 );
-		color: ${ COLORS.ui.theme };
-	}
-
 	${ baseItem }
+
+	&[data-state='open'] {
+		background-color: ${ COLORS.gray[ '100' ] };
+	}
 `;
 
 export const Label = styled( DropdownMenu.Label )`
@@ -237,12 +247,17 @@ export const Label = styled( DropdownMenu.Label )`
 	text-transform: uppercase;
 `;
 
-export const Separator = styled( DropdownMenu.Separator )`
-	height: 1px;
+export const Separator = styled( DropdownMenu.Separator )<
+	Pick< DropdownMenuInternalContext, 'variant' >
+>`
+	height: ${ CONFIG.borderWidth };
 	/* TODO: doesn't match border color from variables */
-	background-color: ${ COLORS.ui.borderDisabled };
+	background-color: ${ ( props ) =>
+		props.variant === 'toolbar'
+			? TOOLBAR_VARIANT_BORDER_COLOR
+			: DEFAULT_BORDER_COLOR };
 	/* Negative horizontal margin to make separator go from side to side */
-	margin: ${ space( 2 ) } 0;
+	margin: ${ space( 2 ) } calc( -1 * ${ CONTENT_WRAPPER_PADDING } );
 `;
 
 export const ItemIndicator = styled( DropdownMenu.ItemIndicator )`

package/src/dropdown-menu-v2/types.ts

@@ -44,7 +44,7 @@ export type DropdownMenuProps = {
 	 * The preferred alignment against the trigger.
 	 * May change when collisions occur.
 	 *
-	 * @default 'center'
+	 * @default 'start'
 	 */
 	align?: DropdownMenuPrimitive.DropdownMenuContentProps[ 'align' ];
 	/**
@@ -248,3 +248,18 @@ export type DropdownMenuGroupProps = {
 };
 
 export type DropdownMenuSeparatorProps = {};
+
+export type DropdownMenuInternalContext = {
+	/**
+	 * This variant can be used to change the appearance of the component in
+	 * specific contexts, ie. when rendered inside the `Toolbar` component.
+	 */
+	variant?: 'toolbar';
+};
+
+export type DropdownMenuPrivateContext = Pick<
+	DropdownMenuInternalContext,
+	'variant'
+> & {
+	portalContainer: HTMLElement | null;
+};

package/src/focal-point-picker/controls.tsx

@@ -54,6 +54,7 @@ export default function FocalPointPickerControls( {
 		>
 			<FocalPointUnitControl
 				label={ __( 'Left' ) }
+				aria-label={ __( 'Focal point left position' ) }
 				value={ [ valueX, '%' ].join( '' ) }
 				onChange={
 					( ( next ) =>
@@ -66,6 +67,7 @@ export default function FocalPointPickerControls( {
 			/>
 			<FocalPointUnitControl
 				label={ __( 'Top' ) }
+				aria-label={ __( 'Focal point top position' ) }
 				value={ [ valueY, '%' ].join( '' ) }
 				onChange={
 					( ( next ) =>

package/src/focal-point-picker/test/index.js

@@ -120,7 +120,9 @@ describe( 'FocalPointPicker', () => {
 			const { rerender } = render(
 				<Picker value={ { x: 0.25, y: 0.5 } } />
 			);
-			const xInput = screen.getByRole( 'spinbutton', { name: 'Left' } );
+			const xInput = screen.getByRole( 'spinbutton', {
+				name: 'Focal point left position',
+			} );
 			rerender( <Picker value={ { x: 0.93, y: 0.5 } } /> );
 			expect( xInput.value ).toBe( '93' );
 		} );
@@ -155,10 +157,14 @@ describe( 'FocalPointPicker', () => {
 			);
 
 			expect(
-				screen.getByRole( 'spinbutton', { name: 'Left' } ).value
+				screen.getByRole( 'spinbutton', {
+					name: 'Focal point left position',
+				} ).value
 			).toBe( '10' );
 			expect(
-				screen.getByRole( 'spinbutton', { name: 'Top' } ).value
+				screen.getByRole( 'spinbutton', {
+					name: 'Focal point top position',
+				} ).value
 			).toBe( '20' );
 			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );

package/src/font-size-picker/index.tsx

@@ -14,7 +14,6 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
 import {
@@ -24,12 +23,13 @@ import {
 } from '../unit-control';
 import { VisuallyHidden } from '../visually-hidden';
 import { getCommonSizeUnit } from './utils';
-import { HStack } from '../h-stack';
 import type { FontSizePickerProps } from './types';
 import {
 	Container,
+	Header,
 	HeaderHint,
 	HeaderLabel,
+	HeaderToggle,
 	Controls,
 	ResetButton,
 } from './styles';
@@ -127,7 +127,7 @@ const UnforwardedFontSizePicker = (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<Spacer>
-				<HStack className="components-font-size-picker__header">
+				<Header className="components-font-size-picker__header">
 					<HeaderLabel
 						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
 					>
@@ -139,7 +139,7 @@ const UnforwardedFontSizePicker = (
 						) }
 					</HeaderLabel>
 					{ ! disableCustomFontSizes && (
-						<Button
+						<HeaderToggle
 							label={
 								showCustomValueControl
 									? __( 'Use size preset' )
@@ -155,7 +155,7 @@ const UnforwardedFontSizePicker = (
 							isSmall
 						/>
 					) }
-				</HStack>
+				</Header>
 			</Spacer>
 			<Controls
 				className="components-font-size-picker__controls"

package/src/font-size-picker/styles.ts

@@ -8,6 +8,7 @@ import styled from '@emotion/styled';
  */
 import BaseControl from '../base-control';
 import Button from '../button';
+import { HStack } from '../h-stack';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils';
 import type { FontSizePickerProps } from './types';
@@ -18,6 +19,14 @@ export const Container = styled.fieldset`
 	padding: 0;
 `;
 
+export const Header = styled( HStack )`
+	height: ${ space( 4 ) };
+`;
+
+export const HeaderToggle = styled( Button )`
+	margin-top: ${ space( -1 ) };
+`;
+
 export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	display: flex;
 	gap: ${ space( 1 ) };

package/src/item-group/styles.ts

@@ -15,15 +15,23 @@ export const unstyledButton = css`
 	background: none;
 	text-align: start;
 
+	svg,
+	path {
+		fill: currentColor;
+	}
+
 	&:hover {
 		color: ${ COLORS.ui.theme };
 	}
 
 	&:focus {
-		background-color: transparent;
-		color: ${ COLORS.ui.theme };
-		border-color: ${ COLORS.ui.theme };
-		outline: 3px solid transparent;
+		box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
+			var(
+				--wp-components-color-accent,
+				var( --wp-admin-theme-color, ${ COLORS.ui.theme } )
+			);
+		// Windows high contrast mode.
+		outline: 2px solid transparent;
 	}
 `;
 

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Text } from 'react-native';
-import { render, fireEvent, waitFor, act } from 'test/helpers';
+import { render, fireEvent, act } from 'test/helpers';
 import { useNavigation } from '@react-navigation/native';
 
 /**
@@ -49,8 +49,8 @@ it( 'animates height transitioning from non-full-screen to full-screen', async (
 	);
 
 	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	const navigationScreen = await screen.findByTestId(
+		'navigation-screen-test-screen-1'
 	);
 	// Trigger non-full-screen layout event
 	act( () => {
@@ -65,11 +65,9 @@ it( 'animates height transitioning from non-full-screen to full-screen', async (
 		jest.advanceTimersByTime( 10 );
 	} );
 	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
 	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+	await screen.findByText( /test-screen-2/ );
 
 	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
 } );
@@ -87,8 +85,8 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 	);
 
 	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	const navigationScreen = await screen.findByTestId(
+		'navigation-screen-test-screen-1'
 	);
 	// Trigger non-full-screen layout event
 	act( () => {
@@ -103,16 +101,11 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 		jest.advanceTimersByTime( 10 );
 	} );
 	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
 	// Navigate to screen 1
-	fireEvent.press(
-		// Use custom waitFor due to https://github.com/callstack/react-native-testing-library/issues/379
-		await waitFor( () => screen.getByText( /test-screen-2/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-2/ ) );
 	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-1/ ) );
+	await screen.findByText( /test-screen-1/ );
 
 	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 2 );
 } );
@@ -135,8 +128,8 @@ it( 'does not animate height transitioning from full-screen to full-screen', asy
 	);
 
 	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await waitFor( () =>
-		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	const navigationScreen = await screen.findByTestId(
+		'navigation-screen-test-screen-1'
 	);
 	// Trigger non-full-screen layout event
 	act( () => {
@@ -151,19 +144,13 @@ it( 'does not animate height transitioning from full-screen to full-screen', asy
 		jest.advanceTimersByTime( 10 );
 	} );
 	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-1/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
 	// Navigate to screen 3
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-2/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-2/ ) );
 	// Navigate to screen 2
-	fireEvent.press(
-		await waitFor( () => screen.getByText( /test-screen-3/ ) )
-	);
+	fireEvent.press( await screen.findByText( /test-screen-3/ ) );
 	// Await navigation screen to allow async state updates to complete
-	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+	await screen.findByText( /test-screen-2/ );
 
 	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
 } );

package/src/mobile/bottom-sheet/cell.native.js

@@ -26,6 +26,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 import TouchableRipple from './ripple';
+import LockIcon from './lock-icon';
 
 const isIOS = Platform.OS === 'ios';
 class BottomSheetCell extends Component {
@@ -93,6 +94,7 @@ class BottomSheetCell extends Component {
 			accessibilityRole,
 			disabled = false,
 			disabledStyle = styles.cellDisabled,
+			showLockIcon = true,
 			activeOpacity,
 			onPress,
 			onLongPress,
@@ -255,7 +257,7 @@ class BottomSheetCell extends Component {
 					placeholder={ valuePlaceholder }
 					placeholderTextColor={ placeholderTextColor }
 					onChangeText={ onChangeValue }
-					editable={ isValueEditable }
+					editable={ isValueEditable && ! disabled }
 					pointerEvents={
 						this.state.isEditingValue ? 'auto' : 'none'
 					}
@@ -374,6 +376,7 @@ class BottomSheetCell extends Component {
 									] }
 								>
 									<Icon
+										lock
 										icon={ icon }
 										size={ 24 }
 										fill={
@@ -440,6 +443,11 @@ class BottomSheetCell extends Component {
 					>
 						{ children }
 					</View>
+					{ disabled && showLockIcon && (
+						<View style={ styles.cellDisabled }>
+							<LockIcon />
+						</View>
+					) }
 				</View>
 				{ help && (
 					<Text style={ [ cellHelpStyle, styles.placeholderColor ] }>

package/src/mobile/bottom-sheet/color-cell.native.js

@@ -11,7 +11,7 @@ import Cell from './cell';
 import styles from './styles.scss';
 
 export default function BottomSheetColorCell( props ) {
-	const { color, withColorIndicator = true, ...cellProps } = props;
+	const { color, withColorIndicator = true, disabled, ...cellProps } = props;
 
 	return (
 		<Cell
@@ -22,12 +22,13 @@ export default function BottomSheetColorCell( props ) {
 				__( 'Double tap to go to color settings' )
 			}
 			editable={ false }
+			disabled={ disabled }
 			value={ withColorIndicator && ! color && __( 'Default' ) }
 		>
 			{ withColorIndicator && color && (
 				<ColorIndicator color={ color } style={ styles.colorCircle } />
 			) }
-			<Icon icon={ chevronRight }></Icon>
+			{ disabled ? null : <Icon icon={ chevronRight }></Icon> }
 		</Cell>
 	);
 }

package/src/mobile/bottom-sheet/lock-icon/index.native.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, lock } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+export default function LockIcon() {
+	const iconStyle = usePreferredColorSchemeStyle(
+		styles.icon,
+		styles[ 'icon--dark' ]
+	);
+
+	return <Icon icon={ lock } color={ iconStyle.color } style={ iconStyle } />;
+}

package/src/mobile/bottom-sheet/lock-icon/styles.native.scss

@@ -0,0 +1,8 @@
+.icon {
+	color: $gray-dark;
+	margin-left: 6px;
+}
+
+.icon--dark {
+	color: $gray-light;
+}

package/src/mobile/bottom-sheet/radio-cell.native.js

@@ -10,7 +10,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import Cell from './cell';
 import styles from './styles.scss';
 
-export default function BottomSheetColorCell( props ) {
+export default function BottomSheetRadioCell( props ) {
 	const { selected, ...cellProps } = props;
 
 	const selectedIconStyle = usePreferredColorSchemeStyle(
@@ -29,6 +29,7 @@ export default function BottomSheetColorCell( props ) {
 			}
 			editable={ false }
 			value={ '' }
+			showLockIcon={ selected }
 		>
 			{ selected && (
 				<Icon icon={ check } style={ selectedIconStyle }></Icon>

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -15,6 +15,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import Cell from './cell';
+import LockIcon from './lock-icon';
 import styles from './range-cell.scss';
 import RangeTextInput from './range-text-input';
 import { toFixed } from '../utils';
@@ -219,6 +220,7 @@ class BottomSheetRangeCell extends Component {
 						accessible={ false }
 						valueStyle={ styles.valueStyle }
 						disabled={ disabled }
+						showLockIcon={ false }
 					>
 						<View style={ containerStyle }>
 							{ preview }
@@ -260,6 +262,7 @@ class BottomSheetRangeCell extends Component {
 									{ children }
 								</RangeTextInput>
 							) }
+							{ disabled && <LockIcon /> }
 						</View>
 					</Cell>
 				</View>

package/src/mobile/bottom-sheet/styles.native.scss

@@ -1,5 +1,7 @@
 //Bottom Sheet
 
+$cell-disable-opacity: 0.38;
+
 .bottomModal {
 	justify-content: flex-end;
 	margin: 0;
@@ -288,11 +290,11 @@
 }
 
 .placeholderColorDisabled {
-	color: lighten($gray, 20%);
+	color: rgba($gray-dark, $cell-disable-opacity);
 }
 
 .placeholderColorDisabledDark {
-	color: lighten($gray-dark, 10%);
+	color: rgba($white, $cell-disable-opacity);
 }
 
 .applyButton {
@@ -327,5 +329,5 @@
 }
 
 .cellDisabled {
-	opacity: 0.3;
+	opacity: $cell-disable-opacity;
 }

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -71,7 +71,7 @@ const BottomSheetSelectControl = ( {
 					) }
 					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }

package/src/mobile/bottom-sheet-text-control/index.native.js

@@ -65,7 +65,7 @@ const BottomSheetTextControl = ( {
 					placeholder={ cellPlaceholder || placeholder || '' }
 					disabled={ disabled }
 				>
-					<Icon icon={ chevronRight }></Icon>
+					{ disabled ? null : <Icon icon={ chevronRight } /> }
 				</BottomSheet.Cell>
 			}
 			showSheet={ showSubSheet }