Commit 78f2d32bb8 for woocommerce
commit 78f2d32bb81e95255c792a6c6ce0c688831b277f
Author: Mike Jolley <mike.jolley@me.com>
Date: Thu Apr 24 12:13:06 2025 +0100
[Checkout] Improve Delivery selector styling and spacing (#56789)
* Update colors in prep for using in shipping method selector
* Updated styling
* Changelog
* Improve wrapping
* Use input text colors for toggle
* Prevent scroll on shipping/pickup toggle
* Update naming
* Change text wrapping for toggle titles
diff --git a/plugins/woocommerce/changelog/update-shipping-selector-style-56010 b/plugins/woocommerce/changelog/update-shipping-selector-style-56010
new file mode 100644
index 0000000000..2a9827cba0
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-shipping-selector-style-56010
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Updated delivery selector styling on block checkout to improve spacing.
diff --git a/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss b/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
index 7221b9e7b4..bcdfe606c0 100644
--- a/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/abstracts/_colors.scss
@@ -4,16 +4,12 @@
// Bright colors
$discount-color: $alert-green;
-$input-border-gray: #50575e;
-$input-border-dark: rgba(255, 255, 255, 0.4);
-$controls-border-dark: rgba(255, 255, 255, 0.6);
-$input-text-active: #2b2d2f;
-$input-placeholder-dark: rgba(255, 255, 255, 0.6);
+$input-text-light: #2b2d2f;
$input-text-dark: #fff;
+$input-placeholder-dark: rgba(255, 255, 255, 0.6);
+$input-border-dark: rgba(255, 255, 255, 0.4);
+$input-background-light: #fff;
$input-background-dark: rgba(0, 0, 0, 0.1);
-$select-dropdown-dark: #1e1e1e;
-$select-dropdown-light: #fff;
-$select-item-dark: rgba(0, 0, 0, 0.4);
$image-placeholder-border-color: #f2f2f2;
// Universal colors for use on the frontend, currently being applied to checkout blocks.
diff --git a/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
index 3d2dbeb9c3..94bdcc65d2 100644
--- a/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
@@ -105,7 +105,7 @@ $fontSizes: (
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
- color: $input-text-active;
+ color: $input-text-light;
display: block;
font-size: 0.875rem;
font-weight: 700;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
index 19ec483edb..e2c9ac41fe 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss
@@ -4,7 +4,7 @@
.wc-blocks-components-select__container {
border-radius: $universal-border-radius;
box-sizing: border-box;
- background: #fff;
+ background: $input-background-light;
width: 100%;
height: 3.125em;
position: relative;
@@ -33,7 +33,7 @@
appearance: none;
background: none;
padding: em($gap) em($gap-smaller) 0;
- color: $input-text-active;
+ color: $input-text-light;
border: 1px solid $universal-border-strong;
&:focus {
@@ -63,7 +63,7 @@
top: 2px;
transform-origin: top left;
transition: all 200ms ease;
- color: $input-text-active;
+ color: $input-text-light;
z-index: 1;
margin: 0;
overflow: hidden;
@@ -92,7 +92,7 @@
top: 50%;
right: $gap-small;
pointer-events: none;
- fill: $input-text-active;
+ fill: $input-text-light;
.has-dark-controls & {
fill: $input-text-dark;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
index 06ec084ccb..8034340826 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/payment-methods/style.scss
@@ -41,13 +41,13 @@
background-color: #fff;
padding: em($gap-small) 0 em($gap-small) $gap;
border-radius: $universal-border-radius;
- border: 1px solid $input-border-gray;
+ border: 1px solid $universal-border-strong;
width: 100%;
font-family: inherit;
margin: 0;
box-sizing: border-box;
height: 3em;
- color: $input-text-active;
+ color: $input-text-light;
cursor: text;
&:focus {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss
index a2d8005df7..af3a7a11c0 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/style.scss
@@ -14,10 +14,10 @@
margin-top: $gap;
&:focus {
- background-color: #fff;
- color: $input-text-active;
+ background-color: $input-background-light;
+ color: $input-text-light;
outline: 0;
- box-shadow: 0 0 0 1px $input-border-gray;
+ box-shadow: 0 0 0 1px $input-text-light;
}
.has-dark-controls & {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx
index 02dda71c4e..8c53c3cfef 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx
@@ -53,15 +53,17 @@ const LocalPickupSelector = ( {
checked === 'pickup',
} ) }
>
- { showIcon === true && (
- <Icon
- icon={ store }
- size={ 28 }
- className="wc-block-checkout__shipping-method-option-icon"
- />
- ) }
- <span className="wc-block-checkout__shipping-method-option-title">
- { toggleText }
+ <span className="wc-block-checkout__shipping-method-option-title-wrapper">
+ { showIcon === true && (
+ <Icon
+ icon={ store }
+ size={ 28 }
+ className="wc-block-checkout__shipping-method-option-icon"
+ />
+ ) }
+ <span className="wc-block-checkout__shipping-method-option-title">
+ { toggleText }
+ </span>
</span>
{ showPrice === true && (
<RatePrice
@@ -140,15 +142,17 @@ const ShippingSelector = ( {
checked === 'shipping',
} ) }
>
- { showIcon === true && (
- <Icon
- icon={ shipping }
- size={ 28 }
- className="wc-block-checkout__shipping-method-option-icon"
- />
- ) }
- <span className="wc-block-checkout__shipping-method-option-title">
- { toggleText }
+ <span className="wc-block-checkout__shipping-method-option-title-wrapper">
+ { showIcon === true && (
+ <Icon
+ icon={ shipping }
+ size={ 28 }
+ className="wc-block-checkout__shipping-method-option-icon"
+ />
+ ) }
+ <span className="wc-block-checkout__shipping-method-option-title">
+ { toggleText }
+ </span>
</span>
{ showPrice === true && Price }
</Button>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
index dc37413a14..425af98883 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss
@@ -1,18 +1,16 @@
+$component-background: color-mix(in srgb, currentColor 6%, transparent);
+$component-background-hover: color-mix(in srgb, currentColor 12%, transparent);
+
.wc-block-checkout__shipping-method .wc-block-checkout__shipping-method-container {
width: 100%;
display: flex;
- gap: $gap;
justify-content: space-between;
-}
-
-// This nested selector is solely for specificity to override a quite specific style set in the button component.
-// We have avoided nesting all the styles in case specificity changes introduce regressions elsewhere.
-.edit-post-visual-editor {
- .wc-block-checkout__shipping-method-container {
- .wc-block-checkout__shipping-method-option {
- min-height: 80px;
- }
- }
+ align-items: stretch;
+ flex-direction: row;
+ border-radius: $universal-border-radius * 2;
+ background-color: $component-background;
+ gap: $gap-smallest;
+ padding: $gap-smallest;
}
.edit-post-visual-editor .wc-block-checkout__shipping-method-option,
@@ -23,63 +21,61 @@
justify-content: center;
flex-wrap: wrap;
align-items: center;
- height: 100%;
- min-height: 80px;
box-sizing: border-box;
flex-basis: 0;
- gap: 4px;
- padding: 16px 12px;
- background-color: transparent;
- outline: 1px solid $universal-border-light;
- border-radius: $universal-border-radius;
+ gap: 0;
cursor: pointer;
position: relative; // Add this for pseudo-element positioning
+ padding: $gap-small;
+ border-radius: $universal-border-radius;
+ border: 2px solid transparent;
+ background-color: transparent;
+ color: $input-text-light;
.has-dark-controls & {
- outline: 1px solid $input-border-dark;
- }
-
- &::after {
- content: "";
- position: absolute;
- top: -3px;
- right: -3px;
- bottom: -3px;
- left: -3px;
- border-radius: calc(#{$universal-border-radius} + 2px);
- pointer-events: none;
+ color: $input-text-dark;
}
+ &:hover,
&:focus-within {
- outline: 1.5px solid currentColor;
- &::after {
- outline: 1px solid currentColor;
- }
- }
-
- &:hover {
- background-color: $universal-background;
+ background-color: $component-background-hover;
+ outline: none;
}
&.wc-block-checkout__shipping-method-option--selected {
- outline: 1.5px solid currentColor;
- background-color: $universal-background;
- &:focus-within::after {
- outline: 1px solid currentColor;
+ border: 2px solid currentColor;
+ background: $input-background-light;
+
+ .has-dark-controls & {
+ background: $input-background-dark;
}
}
}
+.wc-block-checkout__shipping-method-option-title-wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: flex-start;
+ flex-wrap: nowrap;
+ gap: $gap-smallest;
+}
+
.wc-block-checkout__shipping-method-option-icon {
fill: currentColor;
+ flex-shrink: 0;
+ vertical-align: middle;
}
.wc-block-checkout__shipping-method-option-title {
+ @include reset-typography();
@include font-size(regular, 1rem);
font-weight: bold;
+ line-height: 28px; // Match the icon size
+ text-wrap: balance;
}
.wc-block-checkout__shipping-method-option-price {
+ @include reset-typography();
@include font-size(small, 1rem);
flex-basis: 100%;
text-align: center;
diff --git a/plugins/woocommerce/client/blocks/packages/components/checkbox-control/style.scss b/plugins/woocommerce/client/blocks/packages/components/checkbox-control/style.scss
index e251b66e63..2e61d322a4 100644
--- a/plugins/woocommerce/client/blocks/packages/components/checkbox-control/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/checkbox-control/style.scss
@@ -43,10 +43,10 @@
overflow: hidden;
position: static;
vertical-align: middle;
- background-color: #fff;
+ background-color: $input-background-light;
&:checked {
- background: #fff;
+ background: $input-background-light;
}
&:focus {
@@ -64,7 +64,7 @@
}
.has-dark-controls & {
- border-color: $controls-border-dark;
+ border-color: $input-border-dark;
background-color: $input-background-dark;
color: $input-text-dark;
@@ -110,7 +110,7 @@
pointer-events: none;
.has-dark-controls & {
- fill: #fff;
+ fill: $input-text-dark;
}
}
@@ -124,14 +124,14 @@
.theme-twentytwentyone {
.wc-block-components-checkbox__input[type="checkbox"],
.has-dark-controls .wc-block-components-checkbox__input[type="checkbox"] {
- background-color: #fff;
+ background-color: $input-background-light;
border-color: var(--form--border-color);
position: relative;
}
.wc-block-components-checkbox__input[type="checkbox"]:checked,
.has-dark-controls .wc-block-components-checkbox__input[type="checkbox"]:checked {
- background-color: #fff;
+ background-color: $input-background-light;
border-color: var(--form--border-color);
}
diff --git a/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss b/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss
index 4076465bbc..4101fb0483 100644
--- a/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/radio-control/style.scss
@@ -203,7 +203,7 @@
.wc-block-components-radio-control {
.wc-block-components-radio-control__input {
appearance: none;
- background: #fff;
+ background: $input-background-light;
border: 1px solid $universal-border-medium;
border-radius: 50%;
display: inline-block;
@@ -244,7 +244,7 @@
}
.has-dark-controls & {
- border-color: $controls-border-dark;
+ border-color: $input-border-dark;
background-color: $input-background-dark;
&:checked {
diff --git a/plugins/woocommerce/client/blocks/packages/components/store-notices-container/store-notices.tsx b/plugins/woocommerce/client/blocks/packages/components/store-notices-container/store-notices.tsx
index 3539e6181e..b150c1d584 100644
--- a/plugins/woocommerce/client/blocks/packages/components/store-notices-container/store-notices.tsx
+++ b/plugins/woocommerce/client/blocks/packages/components/store-notices-container/store-notices.tsx
@@ -25,8 +25,16 @@ const StoreNotices = ( {
} ): JSX.Element => {
const ref = useRef< HTMLDivElement >( null );
const { removeNotice } = useDispatch( 'core/notices' );
- const noticeIds = notices.map( ( notice ) => notice.id );
- const previousNoticeIds = usePrevious( noticeIds );
+ // Only scroll to the container when an error notice is added, not info notices.
+ const errorIds = notices
+ .map( ( notice ) => {
+ if ( notice.status === 'error' || notice.status === 'warning' ) {
+ return notice.id;
+ }
+ return null;
+ } )
+ .filter( Boolean );
+ const previousErrorIds = usePrevious( errorIds );
useEffect( () => {
// Scroll to container when an error is added here.
@@ -48,17 +56,17 @@ const StoreNotices = ( {
return;
}
- const newNoticeIds = noticeIds.filter(
+ const newErrorIds = errorIds.filter(
( value ) =>
- ! previousNoticeIds || ! previousNoticeIds.includes( value )
+ ! previousErrorIds || ! previousErrorIds.includes( value )
);
- if ( newNoticeIds.length && containerRef?.scrollIntoView ) {
+ if ( newErrorIds.length && containerRef?.scrollIntoView ) {
containerRef.scrollIntoView( {
behavior: 'smooth',
} );
}
- }, [ noticeIds, previousNoticeIds, ref ] );
+ }, [ errorIds, previousErrorIds, ref ] );
// Group notices by whether or not they are dismissible. Dismissible notices can be grouped.
const dismissibleNotices = notices.filter(
diff --git a/plugins/woocommerce/client/blocks/packages/components/text-input/style.scss b/plugins/woocommerce/client/blocks/packages/components/text-input/style.scss
index 26df0d5100..973c53cb0f 100644
--- a/plugins/woocommerce/client/blocks/packages/components/text-input/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/text-input/style.scss
@@ -57,12 +57,12 @@
box-sizing: border-box;
min-height: 0;
height: 3.125em;
- background-color: #fff;
- color: $input-text-active;
+ background-color: $input-background-light;
+ color: $input-text-light;
&:focus {
- background-color: #fff;
- color: $input-text-active;
+ background-color: $input-background-light;
+ color: $input-text-light;
border: 1.5px solid currentColor;
}
diff --git a/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss b/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
index efd2368774..050d51089f 100644
--- a/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/textarea/style.scss
@@ -1,9 +1,9 @@
.wc-block-components-textarea {
@include font-size(regular);
- background-color: #fff;
+ background-color: $input-background-light;
border: 1px solid $universal-border-strong;
border-radius: $universal-border-radius;
- color: $input-text-active;
+ color: $input-text-light;
font-family: inherit;
line-height: 1.375; // =22px when font-size is 16px.
margin: 0;