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

Jump to bottom

Update components radius #64368

Merged
merged 13 commits into from
Aug 16, 2024
Merged

Update components radius #64368

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d8ba1b1
Update components radius
jameskoster Aug 7, 2024
d80f545
Guideline type
jameskoster Aug 8, 2024
f19feb0
Remove toolbar group background
jameskoster Aug 8, 2024
1dd8287
Revert toolbar changes
jameskoster Aug 12, 2024
935ffd0
Changelog
jameskoster Aug 12, 2024
3c2a4cf
Update packages/components/CHANGELOG.md
jameskoster Aug 13, 2024
460266f
Rebase
jameskoster Aug 13, 2024
9378eef
Format
jameskoster Aug 13, 2024
f6b97bf
Changelog
jameskoster Aug 15, 2024
83380d0
Remove radiusBlockUi config value
jameskoster Aug 15, 2024
80a91d8
Update snapshot
jameskoster Aug 15, 2024
161854e
Rebase
jameskoster Aug 15, 2024
92fbdbb
Remove controlBorderRadius
jameskoster Aug 15, 2024
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
2 changes: 1 addition & 1 deletion packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ $radius-x-small: 1px; // Applied to elements like buttons nested within primit
$radius-small: 2px; // Applied to most primitives.
$radius-medium: 4px; // Applied to containers with smaller padding.
$radius-large: 8px; // Applied to containers with larger padding.
$radius-full: 9999px; // For lozenges.
$radius-full: 9999px; // For pills.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Thank you for this. As a non-native speaker, the difference between tablet, pill, lozenge, pellet, capsule, etc. makes my head hurt. pill does like a word that's more common than lozenge.

$radius-round: 50%; // For circles and ovals.

/**
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
- `SelectControl`: Infer `value` type from `options` ([#64069](https://github.com/WordPress/gutenberg/pull/64069)).
- `Guide`: Add `__next40pxDefaultSize` to buttons ([#64181](https://github.com/WordPress/gutenberg/pull/64181)).
- `SelectControl`: Pass through `options` props ([#64211](https://github.com/WordPress/gutenberg/pull/64211)).
- `AlignmentMatrixControl`, `AnglePickerControl`, `BorderControl`, `ButtonGroup`, `Button`, `CircularOptionPicker`, `ColorIndicator`, `ColorPalette`, `CustomGradientPicker`, `DropZone`, `DropdownMenuV2`, `FocalPointPicker`, `Guide`, `Modal`, `Placeholder`, `Popover`, `ProgressBar`, `RadioControl`, `Snackbar`, `TabPanel`, `Text`, `ToggleGroupControl`, `ToolbarGroup`, `Toolbar`, `Tooltip`, `UnitControl`: Adopt radius scale. ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
jameskoster marked this conversation as resolved.
Show resolved Hide resolved

### Internal

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import { COLORS } from '../../utils';
import { COLORS, CONFIG } from '../../utils';
import type {
AlignmentMatrixControlProps,
AlignmentMatrixControlCellProps,
} from '../types';

export const rootBase = () => {
return css`
border-radius: 2px;
border-radius: ${ CONFIG.radiusMedium };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you mean to increase this to 4px? I don't see it in the list of intended changes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My feeling is this falls into 'small container' territory. That said, I don't think the radius of this component is visually rendered anywhere?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's correct. But why do we even need the border-radius then? It feels like it's redundant.

If it's there just for the case when someone provides a custom background color, then why can't the consumer also add a border-radius when they need it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, but it seems safer to adjust the value here rather than remove it? We could remove it in a follow up with a dedicated changelog entry?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't mind keeping it if that's what you prefer 👍

box-sizing: border-box;
direction: ltr;
display: grid;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const CIRCLE_SIZE = 32;
const INNER_CIRCLE_SIZE = 6;

export const CircleRoot = styled.div`
border-radius: 50%;
border-radius: ${ CONFIG.radiusRound };
border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
box-sizing: border-box;
cursor: grab;
Expand All @@ -41,7 +41,7 @@ export const CircleIndicatorWrapper = styled.div`

export const CircleIndicator = styled.div`
background: ${ COLORS.theme.accent };
border-radius: 50%;
border-radius: ${ CONFIG.radiusRound };
box-sizing: border-box;
display: block;
left: 50%;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/border-control/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const colorIndicatorWrapper = (
const { style } = border || {};

return css`
border-radius: 9999px;
border-radius: ${ CONFIG.radiusFull };
border: 2px solid transparent;
${ style ? colorIndicatorBorder( border ) : undefined }
width: ${ size === '__unstable-large' ? '24px' : '22px' };
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/button-group/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
}

&:first-child {
border-radius: $radius-block-ui 0 0 $radius-block-ui;
border-radius: $radius-small 0 0 $radius-small;
}

&:last-child {
border-radius: 0 $radius-block-ui $radius-block-ui 0;
border-radius: 0 $radius-small $radius-small 0;
}

// The focused button should be elevated so the focus ring isn't cropped,
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
align-items: center;
box-sizing: border-box;
padding: 6px 12px;
border-radius: $radius-block-ui;
border-radius: $radius-small;
color: $components-color-foreground;

&.is-next-40px-default-size {
Expand Down Expand Up @@ -249,7 +249,7 @@
height: auto;

&:focus {
border-radius: $radius-block-ui;
border-radius: $radius-small;
}

&:disabled,
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/circular-option-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ $color-palette-circle-spacing: 12px;
height: 100%;
width: 100%;
border: none;
border-radius: 50%;
border-radius: $radius-round;
background: transparent;
box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
transition: 100ms box-shadow ease;
Expand All @@ -93,7 +93,7 @@ $color-palette-circle-spacing: 12px;
position: absolute;
left: 2px;
top: 2px;
border-radius: 50%;
border-radius: $radius-round;
z-index: z-index(".components-circular-option-picker__option.is-pressed + svg");
pointer-events: none;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-indicator/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
width: $grid-unit-50 * 0.5;
height: $grid-unit-50 * 0.5;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
border-radius: 50%;
border-radius: $radius-round;
display: inline-block;
padding: 0;
background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/color-palette/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
cursor: pointer;
// Show a thin outline in Windows high contrast mode.
outline: 1px solid transparent;
border-radius: $radius-block-ui $radius-block-ui 0 0;
border-radius: $radius-medium $radius-medium 0 0;
box-shadow: $border-as-box-shadow;

&:focus {
Expand Down Expand Up @@ -46,7 +46,7 @@ $border-as-box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);

.components-color-palette__custom-color-text-wrapper {
padding: $grid-unit-15 $grid-unit-20;
border-radius: 0 0 $radius-block-ui $radius-block-ui;
border-radius: 0 0 $radius-medium $radius-medium;
position: relative;
font-size: $default-font-size;

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/custom-gradient-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
$components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.

.components-custom-gradient-picker__gradient-bar {
border-radius: $radius-block-ui;
border-radius: $radius-small;
width: 100%;
height: $grid-unit-60;
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/drop-zone/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
z-index: z-index(".components-drop-zone");
visibility: hidden;
opacity: 0;
border-radius: $radius-block-ui;
border-radius: $radius-small;

&.is-active {
opacity: 1;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/dropdown-menu-v2/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const DropdownMenu = styled( Ariakit.Menu )<
padding: ${ CONTENT_WRAPPER_PADDING };

background-color: ${ COLORS.ui.background };
border-radius: 4px;
border-radius: ${ CONFIG.radiusMedium };
${ ( props ) => css`
box-shadow: ${ props.variant === 'toolbar'
? TOOLBAR_VARIANT_BOX_SHADOW
Expand Down Expand Up @@ -150,7 +150,7 @@ const baseItem = css`
line-height: 20px;

color: ${ COLORS.gray[ 900 ] };
border-radius: ${ CONFIG.radiusBlockUi };
border-radius: ${ CONFIG.radiusSmall };

padding-block: ${ ITEM_PADDING_BLOCK };
padding-inline: ${ ITEM_PADDING_INLINE };
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/focal-point-picker/styles/focal-point-picker-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const MediaWrapper = styled.div`

export const MediaContainer = styled.div`
align-items: center;
border-radius: ${ CONFIG.radiusBlockUi };
border-radius: ${ CONFIG.radiusSmall };
cursor: pointer;
display: inline-flex;
justify-content: center;
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/guide/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
.components-modal__content {
padding: 0;
margin-top: 0;
border-radius: $radius-block-ui;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree to keep this consistent with the dialog/modal component we use 👍


&::before {
content: none;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
width: 100%;
background: $white;
box-shadow: $shadow-modal;
border-radius: $grid-unit-05 $grid-unit-05 0 0;
border-radius: $radius-large $radius-large 0 0;
overflow: hidden;
// Have the content element fill the vertical space yet not overflow.
display: flex;
Expand All @@ -32,7 +32,7 @@

// Show a centered modal on bigger screens.
@include break-small() {
border-radius: $grid-unit-05;
border-radius: $radius-large;
margin: auto;
width: auto;
min-width: $modal-min-width;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@


// Block UI appearance.
border-radius: $radius-block-ui;
border-radius: $radius-medium;
background-color: $white;
box-shadow: inset 0 0 0 $border-width $gray-900;
outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
.components-popover__content {
background: $white;
box-shadow: $shadow-popover-border-default, $shadow-popover;
border-radius: $radius-block-ui;
border-radius: $radius-medium;
box-sizing: border-box;
width: min-content;

Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/progress-bar/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const Track = styled.div`
${ COLORS.theme.foreground },
transparent 90%
);
border-radius: ${ CONFIG.radiusBlockUi };
border-radius: ${ CONFIG.radiusFull };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This used to be 2px and is now 9999px. I also don't see this in the list of changes in the PR description. Did you mean to use radiusSmall or radiusMedium?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. Visually there's no change here which is why I didn't list it.

The design of the progress bar calls for a fully rounded track/indicator. Since it is only 2px tall radiusXSmall (2px) is technically adequate. However if we ever decide to increase the height of the progress bar then the track/indicator would no longer be fully rounded. But utilising radiusFull we ensure the bar is fully rounded regardless of how tall it is.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it is only 2px tall radiusXSmall (2px) is technically adequate.

I assume you meant radiusSmall (2px) since radiusXSmall is 1px.

Anyway, that's not a problem for your intent here, and making it rounded makes sense to me 👍


// Windows high contrast mode.
outline: 2px solid transparent;
Expand All @@ -58,7 +58,7 @@ export const Indicator = styled.div< {
position: absolute;
top: 0;
height: 100%;
border-radius: ${ CONFIG.radiusBlockUi };
border-radius: ${ CONFIG.radiusFull };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.

/* Text color at 90% opacity */
background-color: color-mix(
in srgb,
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/radio-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

&::before {
content: "";
border-radius: 50%;
border-radius: $radius-round;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/snackbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
font-size: $default-font-size;
background: rgba($black, 0.85); // Emulates #1e1e1e closely.
backdrop-filter: blur($grid-unit-20) saturate(180%);
border-radius: $radius-block-ui;
border-radius: $radius-medium;
box-shadow: $shadow-popover;
color: $white;
padding: $grid-unit-15 ($grid-unit-05 * 5);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/tab-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@

// Draw the indicator.
box-shadow: 0 0 0 0 transparent;
border-radius: $radius-block-ui;
border-radius: $radius-small;

// Animation
transition: all 0.1s linear;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/text/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const muted = css`
export const highlighterText = css`
mark {
background: ${ COLORS.alert.yellow };
border-radius: 2px;
border-radius: ${ CONFIG.radiusSmall };
box-shadow:
0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const buttonView = ( {
appearance: none;
background: transparent;
border: none;
border-radius: ${ CONFIG.controlBorderRadius };
border-radius: ${ CONFIG.radiusXSmall };
color: ${ COLORS.gray[ 700 ] };
fill: currentColor;
cursor: pointer;
Expand Down Expand Up @@ -122,7 +122,7 @@ const isIconStyles = ( {

export const backdropView = css`
background: ${ COLORS.gray[ 900 ] };
border-radius: ${ CONFIG.controlBorderRadius };
border-radius: ${ CONFIG.radiusXSmall };
position: absolute;
inset: 0;
z-index: 1;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/toggle-group-control/toggle-group-control/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const toggleGroupControl = ( {
} ) => css`
background: ${ COLORS.ui.background };
border: 1px solid transparent;
border-radius: ${ CONFIG.controlBorderRadius };
border-radius: ${ CONFIG.radiusSmall };
display: inline-flex;
min-width: 0;
position: relative;
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/toolbar/toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.components-accessible-toolbar {
display: inline-flex;
border: $border-width solid $gray-900;
border-radius: $radius-block-ui;
border-radius: $radius-small;
flex-shrink: 0;

& > .components-toolbar-group:last-child {
Expand Down Expand Up @@ -47,7 +47,7 @@
content: "";
position: absolute;
display: block;
border-radius: $radius-block-ui;
border-radius: $radius-small;
height: $grid-unit-40;

// Position the focus rectangle.
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/tooltip/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.components-tooltip {
background: $black;
font-family: $default-font;
border-radius: $radius-block-ui;
border-radius: $radius-small;
color: $gray-100;
text-align: center;
line-height: 1.4;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/unit-control/styles/unit-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const UnitSelect = styled.select< SelectProps >`
&&& {
appearance: none;
background: transparent;
border-radius: 2px;
border-radius: ${ CONFIG.radiusXSmall };
border: none;
display: block;
outline: none;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/utils/input/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { CONFIG } from '../';

export const inputStyleNeutral = css`
box-shadow: 0 0 0 transparent;
border-radius: ${ CONFIG.radiusBlockUi };
border-radius: ${ CONFIG.radiusSmall };
border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };

@media not ( prefers-reduced-motion ) {
Expand Down
Loading