Skip to content

Commit

Permalink
Quality: Removed redundant BaseControl wrapper from UnitControl compo…
Browse files Browse the repository at this point in the history 
…nent (#225)
  • Loading branch information
@t-hamano
t-hamano authored Oct 20, 2024
1 parent b69cabb commit 563d6a2
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 268 deletions.
21 changes: 3 additions & 18 deletions src/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,24 +446,9 @@
}

.ftb-percent-group {
margin-top: 8px;
}

.ftb-font-size-control,
.ftb-width-control {
margin-top: -8px;

.components-input-control.components-input-control {
max-width: 100px;
margin-bottom: 0;
&:has(+ .components-base-control) {
margin-bottom: 16px;
}
}

.ftb-width-control .components-unit-control .components-unit-control__select {
background-color: transparent;
background-image: none;
}

.ftb-line-height-control .components-text-control__input {
display: block;
max-width: 72px;
}
77 changes: 32 additions & 45 deletions src/settings/global-settings/setting-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { createInterpolateElement, useState } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
import {
BaseControl,
Button,
Notice,
Modal,
Expand Down Expand Up @@ -229,54 +228,42 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
<h2>{ __( 'Default table styles', 'flexible-table-block' ) }</h2>
<div className="ftb-global-setting-modal__styles">
<div className="ftb-global-setting-modal__styles-item">
<BaseControl
id="flexible-table-block-global-table-width"
<UnitControl
label={ __( 'Table width', 'flexible-table-block' ) }
className="ftb-width-control"
__nextHasNoMarginBottom
>
<UnitControl
id="flexible-table-block-global-table-width"
units={ tableWidthUnits }
value={ currentOptions.block_style?.table_width }
min={ 0 }
onChange={ ( value ) => {
setCurrentOptions( {
...currentOptions,
block_style: {
...currentOptions.block_style,
table_width: sanitizeUnitValue( value ),
},
} );
} }
size="__unstable-large"
/>
</BaseControl>
units={ tableWidthUnits }
value={ currentOptions.block_style?.table_width }
min={ 0 }
onChange={ ( value ) => {
setCurrentOptions( {
...currentOptions,
block_style: {
...currentOptions.block_style,
table_width: sanitizeUnitValue( value ),
},
} );
} }
size="__unstable-large"
__unstableInputWidth="100px"
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
<BaseControl
id="flexible-table-block-global-table-max-width"
<UnitControl
label={ __( 'Table max width', 'flexible-table-block' ) }
className="ftb-width-control"
__nextHasNoMarginBottom
>
<UnitControl
id="flexible-table-block-global-table-max-width"
units={ tableWidthUnits }
value={ currentOptions.block_style?.table_max_width }
min={ 0 }
onChange={ ( value ) => {
setCurrentOptions( {
...currentOptions,
block_style: {
...currentOptions.block_style,
table_max_width: sanitizeUnitValue( value ),
},
} );
} }
size="__unstable-large"
/>
</BaseControl>
units={ tableWidthUnits }
value={ currentOptions.block_style?.table_max_width }
min={ 0 }
onChange={ ( value ) => {
setCurrentOptions( {
...currentOptions,
block_style: {
...currentOptions.block_style,
table_max_width: sanitizeUnitValue( value ),
},
} );
} }
size="__unstable-large"
__unstableInputWidth="100px"
/>
</div>
<div className="ftb-global-setting-modal__styles-item">
<ToggleGroupControl
Expand Down
48 changes: 17 additions & 31 deletions src/settings/table-caption-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import type { Property, Properties } from 'csstype';
*/
import { __ } from '@wordpress/i18n';
import {
BaseControl,
Button,
Flex,
TextControl,
Expand Down Expand Up @@ -106,38 +105,25 @@ export default function TableCaptionSettings( {
</Button>
</Spacer>
<div className="ftb-base-control-row">
<BaseControl
id="flexible-table-block-caption-font-size"
<UnitControl
label={ __( 'Caption font size', 'flexible-table-block' ) }
className="ftb-font-size-control"
value={ captionStylesObj?.fontSize }
units={ fontSizeUnits }
min={ 0 }
onChange={ onChangeFontSize }
size="__unstable-large"
/>
<TextControl
label={ __( 'Caption line height', 'flexible-table-block' ) }
autoComplete="off"
onChange={ onChangeLineHeight }
step={ 0.1 }
type="number"
value={ captionStylesObj?.lineHeight || '' }
min={ 0 }
__nextHasNoMarginBottom
>
<UnitControl
id="flexible-table-block-caption-font-size"
value={ captionStylesObj?.fontSize }
units={ fontSizeUnits }
min={ 0 }
onChange={ onChangeFontSize }
size="__unstable-large"
/>
</BaseControl>
<BaseControl
id="flexible-table-block-caption-line-height"
className="ftb-line-height-control"
__nextHasNoMarginBottom
>
<TextControl
label={ __( 'Caption line height', 'flexible-table-block' ) }
autoComplete="off"
onChange={ onChangeLineHeight }
step={ 0.1 }
type="number"
value={ captionStylesObj?.lineHeight || '' }
min={ 0 }
__nextHasNoMarginBottom
__next40pxDefaultSize
/>
</BaseControl>
__next40pxDefaultSize
/>
</div>
<PaddingControl
label={ __( 'Caption padding', 'flexible-table-block' ) }
Expand Down
104 changes: 42 additions & 62 deletions src/settings/table-cell-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,73 +223,53 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell
</Button>
</Spacer>
<div className="ftb-base-control-row">
<BaseControl
id="flexible-table-block-cell-font-size"
<UnitControl
label={ __( 'Cell font size', 'flexible-table-block' ) }
className="ftb-font-size-control"
__nextHasNoMarginBottom
>
<UnitControl
id="flexible-table-block-cell-font-size"
value={ cellStylesObj?.fontSize }
units={ fontSizeUnits }
min={ 0 }
onChange={ onChangeFontSize }
size="__unstable-large"
/>
</BaseControl>
<BaseControl
id="flexible-table-block-cell-line-height"
className="ftb-line-height-control"
value={ cellStylesObj?.fontSize }
units={ fontSizeUnits }
min={ 0 }
onChange={ onChangeFontSize }
size="__unstable-large"
/>
<TextControl
label={ __( 'Cell line height', 'flexible-table-block' ) }
value={ cellStylesObj?.lineHeight || '' }
autoComplete="off"
type="number"
step={ 0.1 }
min={ 0 }
onChange={ onChangeLineHeight }
__nextHasNoMarginBottom
>
<TextControl
label={ __( 'Cell line height', 'flexible-table-block' ) }
value={ cellStylesObj?.lineHeight || '' }
autoComplete="off"
type="number"
step={ 0.1 }
min={ 0 }
onChange={ onChangeLineHeight }
__nextHasNoMarginBottom
__next40pxDefaultSize
/>
</BaseControl>
__next40pxDefaultSize
/>
</div>
<BaseControl
id="flexible-table-block-cell-width"
<UnitControl
label={ __( 'Cell width', 'flexible-table-block' ) }
className="ftb-width-control"
__nextHasNoMarginBottom
value={ cellStylesObj?.width }
units={ cellWidthUnits }
min={ 0 }
onChange={ onChangeWidth }
size="__unstable-large"
__unstableInputWidth="calc(50% - 8px)"
/>
<ButtonGroup
aria-label={ __( 'Cell percentage width', 'flexible-table-block' ) }
className="ftb-percent-group"
>
<UnitControl
id="flexible-table-block-cell-width"
aria-label={ __( 'Cell width', 'flexible-table-block' ) }
value={ cellStylesObj?.width }
units={ cellWidthUnits }
min={ 0 }
onChange={ onChangeWidth }
size="__unstable-large"
/>
<ButtonGroup
aria-label={ __( 'Cell percentage width', 'flexible-table-block' ) }
className="ftb-percent-group"
>
{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
const isPressed = cellStylesObj?.width === `${ perWidth }%`;
return (
<Button
key={ perWidth }
variant={ isPressed ? 'primary' : undefined }
onClick={ () => onChangeWidth( isPressed ? '' : `${ perWidth }%` ) }
size="small"
>
{ `${ perWidth }%` }
</Button>
);
} ) }
</ButtonGroup>
</BaseControl>
{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
const isPressed = cellStylesObj?.width === `${ perWidth }%`;
return (
<Button
key={ perWidth }
variant={ isPressed ? 'primary' : undefined }
onClick={ () => onChangeWidth( isPressed ? '' : `${ perWidth }%` ) }
size="small"
>
{ `${ perWidth }%` }
</Button>
);
} ) }
</ButtonGroup>
<hr />
<ColorControl
label={ __( 'Cell text color', 'flexible-table-block' ) }
Expand Down
Loading

0 comments on commit 563d6a2

Please sign in to comment.