@wordpress/components 35.0.0 → 35.0.1

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

@@ -1,333 +0,0 @@
-//Bottom Sheet
-
-$cell-disable-opacity: 0.38;
-
-.bottomModal {
-	justify-content: flex-end;
-	margin: 0;
-	align-items: center;
-}
-
-.dragIndicator {
-	background-color: $light-gray-400;
-	height: 4px;
-	width: 36px;
-	margin: auto;
-	margin-top: 6px;
-	margin-bottom: 6px;
-	border-radius: 2px;
-}
-
-.separator {
-	background-color: $light-gray-400;
-	height: 1px;
-	width: 100%;
-}
-
-.separatorDark {
-	background-color: $gray-70;
-}
-
-.header {
-	flex-shrink: 1;
-}
-
-.emptyHeader {
-	margin-top: $grid-unit-20 * 0.5;
-}
-
-.background {
-	background-color: $modal-background;
-	border-top-right-radius: 8px;
-	border-top-left-radius: 8px;
-	width: 100%;
-	max-width: 512;
-	padding-bottom: 0;
-}
-
-.backgroundDark {
-	background-color: $modal-background-dark;
-}
-
-.backgroundFullScreen {
-	border-top-right-radius: 0;
-	border-top-left-radius: 0;
-	padding-top: 8;
-}
-
-.content {
-	padding: 0 16px 0 16px;
-}
-
-.scrollableContent {
-	padding-bottom: 20px;
-}
-
-// Button
-
-.buttonText {
-	font-size: 18px;
-	padding: 5px;
-}
-
-.resetButton {
-	font-size: 17px;
-	color: $blue-wordpress;
-}
-
-.resetButtonDark {
-	color: $blue-30;
-}
-
-// Cell
-
-.cellContainer {
-	flex-direction: row;
-	min-height: 48;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.clipToBounds {
-	overflow: hidden;
-}
-
-.cellSeparator {
-	background-color: $light-gray-400;
-	height: 1px;
-	width: 100%;
-}
-
-.cellSeparatorDark {
-	background-color: $gray-70;
-}
-
-.cellRowContainer {
-	flex-direction: row;
-	align-items: center;
-	flex-shrink: 1;
-}
-
-.cellRowIcon {
-	flex-shrink: 0;
-}
-
-.cellLabel {
-	font-size: 17px;
-	color: $gray-dark;
-	margin-right: 12px;
-	flex-shrink: 1;
-}
-
-.cellLabelCentered {
-	font-size: 17px;
-	color: $gray-dark;
-	flex: 1;
-	text-align: center;
-}
-
-.cellLabelLeftAlignNoIcon {
-	font-size: 17px;
-	color: $gray-dark;
-	flex: 1;
-	margin-left: 0;
-}
-
-.cellValue {
-	font-size: 17px;
-	color: $gray-dark;
-	text-align: right;
-	flex: 1;
-}
-
-.cellTextDark {
-	color: $white;
-}
-
-.cellValueRTL {
-	text-align: left;
-}
-
-.icon {
-	color: $toolbar-button;
-}
-
-.iconDark {
-	color: #c3c4c7;
-}
-
-// Footer Message Cell
-
-.footerMessageCell {
-	font-size: 12px;
-	color: $gray;
-	flex: 1;
-}
-
-// Color Cell
-
-.colorCircle {
-	width: 2 * $grid-unit-20;
-	height: 2 * $grid-unit-20;
-	border-radius: $grid-unit-20;
-}
-
-// Radio Cell
-
-.selectedIcon {
-	color: $blue-50;
-}
-
-.selectedIconDark {
-	color: $blue-30;
-}
-
-// Range Text Input
-
-.textInputIOS {
-	border-right-width: 1px;
-	text-align: center;
-	border-color: $light-gray-400;
-	color: $gray-dark;
-}
-
-.textInputIOSDark {
-	border-color: $gray-70;
-	color: $white;
-}
-
-.textInputContainer {
-	flex-direction: row;
-	margin-left: $grid-unit;
-}
-
-.textInput {
-	min-height: 25px;
-	border-color: $light-gray-400;
-	padding-top: 4px;
-	padding-bottom: 4px;
-	text-align: center;
-	color: $gray-dark;
-}
-
-.textInputDark {
-	border-color: $gray-70;
-	color: $white;
-}
-
-// Navigation Header
-
-.bottomSheetHeader {
-	align-items: center;
-	flex-direction: row;
-	height: 44px;
-	justify-content: center;
-}
-
-.bottomSheetHeaderLeft {
-	align-items: flex-start;
-	flex: 1;
-	justify-content: center;
-}
-
-.bottomSheetHeaderRight {
-	align-items: flex-end;
-	flex: 1;
-	justify-content: center;
-}
-
-.bottomSheetActionButton {
-	align-items: center;
-	flex-direction: row;
-	height: 100%;
-	justify-content: center;
-	min-width: 44px;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-20;
-}
-
-.chevronLeftIcon {
-	color: $blue-50;
-	margin-left: -11px;
-}
-
-.chevronLeftIconDark {
-	color: $blue-30;
-}
-
-.bottomSheetHeaderTitle {
-	color: $light-primary;
-	text-align: center;
-	font-weight: 600;
-	font-size: 16px;
-	flex: 2;
-}
-
-.bottomSheetHeaderTitleDark {
-	color: $dark-primary;
-}
-
-.bottomSheetButtonText {
-	color: $blue-50;
-	font-size: 16px;
-}
-
-.bottomSheetButtonTextDark {
-	color: $blue-30;
-}
-
-.arrowLeftIcon {
-	color: $gray-60;
-}
-
-.arrowLeftIconDark {
-	color: $dark-secondary;
-}
-
-// used in both light and dark modes
-.placeholderColor {
-	color: $gray;
-}
-
-.placeholderColorDisabled {
-	color: rgba($gray-dark, $cell-disable-opacity);
-}
-
-.placeholderColorDisabledDark {
-	color: rgba($white, $cell-disable-opacity);
-}
-
-.applyButton {
-	color: $blue-50;
-	font-size: 17px;
-}
-
-.applyButtonDark {
-	color: $blue-30;
-}
-
-.flex {
-	flex: 1;
-}
-
-.cellHelpLabel {
-	font-size: $default-font-size;
-	padding-bottom: $grid-unit-15;
-}
-
-.cellHelpLabelIOS {
-	padding-bottom: $grid-unit-10;
-}
-
-.cellSubLabelText {
-	font-size: 12px;
-	color: $sub-heading;
-}
-
-.cellSubLabelTextDark {
-	color: $sub-heading-dark;
-}
-
-.cellDisabled {
-	opacity: $cell-disable-opacity;
-}

package/src/mobile/bottom-sheet/sub-sheet/README.md

@@ -1,90 +0,0 @@
-# BottomSheetSubSheet
-
-BottomSheetSubSheet allows for adding controls inside the React Native bottom sheet settings.
-
-### Usage
-
-```jsx
-/**
- * External dependencies
- */
-import { useState } from 'react';
-import { SafeAreaView, View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-
-/**
- * WordPress dependencies
- */
-import { Icon, chevronRight } from '@wordpress/icons';
-import { BottomSheet } from '@wordpress/components';
-
-const ExampleControl = () => {
-	const [ showSubSheet, setShowSubSheet ] = useState( false );
-	const navigation = useNavigation();
-
-	const goBack = () => {
-		setShowSubSheet( false );
-		navigation.goBack();
-	};
-
-	const openSubSheet = () => {
-		navigation.navigate( BottomSheet.SubSheet.screenName );
-		setShowSubSheet( true );
-	};
-
-	return (
-		<BottomSheet.SubSheet
-			navigationButton={
-				<BottomSheet.Cell
-					label={ 'Howdy' }
-					separatorType="none"
-					onPress={ openSubSheet }
-					accessibilityRole={ 'button' }
-					accessibilityLabel={ 'Howdy' }
-					accessibilityHint={ 'Navigates to Howdy bottom sheet' }
-				>
-					<Icon icon={ chevronRight }></Icon>
-				</BottomSheet.Cell>
-			}
-			showSheet={ showSubSheet }
-		>
-			<>
-				<BottomSheet.NavBar>
-					<BottomSheet.NavBar.BackButton onPress={ goBack } />
-					<BottomSheet.NavBar.Heading>{ 'Howdy' }</BottomSheet.NavBar.Heading>
-				</BottomSheet.NavBar>
-				<View paddingHorizontal={ 16 }>
-					<Text>{ 'World' }</Text>
-				</View>
-			</>
-		</BottomSheet.SubSheet>
-	);
-};
-
-export default ExampleControl;
-```
-
-### Props
-
-#### showSheet
-
-Controls the Sub Sheet content visibility.
-
--   Type: `Boolean`
--   Required: Yes
-
-#### navigationButton
-
-UI rendered to allow navigating to the Sub Sheet when tapped.
-
--   Type: `ReactComponent`
--   Required: Yes
-
-#### isFullScreen
-
-Toggles the Sub Sheet height filling the entire device height.
-
--   Type: `Boolean`
--   Required: Yes
-
-See `BottomSheetSelectControl` as an example.

package/src/mobile/bottom-sheet/sub-sheet/index.native.js

@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { SafeAreaView } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { Children, useEffect, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { BottomSheetContext } from '../bottom-sheet-context';
-import { createSlotFill } from '../../../slot-fill';
-
-const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' );
-
-const BottomSheetSubSheet = ( {
-	children,
-	navigationButton,
-	showSheet,
-	isFullScreen,
-} ) => {
-	const { setIsFullScreen } = useContext( BottomSheetContext );
-
-	useEffect( () => {
-		if ( showSheet ) {
-			setIsFullScreen( isFullScreen );
-		}
-		// See https://github.com/WordPress/gutenberg/pull/41166
-	}, [ showSheet, isFullScreen ] );
-
-	return (
-		<>
-			{ showSheet && (
-				<Fill>
-					<SafeAreaView>{ children }</SafeAreaView>
-				</Fill>
-			) }
-			{ Children.count( children ) > 0 && navigationButton }
-		</>
-	);
-};
-
-BottomSheetSubSheet.Slot = Slot;
-BottomSheetSubSheet.screenName = 'BottomSheetSubSheet';
-
-export default BottomSheetSubSheet;

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

@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import { Switch } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-/**
- * Internal dependencies
- */
-import Cell from './cell';
-
-const EMPTY_STYLE = {};
-
-export default function BottomSheetSwitchCell( props ) {
-	const { value, onValueChange, disabled, ...cellProps } = props;
-
-	const onPress = () => {
-		onValueChange( ! value );
-	};
-
-	const getAccessibilityLabel = () => {
-		if ( ! cellProps.help ) {
-			return value
-				? sprintf(
-						/* translators: accessibility text. Switch setting ON state. %s: Switch title. */
-						_x( '%s. On', 'switch control' ),
-						cellProps.label
-				  )
-				: sprintf(
-						/* translators: accessibility text. Switch setting OFF state. %s: Switch title. */
-						_x( '%s. Off', 'switch control' ),
-						cellProps.label
-				  );
-		}
-		return value
-			? sprintf(
-					/* translators: accessibility text. Switch setting ON state. %1: Switch title, %2: switch help. */
-					_x( '%1$s, %2$s. On', 'switch control' ),
-					cellProps.label,
-					cellProps.help
-			  )
-			: sprintf(
-					/* translators: accessibility text. Switch setting OFF state. %1: Switch title, %2: switch help. */
-					_x( '%1$s, %2$s. Off', 'switch control' ),
-					cellProps.label,
-					cellProps.help
-			  );
-	};
-
-	return (
-		<Cell
-			{ ...cellProps }
-			accessibilityLabel={ getAccessibilityLabel() }
-			accessibilityRole="none"
-			accessibilityHint={
-				/* translators: accessibility text (hint for switches) */
-				__( 'Double tap to change setting' )
-			}
-			onPress={ onPress }
-			editable={ false }
-			value=""
-			disabled={ disabled }
-			disabledStyle={ EMPTY_STYLE }
-		>
-			<Switch
-				value={ value }
-				onValueChange={ onValueChange }
-				disabled={ disabled }
-			/>
-		</Cell>
-	);
-}

package/src/mobile/bottom-sheet/test/index.native.js

@@ -1,24 +0,0 @@
-/**
- * External dependencies
- */
-import { fireEvent, render } from 'test/helpers';
-import { LayoutAnimation } from 'react-native';
-
-/**
- * Internal dependencies
- */
-import BottomSheet from '../';
-
-it( 'does not animate transitions between header heights differing less than 1 pixel', () => {
-	const screen = render( <BottomSheet isVisible /> );
-
-	const bottomSheetHeader = screen.getByTestId( 'bottom-sheet-header' );
-	fireEvent( bottomSheetHeader, 'layout', {
-		nativeEvent: { layout: { height: 123 } },
-	} );
-	fireEvent( bottomSheetHeader, 'layout', {
-		nativeEvent: { layout: { height: 123.001 } },
-	} );
-
-	expect( LayoutAnimation.configureNext ).not.toHaveBeenCalled();
-} );

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

@@ -1,73 +0,0 @@
-/**
- * External dependencies
- */
-import { AccessibilityInfo } from 'react-native';
-import { render, fireEvent } from 'test/helpers';
-
-/**
- * Internal dependencies
- */
-import RangeCell from '../range-cell';
-
-// Avoid errors due to mocked stylesheet files missing required selectors
-jest.mock( '@wordpress/compose', () => ( {
-	...jest.requireActual( '@wordpress/compose' ),
-	withPreferredColorScheme: jest.fn( ( Component ) => ( props ) => (
-		<Component
-			{ ...props }
-			preferredColorScheme={ {} }
-			getStylesFromColorScheme={ jest.fn( () => ( {} ) ) }
-		/>
-	) ),
-} ) );
-
-beforeAll( () => {
-	AccessibilityInfo.isScreenReaderEnabled.mockResolvedValue(
-		Promise.resolve( true )
-	);
-} );
-
-afterAll( () => {
-	AccessibilityInfo.isScreenReaderEnabled.mockReset();
-} );
-
-it( 'allows modifying units via a11y actions', async () => {
-	const mockOpenUnitPicker = jest.fn();
-	const { getByLabelText } = render(
-		<RangeCell
-			label="Opacity"
-			minimumValue={ 0 }
-			maximumValue={ 100 }
-			value={ 50 }
-			onChange={ jest.fn() }
-			openUnitPicker={ mockOpenUnitPicker }
-		/>
-	);
-
-	const opacityControl = getByLabelText( /Opacity/ );
-	fireEvent( opacityControl, 'accessibilityAction', {
-		nativeEvent: { actionName: 'activate' },
-	} );
-
-	expect( mockOpenUnitPicker ).toHaveBeenCalled();
-} );
-
-describe( 'when range lacks an adjustable unit', () => {
-	it( 'disallows modifying units via a11y actions', async () => {
-		const { getByLabelText } = render(
-			<RangeCell
-				label="Opacity"
-				minimumValue={ 0 }
-				maximumValue={ 100 }
-				value={ 50 }
-				onChange={ jest.fn() }
-			/>
-		);
-
-		const opacityControl = getByLabelText( /Opacity/ );
-		const { onAccessibilityAction } = opacityControl.props;
-		expect( () =>
-			onAccessibilityAction( { nativeEvent: { actionName: 'activate' } } )
-		).not.toThrow();
-	} );
-} );