[RNMobile][Tech debt] Remove separatorType prop from TextControl, Ran…

…geControl... (#21365) * move separatorType to the panelBody * fix rest of components * fix gallery * use Childrem.toArray * revert one separatorType * remove not needed separator type and use PanelBody instead * revert some changes to prepare for the new approach * revert panel body * remove rest of separatorTypes and add view that covers the last separator The exception here are BottomSheet.Cell that are used directly * fix video settings * remove top margin from PanelActions * fix separatorType when icon is not set
WordPress · May 11, 2020 · f6a401b · f6a401b
1 parent af44574
commit f6a401b
Show file tree

Hide file tree

Showing 17 changed files with 84 additions and 99 deletions.
diff --git a/...ages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js b/...ages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js
@@ -13,16 +13,13 @@ export default function PanelColorGradientSettings( { settings, title } ) {
  <BottomSheetConsumer>
  { ( { onReplaceSubsheet } ) =>
  settings.map(
- (
- {
- onColorChange,
- colorValue,
- onGradientChange,
- gradientValue,
- label,
- },
- index
- ) => (
+ ( {
+ onColorChange,
+ colorValue,
+ onGradientChange,
+ gradientValue,
+ label,
+ } ) => (
  <ColorControl
  onPress={ () => {
  onReplaceSubsheet( 'Color', {
@@ -36,11 +33,6 @@ export default function PanelColorGradientSettings( { settings, title } ) {
  key={ `color-setting-${ label }` }
  label={ label }
  color={ gradientValue || colorValue }
- separatorType={
- index !== settings.length - 1
- ? 'fullWidth'
- : 'none'
- }
  />
  )
  )

diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
@@ -24,6 +24,7 @@ import {
  TextControl,
  ToggleControl,
  PanelBody,
+ PanelActions,
  RangeControl,
  ToolbarGroup,
  ToolbarButton,
@@ -325,19 +326,13 @@ class ButtonEdit extends Component {
  autoFocus={
  ! isCompatibleWithSettings && Platform.OS === 'ios'
  }
- separatorType={
- isCompatibleWithSettings ? 'fullWidth' : 'leftMargin'
- }
  keyboardType="url"
  />
  <ToggleControl
  icon={ ! isCompatibleWithSettings && external }
  label={ __( 'Open in new tab' ) }
  checked={ linkTarget === '_blank' }
  onChange={ this.onChangeOpenInNewTab }
- separatorType={
- isCompatibleWithSettings ? 'fullWidth' : 'leftMargin'
- }
  />
  <TextControl
  icon={ ! isCompatibleWithSettings && LinkRelIcon }
@@ -348,9 +343,6 @@ class ButtonEdit extends Component {
  onSubmit={ this.dismissSheet }
  autoCapitalize="none"
  autoCorrect={ false }
- separatorType={
- isCompatibleWithSettings ? 'none' : 'fullWidth'
- }
  keyboardType="url"
  />
  </>
@@ -441,6 +433,13 @@ class ButtonEdit extends Component {
  const backgroundColor = this.getBackgroundColor();
  const textColor = this.getTextColor();
 
+ const actions = [
+ {
+ label: __( 'Remove link' ),
+ onPress: this.onClearSettings,
+ },
+ ];
+
  return (
  <View onLayout={ this.onLayout }>
  { this.getPlaceholderWidth( placeholderText ) }
@@ -514,13 +513,10 @@ class ButtonEdit extends Component {
  onClose={ this.onHideLinkSettings }
  hideHeader
  >
- { this.getLinkSettings( url, rel, linkTarget ) }
- <BottomSheet.Cell
- label={ __( 'Remove link' ) }
- labelStyle={ styles.clearLinkButton }
- separatorType={ 'none' }
- onPress={ this.onClearSettings }
- />
+ <PanelBody style={ styles.linkSettingsPanel }>
+ { this.getLinkSettings( url, rel, linkTarget ) }
+ </PanelBody>
+ <PanelActions actions={ actions } />
  </BottomSheet>
 
  <ColorEdit { ...this.props } />
@@ -532,7 +528,6 @@ class ButtonEdit extends Component {
  maximumValue={ MAX_BORDER_RADIUS_VALUE }
  value={ borderRadiusValue }
  onChange={ this.onChangeBorderRadius }
- separatorType="none"
  />
  </PanelBody>
  <PanelBody title={ __( 'Link Settings' ) }>

diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
@@ -125,7 +125,6 @@ function ColumnsEditContainer( {
  }
  min={ MIN_COLUMNS_NUMBER }
  max={ columnCount + 1 }
- separatorType={ 'none' }
  type="stepper"
  />
  </PanelBody>

diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -202,7 +202,6 @@ const Cover = ( {
  label={ __( 'Minimum height in pixels' ) }
  minimumValue={ COVER_MIN_HEIGHT }
  maximumValue={ COVER_MAX_HEIGHT }
- separatorType={ 'none' }
  value={ CONTAINER_HEIGHT }
  onChange={ onHeightChange }
  style={ styles.rangeCellContainer }
@@ -214,7 +213,6 @@ const Cover = ( {
  label={ __( 'Background Opacity' ) }
  minimumValue={ 0 }
  maximumValue={ 100 }
- separatorType={ 'none' }
  value={ dimRatio }
  onChange={ onOpactiyChange }
  style={ styles.rangeCellContainer }

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -54,17 +54,6 @@ const PLACEHOLDER_TEXT = Platform.select( {
  native: __( 'ADD MEDIA' ),
 } );
 
-// currently this is needed for consistent controls UI on mobile
-// this can be removed after control components settle on consistent defaults
-const MOBILE_CONTROL_PROPS = Platform.select( {
- web: {},
- native: { separatorType: 'fullWidth' },
-} );
-const MOBILE_CONTROL_PROPS_SEPARATOR_NONE = Platform.select( {
- web: {},
- native: { separatorType: 'none' },
-} );
-
 const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.select( {
  web: {},
  native: { type: 'stepper' },
@@ -385,10 +374,6 @@ class GalleryEdit extends Component {
  const imageSizeOptions = this.getImagesSizeOptions();
  const shouldShowSizeOptions =
  hasImages && ! isEmpty( imageSizeOptions );
- // This is needed to fix a separator fence-post issue on mobile.
- const mobileLinkToProps = shouldShowSizeOptions
- ? MOBILE_CONTROL_PROPS
- : MOBILE_CONTROL_PROPS_SEPARATOR_NONE;
 
  return (
  <>
@@ -401,30 +386,26 @@ class GalleryEdit extends Component {
  onChange={ this.setColumnsNumber }
  min={ 1 }
  max={ Math.min( MAX_COLUMNS, images.length ) }
- { ...MOBILE_CONTROL_PROPS }
  { ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
  required
  />
  ) }
 
  <ToggleControl
  label={ __( 'Crop images' ) }
- { ...MOBILE_CONTROL_PROPS }
  checked={ !! imageCrop }
  onChange={ this.toggleImageCrop }
  help={ this.getImageCropHelp }
  />
  <SelectControl
  label={ __( 'Link to' ) }
- { ...mobileLinkToProps }
  value={ linkTo }
  onChange={ this.setLinkTo }
  options={ linkOptions }
  />
  { shouldShowSizeOptions && (
  <SelectControl
  label={ __( 'Images size' ) }
- { ...MOBILE_CONTROL_PROPS_SEPARATOR_NONE }
  value={ sizeSlug }
  options={ imageSizeOptions }
  onChange={ this.updateImagesSize }

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -429,7 +429,6 @@ export class ImageEdit extends React.Component {
  label={ __( 'Alt Text' ) }
  value={ alt || '' }
  valuePlaceholder={ __( 'None' ) }
- separatorType={ 'none' }
  onChangeValue={ this.updateAlt }
  />
  </PanelBody>

diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js
@@ -140,18 +140,12 @@ class LatestPostsEdit extends Component {
  label={ __( 'Show post content' ) }
  checked={ displayPostContent }
  onChange={ this.onSetDisplayPostContent }
- separatorType={
- displayPostContent ? 'fullWidth' : 'none'
- }
  />
  { displayPostContent && (
  <ToggleControl
  label={ __( 'Only show excerpt' ) }
  checked={ displayExcerptPostContent }
  onChange={ this.onSetDisplayPostContentRadio }
- separatorType={
- displayExcerptPostContent ? 'fullWidth' : 'none'
- }
  />
  ) }
  { displayPostContent && displayExcerptPostContent && (
@@ -161,7 +155,6 @@ class LatestPostsEdit extends Component {
  onChange={ this.onSetExcerptLength }
  min={ MIN_EXCERPT_LENGTH }
  max={ MAX_EXCERPT_LENGTH }
- separatorType="none"
  />
  ) }
  </PanelBody>
@@ -171,10 +164,8 @@ class LatestPostsEdit extends Component {
  label={ __( 'Display post date' ) }
  checked={ displayPostDate }
  onChange={ this.onSetDisplayPostDate }
- separatorType="none"
  />
  </PanelBody>
-
  <PanelBody title={ __( 'Sorting and filtering' ) }>
  <QueryControls
  { ...{ order, orderBy } }

diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js
@@ -70,7 +70,6 @@ const SpacerEdit = ( {
  label={ __( 'Height in pixels' ) }
  min={ MIN_SPACER_HEIGHT }
  max={ Math.max( MAX_SPACER_HEIGHT, height ) }
- separatorType={ 'none' }
  value={ height }
  onChange={ updateHeight }
  step={ Platform.OS === 'web' ? 10 : 1 }

diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js
@@ -65,7 +65,6 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
  { value: 'metadata', label: __( 'Metadata' ) },
  { value: 'none', label: __( 'None' ) },
  ] }
- separatorType={ 'none' }
  />
  </>
  );

diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js
@@ -163,8 +163,6 @@ function DropdownMenu( {
  leftAlign={ true }
  isSelected={ control.isActive }
  separatorType={
- indexOfControl ===
- controlSet.length - 1 ||
  Platform.OS === 'android'
  ? 'none'
  : 'leftMargin'

diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js
@@ -191,7 +191,7 @@ class BottomSheetCell extends Component {
  case 'none':
  return undefined;
  case undefined:
- if ( showValue && icon !== undefined ) {
+ if ( showValue && icon ) {
  return leftMarginStyle;
  }
  return defaultSeparatorStyle;

diff --git a/packages/components/src/panel/actions.native.js b/packages/components/src/panel/actions.native.js
@@ -7,28 +7,35 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import { TextControl } from '@wordpress/components';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './actions.scss';
+import BottomSeparatorCover from './bottom-separator-cover';
 
-function PanelActions( { actions } ) {
+function PanelActions( { actions, getStylesFromColorScheme } ) {
  return (
- <View style={ styles.panelActionsContainer }>
+ <View
+ style={ getStylesFromColorScheme(
+ styles.panelActionsContainer,
+ styles.panelActionsContainerDark
+ ) }
+ >
  { actions.map( ( { label, onPress } ) => {
  return (
  <TextControl
  label={ label }
- separatorType="topFullWidth"
  onPress={ onPress }
  labelStyle={ styles.defaultLabelStyle }
  key={ label }
  />
  );
  } ) }
+ <BottomSeparatorCover />
  </View>
  );
 }
 
-export default PanelActions;
+export default withPreferredColorScheme( PanelActions );
diff --git a/packages/components/src/panel/actions.native.scss b/packages/components/src/panel/actions.native.scss
@@ -1,5 +1,10 @@
 .panelActionsContainer {
- padding-top: 24;
+ border-top-color: $light-gray-400;
+ border-top-width: 1px;
+}
+
+.panelActionsContainerDark {
+ border-top-color: $gray-70;
 }
 
 .defaultLabelStyle {

diff --git a/packages/components/src/panel/body.native.js b/packages/components/src/panel/body.native.js
@@ -3,33 +3,22 @@
  */
 import { Text, View } from 'react-native';
 
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import styles from './body.scss';
+import BottomSeparatorCover from './bottom-separator-cover';
 
-export class PanelBody extends Component {
- constructor() {
- super( ...arguments );
- this.state = {};
- }
-
- render() {
- const { children, title, style = {} } = this.props;
-
- return (
- <View style={ [ styles.panelContainer, style ] }>
- { title && (
- <Text style={ styles.sectionHeaderText }>{ title }</Text>
- ) }
- { children }
- </View>
- );
- }
+export function PanelBody( { children, title, style = {} } ) {
+ return (
+ <View style={ [ styles.panelContainer, style ] }>
+ { title && (
+ <Text style={ styles.sectionHeaderText }>{ title }</Text>
+ ) }
+ { children }
+ <BottomSeparatorCover />
+ </View>
+ );
 }
 
 export default PanelBody;