Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add dark colors support to Cart & Checkout controls #2981

Merged
merged 21 commits into from
Aug 14, 2020
Merged

Add dark colors support to Cart & Checkout controls #2981

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
09776e3
add dark styles setting
senadir Aug 5, 2020
8adfc26
add attributes to blocks
senadir Aug 5, 2020
1a0daca
add colors to input and select
senadir Aug 5, 2020
bab3e91
cover rest of items
senadir Aug 5, 2020
42ae59d
tweak select contrast
senadir Aug 7, 2020
ab8a010
fix ie11 issue
senadir Apr 29, 2020
e68bb35
fix focus
senadir Apr 30, 2020
9772b56
include checkbox styles
senadir Aug 7, 2020
1b93532
fix extra spacing after phone number
senadir Aug 7, 2020
7ce37f2
add styling to quantity selector
senadir Aug 7, 2020
c3b6990
remove extra rule
senadir Aug 13, 2020
1faf2bc
remove editor styles for radio control
senadir Aug 13, 2020
9c6dbe1
use border-color
senadir Aug 13, 2020
9e4813a
rename variables and classes and wording
senadir Aug 13, 2020
2816f72
adjust colors
senadir Aug 13, 2020
bf6fb6b
provide tighter control over colors
senadir Aug 13, 2020
f0410c3
remove redudant outline rule
senadir Aug 13, 2020
b56694e
add more variables
senadir Aug 13, 2020
11d2fb3
add support for order note
senadir Aug 13, 2020
29eb311
use variables for textarea
senadir Aug 14, 2020
336d10b
move dark mode panel to last
senadir Aug 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions assets/css/abstracts/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,14 @@ $gray-60: #50575e;
$gray-80: #2c3338;

$input-border-gray: #8d96a0;
$input-border-dark: rgba(255, 255, 255, 0.4);
$input-disabled-dark: rgba(255, 255, 255, 0.3);
$controls-border-dark: rgba(255, 255, 255, 0.6);
$input-text-active: #2b2d2f;
$input-placeholder-dark: rgba(255, 255, 255, 0.6);
$input-text-dark: #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);

12 changes: 12 additions & 0 deletions assets/js/base/components/checkbox-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,16 @@
&:not(:checked) + .wc-block-components-checkbox__mark {
display: none;
}

.has-dark-controls & {
border-color: $controls-border-dark;
background-color: transparent;

&:checked {
background: transparent;
border-color: $controls-border-dark;
}
}
}

.wc-block-components-checkbox__mark {
Expand All @@ -44,6 +54,8 @@
}
}

// Hack to hide the check mark in IE11
// See comment: https://github.com/woocommerce/woocommerce-gutenberg-products-block/pull/2320/#issuecomment-621936576
Copy link
Member

Choose a reason for hiding this comment

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

Is this comment still relevant? Not a blocker :)

Copy link
Member Author

Choose a reason for hiding this comment

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

Not much, but it wasn't added on the previous PR and stayed here during rebase, no point in deleting it and putting it back in a new PR.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
senadir marked this conversation as resolved.
Show resolved Hide resolved
.wc-block-components-checkbox__mark {
display: none;
Expand Down
4 changes: 3 additions & 1 deletion assets/js/base/components/panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@
overflow: auto;
}

.theme-twentytwenty .wc-blocks-components-panel__button {
.theme-twentytwenty .wc-blocks-components-panel__button,
.theme-twentyseventeen .wc-blocks-components-panel__button {
background: transparent;
color: inherit;
}
31 changes: 31 additions & 0 deletions assets/js/base/components/quantity-selector/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@
border: 1px solid $core-grey-light-600;
background: #fff;
border-radius: 4px;
// needed so that buttons fill the container.
box-sizing: content-box;
senadir marked this conversation as resolved.
Show resolved Hide resolved

.has-dark-controls & {
background-color: transparent;
border-color: $input-border-dark;
}

// Extra label for specificity needed in the editor.
input.wc-block-components-quantity-selector__input {
Expand All @@ -41,6 +48,18 @@
&:disabled {
color: $core-grey-dark-100;
}

.has-dark-controls & {
color: $input-text-dark;
background: transparent;

&:focus {
background: transparent;
}
&:disabled {
color: $input-disabled-dark;
}
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
Expand All @@ -66,6 +85,18 @@
cursor: default;
@include reset-button;
}

.has-dark-controls & {
color: $input-text-dark;

&:hover,
&:focus {
color: $input-text-dark;
}
&:disabled {
color: $input-disabled-dark;
}
}
}
.wc-block-components-quantity-selector__button--minus {
order: 1;
Expand Down
10 changes: 9 additions & 1 deletion assets/js/base/components/radio-control/_mixin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
.wc-block-components-radio-control {
.wc-block-components-radio-control__input {
appearance: none;
background: #fff;
background: transparent;
border: 2px solid currentColor;
border-radius: 50%;
display: inline-block;
Expand All @@ -84,6 +84,14 @@
transform: translate(-50%, -50%);
width: 0.625em;
}

.has-dark-controls & {
border-color: $controls-border-dark;

&:checked::before {
background: $input-text-dark;
}
}
}

@include breakpoint( ">782px" ) {
Expand Down
6 changes: 0 additions & 6 deletions assets/js/base/components/radio-control/editor.scss
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion assets/js/base/components/radio-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
* Internal dependencies
*/
import RadioControlOption from './option';
import './editor.scss';
import './style.scss';

const RadioControl = ( {
Expand Down
24 changes: 23 additions & 1 deletion assets/js/base/components/select/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@
max-width: calc(100% - #{2 * $gap});
white-space: nowrap;

.has-dark-controls & {
color: $input-placeholder-dark;
}
@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
Expand Down Expand Up @@ -67,15 +70,23 @@
text-transform: none;
white-space: nowrap;
width: 100%;
.has-dark-controls & {
background-color: $input-background-dark;
border-color: $input-border-dark;
color: $input-text-dark;
}
}
}

.components-custom-select-control__button-icon {
right: #{$gap - 4px};
.has-dark-controls & {
fill: $input-text-dark;
}
}

.components-custom-select-control__menu {
background-color: #fff;
background-color: $select-dropdown-dark;
margin: 0;
max-height: 300px;
overflow: auto;
Expand All @@ -84,12 +95,23 @@
&:empty {
display: none;
}
.has-dark-controls & {
background-color: $select-dropdown-dark;
color: $input-text-dark;
}
}

.components-custom-select-control__item {
@include font-size(regular);
margin-left: 0;
padding-left: $gap;
&:hover,
&:focus,
&.is-highlighted {
.has-dark-controls & {
background-color: $select-item-dark;
}
}
}

.components-custom-select-control__item-icon {
Expand Down
5 changes: 5 additions & 0 deletions assets/js/base/components/tabs/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
text-align: center;
transition: box-shadow 0.1s linear;
box-shadow: inset 0 -1px currentColor;
border-radius: 0;
&.is-active {
box-shadow: inset 0 -3px currentColor;
font-weight: 600;
Expand All @@ -23,6 +24,10 @@
outline-offset: -1px;
outline: 1px dotted currentColor;
}
&:hover,
&:active {
background: transparent;
}
.wc-block-components-tabs__item-content {
@include font-size(regular);
line-height: 1;
Expand Down
8 changes: 8 additions & 0 deletions assets/js/base/components/text-input/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
max-width: calc(100% - #{2 * $gap});
cursor: text;

.has-dark-controls & {
color: $input-placeholder-dark;
}
@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
Expand Down Expand Up @@ -54,6 +57,11 @@
&:focus {
background-color: #fff;
}
.has-dark-controls & {
background-color: $input-background-dark;
border-color: $input-border-dark;
color: $input-text-dark;
}
Copy link
Member

Choose a reason for hiding this comment

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

❤️ how clean and simple all the new dark-mode rules are now - opt-in to alternative, standardised colours. 👌

}

&.is-active input[type="tel"],
Expand Down
10 changes: 10 additions & 0 deletions assets/js/base/components/textarea/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,14 @@
margin: 0;
padding: em($gap-small) $gap;
width: 100%;

.has-dark-controls & {
background-color: $input-background-dark;
border-color: rgba(255, 255, 255, 0.4);
color: #fff;

&::placeholder {
color: rgba(255, 255, 255, 0.6);
senadir marked this conversation as resolved.
Show resolved Hide resolved
}
}
}
5 changes: 5 additions & 0 deletions assets/js/blocks/cart-checkout/cart/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import {
IS_SHIPPING_CALCULATOR_ENABLED,
IS_SHIPPING_COST_HIDDEN,
HAS_DARK_EDITOR_STYLE_SUPPORT,
} from '@woocommerce/block-settings';

const blockAttributes = {
Expand All @@ -24,6 +25,10 @@ const blockAttributes = {
type: 'number',
default: 0,
},
hasDarkControls: {
type: 'boolean',
default: HAS_DARK_EDITOR_STYLE_SUPPORT,
Copy link
Member

Choose a reason for hiding this comment

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

This might not be a big deal .. but I'm still a bit confused about the relationship between current_theme_supports( 'dark-editor-style' ) and our new block setting.

  • dark-editor-style is an editor-focused option, informing Gutenberg that it should use dark mode to work better with the editor styles for the theme
  • hasDarkControls is a front-end, shopper experience option

I think it's probably fine to use it as the default, but since they are quite different it would be good to have a comment explaining the intention with the default.

Here's my understanding of why we're using this as the default:

  • If a theme is predominantly "dark", it's likely to want to opt-in to our dark mode for cart/checkout elements.
  • Themes that have user-defined color options (e.g. Storefront) won't get the benefit of the default, because they won't declare "dark"ness, since it's customizer dependent.

Copy link
Member Author

Choose a reason for hiding this comment

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

If a theme is predominantly "dark", it's likely to want to opt-in to our dark mode for cart/checkout elements.
Themes that have user-defined color options (e.g. Storefront) won't get the benefit of the default, because they won't declare "dark"ness, since it's customizer dependent.

Yes, we have this method to assume a theme is dark:

  • The themes supports dark-editor-style, by explicitly supporting this, most editor borders and placeholders will be white, making them illegible on white background, by this we can assume the background is dark.

A theme can also register support for custom-background, however I'm not aware if there's a standardized way of fetching that value, get_theme_support will only fetch the default value.
If we can fetch the custom-background value, we can run some calculations (like TwentyTwenty) to see if the background is dark or light, and set the default based on that.

},
};

export default blockAttributes;
19 changes: 19 additions & 0 deletions assets/js/blocks/cart-checkout/cart/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
isShippingCalculatorEnabled,
isShippingCostHidden,
checkoutPageId,
hasDarkControls,
} = attributes;
const { currentPostId } = useEditorContext();
const { current: savedCheckoutPageId } = useRef( checkoutPageId );
Expand Down Expand Up @@ -68,6 +69,24 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
) }
</Notice>
) }
<PanelBody title={ __( 'Style', 'woo-gutenberg-products-block' ) }>
<ToggleControl
label={ __(
'Dark mode inputs',
'woo-gutenberg-products-block'
) }
help={ __(
'Inputs styled specifically for use on dark background colors.',
Copy link
Member

Choose a reason for hiding this comment

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

Nice new wording!

'woo-gutenberg-products-block'
) }
checked={ hasDarkControls }
onChange={ () =>
setAttributes( {
hasDarkControls: ! hasDarkControls,
} )
}
/>
</PanelBody>
{ SHIPPING_ENABLED && (
<PanelBody
title={ __(
Expand Down
7 changes: 6 additions & 1 deletion assets/js/blocks/cart-checkout/cart/full-cart/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,11 @@ import './style.scss';
* Component that renders the Cart block when user has something in cart aka "full".
*/
const Cart = ( { attributes } ) => {
const { isShippingCalculatorEnabled, isShippingCostHidden } = attributes;
const {
isShippingCalculatorEnabled,
isShippingCostHidden,
hasDarkControls,
} = attributes;

const {
cartItems,
Expand Down Expand Up @@ -82,6 +86,7 @@ const Cart = ( { attributes } ) => {

const cartClassName = classnames( 'wc-block-cart', {
'wc-block-cart--is-loading': cartIsLoading,
'has-dark-controls': hasDarkControls,
} );

return (
Expand Down
9 changes: 9 additions & 0 deletions assets/js/blocks/cart-checkout/checkout/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import { HAS_DARK_EDITOR_STYLE_SUPPORT } from '@woocommerce/block-settings';

const blockAttributes = {
isPreview: {
type: 'boolean',
Expand Down Expand Up @@ -40,6 +45,10 @@ const blockAttributes = {
type: 'number',
default: 0,
},
hasDarkControls: {
type: 'boolean',
default: HAS_DARK_EDITOR_STYLE_SUPPORT,
},
};

export default blockAttributes;
6 changes: 5 additions & 1 deletion assets/js/blocks/cart-checkout/checkout/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import { useMemo, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
Expand Down Expand Up @@ -211,9 +212,12 @@ const Checkout = ( { attributes, scrollToTop } ) => {
</>
);

const checkoutClassName = classnames( 'wc-block-checkout', {
'has-dark-controls': attributes.hasDarkControls,
} );
return (
<>
<SidebarLayout className="wc-block-checkout">
<SidebarLayout className={ checkoutClassName }>
<Main className="wc-block-checkout__main">
{ cartNeedsPayment && <ExpressCheckoutFormControl /> }
<CheckoutForm onSubmit={ onSubmit }>
Expand Down