Skip to content

Commit

Permalink
Label components: improve consistency by setting to 8px margin-bottom (
Browse files Browse the repository at this point in the history
andrewserong authored Jan 13, 2022
1 parent 90a583a commit b4139c2
Showing 7 changed files with 11 additions and 12 deletions.
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
margin-bottom: $grid-unit-15;

legend {
padding-bottom: $grid-unit-05;
margin-bottom: $grid-unit-10;
}

.components-border-radius-control__wrapper {
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@

### Bug Fix

- Update label spacing for the `BoxControl`, `CustomGradientPicker`, `FormTokenField`, `InputControl`, and `ToolsPanel` components to use a bottom margin of `8px` for consistency. ([#37844](https://github.com/WordPress/gutenberg/pull/37844))
- Add missing styles to the `BaseControl.VisualLabel` component. ([#37747](https://github.com/WordPress/gutenberg/pull/37747))
- Prevent keyDown events from propagating up in `CustomSelectControl` ([#30557](https://github.com/WordPress/gutenberg/pull/30557))
- Mark `children` prop as optional in `SelectControl` ([#37872](https://github.com/WordPress/gutenberg/pull/37872))
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@ export const Root = styled.div`

export const Header = styled( Flex )`
color: ${ COLORS.ui.label };
padding-bottom: 8px;
margin-bottom: 8px;
`;

export const HeaderControlWrapper = styled( Flex )`
1 change: 0 additions & 1 deletion packages/components/src/custom-gradient-picker/style.scss
Original file line number Diff line number Diff line change
@@ -113,7 +113,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
.components-custom-gradient-picker {
.components-input-control__label {
line-height: 1;
padding-bottom: $grid-unit-10 !important;
}
label {
text-transform: uppercase;
2 changes: 1 addition & 1 deletion packages/components/src/form-token-field/style.scss
Original file line number Diff line number Diff line change
@@ -53,7 +53,7 @@

.components-form-token-field__label {
display: inline-block;
margin-bottom: $grid-unit-05;
margin-bottom: $grid-unit-10;
}

.components-form-token-field__help {
Original file line number Diff line number Diff line change
@@ -227,30 +227,31 @@ export const Input = styled.input< InputProps >`
}
`;

const labelPadding = ( {
const labelMargin = ( {
labelPosition,
}: {
labelPosition?: LabelPosition;
} ) => {
let paddingBottom = 4;
let marginBottom = 8;

if ( labelPosition === 'edge' || labelPosition === 'side' ) {
paddingBottom = 0;
marginBottom = 0;
}

return css( { paddingTop: 0, paddingBottom } );
return css( { marginTop: 0, marginRight: 0, marginBottom, marginLeft: 0 } );
};

const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
&&& {
box-sizing: border-box;
color: currentColor;
display: block;
margin: 0;
padding-top: 0;
padding-bottom: 0;
max-width: 100%;
z-index: 1;
${ labelPadding }
${ labelMargin }
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2 changes: 0 additions & 2 deletions packages/components/src/tools-panel/styles.ts
Original file line number Diff line number Diff line change
@@ -130,8 +130,6 @@ export const ToolsPanelItem = css`
*/
&& ${ LabelWrapper } {
label {
margin-bottom: ${ space( 2 ) };
padding-bottom: 0;
line-height: 1.4em;
}
}

0 comments on commit b4139c2

Please sign in to comment.