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.

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

Update hard-coded border-radius instances #64693

Merged
merged 9 commits into from
Aug 23, 2024
Merged
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -421,7 +421,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
width: 100%;
border: none;
outline: none;
border-radius: 2px;
border-radius: $radius-small;
box-shadow: inset 0 0 0 $border-width $gray-900;
resize: none;
overflow: hidden;
Original file line number Diff line number Diff line change
@@ -57,6 +57,6 @@
position: absolute;
inset: 0;
background-color: var(--wp-admin-theme-color);
border-radius: 2px;
border-radius: $radius-small;
}
}
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@
.block-editor-block-list__insertion-point-indicator {
position: absolute;
background: var(--wp-admin-theme-color);
border-radius: 2px;
border-radius: $radius-small;
transform-origin: center;
opacity: 0;
will-change: transform, opacity;
Original file line number Diff line number Diff line change
@@ -74,7 +74,7 @@

.block-editor-global-styles-background-panel__inspector-media-replace-container {
border: $border-width solid $gray-300;
border-radius: 2px;
border-radius: $radius-small;
// Full width. ToolsPanel lays out children in a grid.
grid-column: 1 / -1;

@@ -102,7 +102,6 @@

.block-editor-global-styles-background-panel__image-tools-panel-item {
border: $border-width solid $gray-300;
border-radius: 2px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The radius here is already added to the parent element.


// Full width. ToolsPanel lays out children in a grid.
grid-column: 1 / -1;
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/inserter/style.scss
Original file line number Diff line number Diff line change
@@ -285,7 +285,7 @@ $block-inserter-tabs-height: 44px;

&:focus-visible,
&:focus:not(:disabled) {
border-radius: 2px;
border-radius: $radius-small;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
// Windows high contrast mode.
outline: 2px solid transparent;
@@ -604,7 +604,7 @@ $block-inserter-tabs-height: 44px;
display: flex;
align-items: center;
overflow: hidden;
border-radius: 2px;
border-radius: $radius-small;

> * {
margin: 0 auto;
Original file line number Diff line number Diff line change
@@ -553,7 +553,6 @@ svg {
background-color: #1e1e1e;
color: #fff;
margin: $grid-unit-10 0 0 24px;
border-radius: 2px;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Radius here is inherited from the Button component.

height: 24px;
min-width: 24px;
padding: 0;
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@
outline: none;

[data-rich-text-format-boundary] {
border-radius: 2px;
border-radius: $radius-small;
}
}
}
11 changes: 11 additions & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -4,6 +4,17 @@

### Enhancements

- `ColorPicker`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `CustomSelectControl V2`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `DateTime`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `FormToggle`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `FormTokenField`: Remove unused border-radius ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `InputControl`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `Navigation`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `RangeControl`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `ResizeableBox`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `TabPanel`: Remove radius applied to panel focus style ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `Tabs`: Remove radius applied to panel focus style ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
- `UnitControl`: Update unit select styles ([#64712](https://github.com/WordPress/gutenberg/pull/64712)).
- Decrease horizontal padding from 16px to 12px on the following components, when in the 40px default size ([#64708](https://github.com/WordPress/gutenberg/pull/64708)).
- `AnglePickerControl`
2 changes: 1 addition & 1 deletion packages/components/src/color-picker/styles.ts
Original file line number Diff line number Diff line change
@@ -81,7 +81,7 @@ export const ColorfulWrapper = styled.div`
.react-colorful__alpha {
width: 184px;
height: 16px;
border-radius: 16px;
border-radius: ${ CONFIG.radiusFull };
margin-bottom: ${ space( 2 ) };
}

23 changes: 2 additions & 21 deletions packages/components/src/custom-gradient-picker/style.scss
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
height: inherit;
width: inherit;
min-width: $grid-unit-20;
border-radius: 50%;
border-radius: $radius-round;

background: $white;
padding: 2px;
@@ -65,7 +65,7 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
// Same size as the .components-custom-gradient-picker__control-point-dropdown parent
height: inherit;
width: inherit;
border-radius: 50%;
border-radius: $radius-round;
padding: 0;

// Shadow and stroke.
@@ -100,25 +100,6 @@ $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 1
height: 20px;
}

.components-custom-gradient-picker .components-custom-gradient-picker__toolbar {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This class doesn't seem to be used at all.

border: none;

// Work-around to target the inner button containers rendered by <ToolbarGroup />
> div + div {
margin-left: 1px;
}

button {
&.is-pressed {
> svg {
background: $white;
border: $border-width solid $gray-600;
border-radius: 2px;
}
}
}
}

.components-custom-gradient-picker__ui-line {
position: relative;
z-index: 0;
Original file line number Diff line number Diff line change
@@ -118,7 +118,7 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
flex-direction: column;

background-color: ${ COLORS.theme.background };
border-radius: 2px;
border-radius: ${ CONFIG.radiusSmall };
border: 1px solid ${ COLORS.theme.foreground };

/* z-index(".components-popover") */
3 changes: 1 addition & 2 deletions packages/components/src/date-time/date/styles.ts
Original file line number Diff line number Diff line change
@@ -83,7 +83,7 @@ export const DayButton = styled( Button, {
` }

&&& {
border-radius: 100%;
border-radius: ${ CONFIG.radiusRound };
height: ${ space( 7 ) };
width: ${ space( 7 ) };

@@ -107,7 +107,6 @@ export const DayButton = styled( Button, {
`
::before {
background: ${ props.isSelected ? COLORS.white : COLORS.theme.accent };
border-radius: 2px;
bottom: 2px;
content: " ";
height: 4px;
Original file line number Diff line number Diff line change
@@ -3,6 +3,11 @@
*/
import styled from '@emotion/styled';

/**
* Internal dependencies
*/
import { CONFIG } from '../../utils';

export const PointerCircle = styled.div`
background-color: transparent;
cursor: grab;
@@ -15,7 +20,7 @@ export const PointerCircle = styled.div`
z-index: 10000;
background: rgba( 255, 255, 255, 0.4 );
border: 1px solid rgba( 255, 255, 255, 0.4 );
border-radius: 50%;
border-radius: ${ CONFIG.radiusRound };
backdrop-filter: blur( 16px ) saturate( 180% );
box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;

2 changes: 1 addition & 1 deletion packages/components/src/form-toggle/style.scss
Original file line number Diff line number Diff line change
@@ -54,7 +54,7 @@ $transition-duration: 0.2s;
left: math.div($toggle-thumb-size, 6);
width: $toggle-thumb-size;
height: $toggle-thumb-size;
border-radius: 50%;
border-radius: $radius-round;
transition:
$transition-duration transform ease,
$transition-duration background-color ease-out;
5 changes: 2 additions & 3 deletions packages/components/src/form-token-field/style.scss
Original file line number Diff line number Diff line change
@@ -102,7 +102,6 @@
&.is-error {
.components-form-token-field__token-text {
color: $alert-red;
border-radius: 4px 0 0 4px;
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 think this is safe to remove. The radius here is never visible:

Screenshot 2024-08-22 at 10 56 32

Copy link
Contributor

@ciampo ciampo Aug 22, 2024

Choose a reason for hiding this comment

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

Agreed — also, I don't see why there should be a different radius (4px) compared to the default (2px)

padding: 0 4px 0 6px;
}
}
@@ -133,7 +132,7 @@
}

.components-form-token-field__token-text {
border-radius: 2px 0 0 2px;
border-radius: $radius-x-small 0 0 $radius-x-small;
padding: 0 0 0 8px;
white-space: nowrap;
overflow: hidden;
@@ -142,7 +141,7 @@

.components-form-token-field__remove-token.components-button {
cursor: pointer;
border-radius: 0 2px 2px 0;
border-radius: 0 $radius-x-small $radius-x-small 0;
ciampo marked this conversation as resolved.
Show resolved Hide resolved
padding: 0 2px;
color: $gray-900;
line-height: 10px;
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@ export const BackdropUI = styled.div< BackdropProps >`
export const Root = styled( Flex )`
box-sizing: border-box;
position: relative;
border-radius: 2px;
border-radius: ${ CONFIG.radiusSmall };
padding-top: 0;

// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ import { COLORS } from '../../utils/colors-values';
import Button from '../../button';
import { Text } from '../../text';
import { Heading } from '../../heading';
import { rtl } from '../../utils';
import { rtl, CONFIG } from '../../utils';
import { space } from '../../utils/space';

export const NavigationUI = styled.div`
@@ -111,7 +111,7 @@ export const GroupTitleUI = styled( Heading )`
`;

export const ItemBaseUI = styled.li`
border-radius: 2px;
border-radius: ${ CONFIG.radiusSmall };
color: inherit;
margin-bottom: 0;

@@ -172,7 +172,7 @@ export const ItemBadgeUI = styled.span`
margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };
display: inline-flex;
padding: ${ space( 1 ) } ${ space( 3 ) };
border-radius: 2px;
border-radius: ${ CONFIG.radiusSmall };

@keyframes fade-in {
from {
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
* Internal dependencies
*/
import NumberControl from '../../number-control';
import { COLORS, rtl } from '../../utils';
import { COLORS, rtl, CONFIG } from '../../utils';
import { space } from '../../utils/space';

import type {
@@ -102,7 +102,7 @@ export const Rail = styled.span`
position: absolute;
margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
top: 0;
border-radius: ${ railHeight }px;
border-radius: ${ CONFIG.radiusFull };

${ railBackgroundColor };
`;
@@ -119,7 +119,7 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {

export const Track = styled.span`
background-color: currentColor;
border-radius: ${ railHeight }px;
border-radius: ${ CONFIG.radiusFull };
height: ${ railHeight }px;
pointer-events: none;
display: block;
@@ -203,7 +203,7 @@ export const ThumbWrapper = styled.span`
top: 0;
user-select: none;
width: ${ thumbSize }px;
border-radius: 50%;
border-radius: ${ CONFIG.radiusRound };

${ thumbColor };
${ rtl( { marginLeft: -10 } ) };
@@ -221,7 +221,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
position: absolute;
background-color: ${ COLORS.theme.accent };
opacity: 0.4;
border-radius: 50%;
border-radius: ${ CONFIG.radiusRound };
height: ${ thumbSize + 8 }px;
width: ${ thumbSize + 8 }px;
top: -4px;
@@ -233,7 +233,7 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {

export const Thumb = styled.span< ThumbProps >`
align-items: center;
border-radius: 50%;
border-radius: ${ CONFIG.radiusRound };
height: 100%;
outline: 0;
position: absolute;
@@ -281,7 +281,7 @@ const tooltipPosition = ( { position }: TooltipProps ) => {

export const Tooltip = styled.span< TooltipProps >`
background: rgba( 0, 0, 0, 0.8 );
border-radius: 2px;
border-radius: ${ CONFIG.radiusSmall };
color: white;
display: inline-block;
font-size: 12px;
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
* Internal dependencies
*/
import { Text } from '../../../text';
import { font, COLORS } from '../../../utils';
import { font, COLORS, CONFIG } from '../../../utils';

export const Root = styled.div`
bottom: 0;
@@ -31,7 +31,7 @@ export const TooltipWrapper = styled.div`

export const Tooltip = styled.div`
background: ${ COLORS.theme.foreground };
border-radius: 2px;
border-radius: ${ CONFIG.radiusSmall };
box-sizing: border-box;
font-family: ${ font( 'default.fontFamily' ) };
font-size: 12px;
4 changes: 2 additions & 2 deletions packages/components/src/resizable-box/style.scss
Original file line number Diff line number Diff line change
@@ -28,7 +28,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
content: "";
width: $resize-handler-size;
height: $resize-handler-size;
border-radius: 50%;
border-radius: $radius-round;
background: $white;
cursor: inherit;
position: absolute;
@@ -43,7 +43,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
// This is the "visible" resize handle for side handles - the line
.components-resizable-box__side-handle::before {
display: block;
border-radius: 2px;
border-radius: $radius-full;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ensures the handle is fully rounded regardless of any future width/height changes.

content: "";
width: 3px;
height: 3px;
1 change: 0 additions & 1 deletion packages/components/src/tab-panel/style.scss
Original file line number Diff line number Diff line change
@@ -89,7 +89,6 @@
}

&:focus-visible {
border-radius: 2px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Keeping or removing the radius is totally a design decision, but I think that whatever we decide should likely be applied to Tabs too (which is still private, but will ultimately replace TabPanel)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done!

box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;

// Windows high contrast mode.
5 changes: 2 additions & 3 deletions packages/components/src/tabs/styles.ts
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import * as Ariakit from '@ariakit/react';
/**
* Internal dependencies
*/
import { COLORS } from '../utils';
import { COLORS, CONFIG } from '../utils';
import { space } from '../utils/space';

export const TabListWrapper = styled.div`
@@ -107,7 +107,7 @@ export const Tab = styled( Ariakit.Tab )`
// Outline works for Windows high contrast mode as well.
outline: var( --wp-admin-border-width-focus ) solid
${ COLORS.theme.accent };
border-radius: 2px;
border-radius: ${ CONFIG.radiusSmall };

// Animation
opacity: 0;
@@ -136,7 +136,6 @@ export const TabPanel = styled( Ariakit.TabPanel )`
}

&:focus-visible {
border-radius: 2px;
box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
${ COLORS.theme.accent };
// Windows high contrast mode.
Loading
Loading