Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BaseControl: Add box-sizing resets #42889

Merged
merged 6 commits into from
Aug 3, 2022
Merged

BaseControl: Add box-sizing resets #42889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
881f21c
BaseControl: Add box-sizing reset
mirka Aug 2, 2022
20c77ef
Remove unneeded box-sizing declarations
mirka Aug 2, 2022
7c88151
Update snapshots
mirka Aug 2, 2022
00e81fa
Add changelog
mirka Aug 2, 2022
f46c873
Update more snapshots
mirka Aug 2, 2022
9646520
Merge branch 'trunk' into add/base-control-box-sizing
mirka Aug 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
.emotion-0 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
box-sizing: border-box;
}

.emotion-0 *,
.emotion-0 *::before,
.emotion-0 *::after {
box-sizing: inherit;
}

.components-panel__row .emotion-2 {
Expand Down
2 changes: 2 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@
- `BorderControl`: Ensure box-sizing is reset for the control ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
- `InputControl`: Fix acceptance of falsy values in controlled updates ([#42484](https://github.com/WordPress/gutenberg/pull/42484/)).
- `Tooltip (Experimental)`, `CustomSelectControl`, `TimePicker`: Add missing font-size styles which were necessary in non-WordPress contexts ([#42844](https://github.com/WordPress/gutenberg/pull/42844/)).
- `TextControl`, `TextareaControl`, `ToggleGroupControl`: Add `box-sizing` reset style ([#42889](https://github.com/WordPress/gutenberg/pull/42889)).
- `Popover`: fix arrow placement and design ([#42874](https://github.com/WordPress/gutenberg/pull/42874/)).

### Enhancements

- Add `box-sizing` reset style mixin to utils ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
- `ResizableBox`: Make tooltip background match `Tooltip` component's ([#42800](https://github.com/WordPress/gutenberg/pull/42800)).
- `UnitControl`: Update unit dropdown design for the large size variant ([#42000](https://github.com/WordPress/gutenberg/pull/42000)).
- `BaseControl`: Add `box-sizing` reset style ([#42889](https://github.com/WordPress/gutenberg/pull/42889)).

### Internal

Expand Down
4 changes: 3 additions & 1 deletion packages/components/src/base-control/styles/base-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,14 @@ import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import { font, COLORS } from '../../utils';
import { font, COLORS, boxSizingReset } from '../../utils';
import { space } from '../../ui/utils/space';

export const Wrapper = styled.div`
font-family: ${ font( 'default.fontFamily' ) };
font-size: ${ font( 'default.fontSize' ) };

${ boxSizingReset }
`;

const deprecatedMarginField = ( { __nextHasNoMarginBottom = false } ) => {
Expand Down
5 changes: 0 additions & 5 deletions packages/components/src/focal-point-picker/styles/focal-point-picker-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,12 @@ import { COLORS } from '../../utils';

export const MediaWrapper = styled.div`
background-color: transparent;
box-sizing: border-box;
text-align: center;
width: 100%;
`;

export const MediaContainer = styled.div`
align-items: center;
box-sizing: border-box;
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
cursor: pointer;
display: inline-flex;
Expand All @@ -44,7 +42,6 @@ export const MediaContainer = styled.div`

export const MediaPlaceholder = styled.div`
background: ${ COLORS.lightGray[ 300 ] };
box-sizing: border-box;
height: 170px;
max-width: 280px;
min-width: 200px;
Expand All @@ -61,7 +58,6 @@ export const ControlWrapper = styled( Flex )`
`;

export const GridView = styled.div`
box-sizing: border-box;
left: 50%;
opacity: 0;
overflow: hidden;
Expand All @@ -80,7 +76,6 @@ export const GridView = styled.div`
`;

export const GridLine = styled.div`
box-sizing: border-box;
background: white;
box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
position: absolute;
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/focal-point-picker/styles/focal-point-style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { COLORS } from '../../utils';

export const FocalPointWrapper = styled.div`
background-color: transparent;
box-sizing: border-box;
cursor: grab;
height: 30px;
margin: -15px 0 0 -15px;
Expand Down
12 changes: 0 additions & 12 deletions packages/components/src/range-control/styles/range-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const thumbSize = 12;

export const Root = styled.div`
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
align-items: flex-start;
display: inline-flex;
justify-content: flex-start;
Expand All @@ -45,7 +44,6 @@ const wrapperMargin = ( { marks }: WrapperProps ) =>
css( { marginBottom: marks ? 16 : undefined } );

export const Wrapper = styled.div< WrapperProps >`
box-sizing: border-box;
color: ${ COLORS.blue.medium.focus };
display: block;
flex: 1;
Expand Down Expand Up @@ -81,7 +79,6 @@ const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {

export const Rail = styled.span`
background-color: ${ COLORS.lightGray[ 600 ] };
box-sizing: border-box;
left: 0;
pointer-events: none;
right: 0;
Expand All @@ -108,7 +105,6 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
export const Track = styled.span`
background-color: currentColor;
border-radius: ${ railHeight }px;
box-sizing: border-box;
height: ${ railHeight }px;
pointer-events: none;
display: block;
Expand All @@ -120,7 +116,6 @@ export const Track = styled.span`
`;

export const MarksWrapper = styled.span`
box-sizing: border-box;
display: block;
pointer-events: none;
position: relative;
Expand All @@ -141,7 +136,6 @@ const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
};

export const Mark = styled.span`
box-sizing: border-box;
height: ${ thumbSize }px;
left: 0;
position: absolute;
Expand All @@ -158,7 +152,6 @@ const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
};

export const MarkLabel = styled.span`
box-sizing: border-box;
color: ${ COLORS.lightGray[ 600 ] };
left: 0;
font-size: 11px;
Expand All @@ -181,7 +174,6 @@ const thumbColor = ( { disabled }: ThumbProps ) =>

export const ThumbWrapper = styled.span`
align-items: center;
box-sizing: border-box;
display: flex;
height: ${ thumbSize }px;
justify-content: center;
Expand Down Expand Up @@ -223,7 +215,6 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
export const Thumb = styled.span< ThumbProps >`
align-items: center;
border-radius: 50%;
box-sizing: border-box;
height: 100%;
outline: 0;
position: absolute;
Expand Down Expand Up @@ -272,7 +263,6 @@ const tooltipPosition = ( { position }: TooltipProps ) => {
export const Tooltip = styled.span< TooltipProps >`
background: rgba( 0, 0, 0, 0.8 );
border-radius: 2px;
box-sizing: border-box;
color: white;
display: inline-block;
font-size: 12px;
Expand All @@ -298,7 +288,6 @@ export const Tooltip = styled.span< TooltipProps >`
// @todo: Refactor RangeControl with latest HStack configuration
// @wordpress/components/ui/hstack.
export const InputNumber = styled( NumberControl )`
box-sizing: border-box;
display: inline-block;
font-size: 13px;
margin-top: 0;
Expand All @@ -312,7 +301,6 @@ export const InputNumber = styled( NumberControl )`
`;

export const ActionRightWrapper = styled.span`
box-sizing: border-box;
display: block;
margin-top: 0;

Expand Down
1 change: 0 additions & 1 deletion packages/components/src/select-control/styles/select-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,6 @@ export const Select = styled.select< SelectProps >`
export const DownArrowWrapper = styled.div`
align-items: center;
bottom: 0;
box-sizing: border-box;
display: flex;
padding: 0 4px;
pointer-events: none;
Expand Down
14 changes: 14 additions & 0 deletions packages/components/src/toggle-group-control/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
.emotion-0 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
box-sizing: border-box;
}

.emotion-0 *,
.emotion-0 *::before,
.emotion-0 *::after {
box-sizing: inherit;
}

.emotion-2 {
Expand Down Expand Up @@ -257,6 +264,13 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
.emotion-0 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
box-sizing: border-box;
}

.emotion-0 *,
.emotion-0 *::before,
.emotion-0 *::after {
box-sizing: inherit;
}

.emotion-2 {
Expand Down
28 changes: 28 additions & 0 deletions .../src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
.emotion-0 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
box-sizing: border-box;
}

.emotion-0 *,
.emotion-0 *::before,
.emotion-0 *::after {
box-sizing: inherit;
}

.emotion-2 {
Expand Down Expand Up @@ -67,6 +74,13 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
.emotion-0 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
box-sizing: border-box;
}

.emotion-0 *,
.emotion-0 *::before,
.emotion-0 *::after {
box-sizing: inherit;
}

.emotion-2 {
Expand Down Expand Up @@ -116,6 +130,13 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
.emotion-0 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
box-sizing: border-box;
}

.emotion-0 *,
.emotion-0 *::before,
.emotion-0 *::after {
box-sizing: inherit;
}

.emotion-2 {
Expand Down Expand Up @@ -179,6 +200,13 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
.emotion-0 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
box-sizing: border-box;
}

.emotion-0 *,
.emotion-0 *::before,
.emotion-0 *::after {
box-sizing: inherit;
}

.emotion-2 {
Expand Down