Skip to content

Commit

Permalink
Spacing presets: Modify the styling of the input controls when in unl…
Browse files Browse the repository at this point in the history
…inked mode in order to better differentiate sides (#44141)
  • Loading branch information
glendaviesnz authored Sep 29, 2022
1 parent b58ff34 commit e8c1805
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 34 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { __experimentalText as Text } from '@wordpress/components';
import { BaseControl } from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -68,8 +73,15 @@ export default function SpacingSizesControl( {
};

return (
<fieldset role="region" className="component-spacing-sizes-control">
<Text as="legend">{ label }</Text>
<fieldset
role="region"
className={ classnames( 'component-spacing-sizes-control', {
'is-unlinked': ! isLinked,
} ) }
>
<BaseControl.VisualLabel as="legend">
{ label }
</BaseControl.VisualLabel>
{ ! hasOneSide && (
<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ import classnames from 'classnames';
import { useState, useMemo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import {
BaseControl,
Button,
RangeControl,
CustomSelectControl,
__experimentalUnitControl as UnitControl,
__experimentalHStack as HStack,
__experimentalText as Text,
__experimentalUseCustomUnits as useCustomUnits,
__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
} from '@wordpress/components';
Expand Down Expand Up @@ -167,21 +167,21 @@ export default function SpacingInputControl( {
<>
{ side !== 'all' && (
<HStack className="components-spacing-sizes-control__side-labels">
<Text className="components-spacing-sizes-control__side-label">
<BaseControl.VisualLabel className="components-spacing-sizes-control__side-label">
{ LABELS[ side ] }
</Text>
</BaseControl.VisualLabel>

{ showHint && (
<Text className="components-spacing-sizes-control__hint-single">
<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-single">
{ currentValueHint }
</Text>
</BaseControl.VisualLabel>
) }
</HStack>
) }
{ side === 'all' && showHint && (
<Text className="components-spacing-sizes-control__hint-all">
<BaseControl.VisualLabel className="components-spacing-sizes-control__hint-all">
{ currentValueHint }
</Text>
</BaseControl.VisualLabel>
) }

{ ! disableCustomSpacingSizes && (
Expand Down Expand Up @@ -256,6 +256,7 @@ export default function SpacingInputControl( {
marks={ marks }
label={ ariaLabel }
hideLabelFromVision={ true }
__nextHasNoMarginBottom={ true }
/>
) }
{ ! showRangeControl && ! showCustomValueControl && (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.tools-panel-item-spacing {
display: grid;
grid-template-columns: auto 1fr auto;
grid-row-gap: $grid-unit-05;
align-items: center;
grid-template-rows: 25px auto;
}

.component-spacing-sizes-control {
Expand All @@ -17,21 +18,34 @@
align-self: center;
}

.components-base-control__label {
margin-bottom: 0;
height: $grid-unit-20;
}

.components-spacing-sizes-control__side-labels {
grid-column: 1 / 1;
min-height: 30px;
justify-content: left;
height: $grid-unit-20;
margin-top: $grid-unit-15;
}

.components-spacing-sizes-control__side-label {
grid-column: 1 / 1;
justify-self: left;
margin-bottom: 0;
}

.components-spacing-sizes-control__hint-single {
margin-top: 0;
margin-left: 0;
&.is-unlinked {
.components-range-control.components-spacing-sizes-control__range-control {
margin-top: $grid-unit-15;
}
}

.components-spacing-sizes-control__hint-single,
.components-spacing-sizes-control__hint-all {
color: $gray-700;
font-size: 12px;
margin-bottom: 0;
}

.components-spacing-sizes-control__hint-all {
Expand All @@ -47,6 +61,11 @@
grid-row: 1 / 1;
justify-self: end;
padding: 0;
&.is-small.has-icon {
padding: 0;
min-width: $icon-size;
height: $grid-unit-20;
}
}

.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
Expand All @@ -56,13 +75,11 @@
.components-spacing-sizes-control__custom-toggle-single {
grid-column: 3 / 3;
justify-self: end;
}

.components-spacing-sizes-control__custom-toggle-all,
.components-spacing-sizes-control__custom-toggle-single {
&.is-small.has-icon {
padding: 0;
min-width: $icon-size;
height: $grid-unit-20;
margin-top: $grid-unit-15;
}
}

Expand All @@ -75,7 +92,6 @@
.components-spacing-sizes-control__custom-value-range {
grid-column: span 2;
margin-left: $grid-unit-10;
padding-right: $grid-unit-10;
height: 30px;
}

Expand All @@ -85,12 +101,7 @@

.components-spacing-sizes-control__range-control {
grid-column: span 3;
padding-right: $grid-unit-10;
height: 30px;
}

.components-range-control__wrapper {
margin-bottom: 0;
height: 40px;
}

.components-range-control__mark {
Expand All @@ -112,13 +123,6 @@
z-index: 3;
}

.components-spacing-sizes-control__side-label {
margin-right: $grid-unit-05;
grid-column: 1 / 1;
justify-self: left;
font-size: 12px;
}

.components-spacing-sizes-control__custom-select-control {
grid-column: span 3;
}
Expand Down

0 comments on commit e8c1805

Please sign in to comment.