Remove pnpm-lock.yaml

This commit is contained in:
Niels Lange 2024-07-11 17:24:53 +02:00
parent a43a1ad34a
commit df4b87940d
No known key found for this signature in database
GPG Key ID: 1C3F03249476BAC0
10 changed files with 59 additions and 41 deletions

View File

@ -1,6 +1,6 @@
.wc-block-components-totals-discount__coupon-list { .wc-block-components-totals-discount__coupon-list {
list-style: none; list-style: none;
margin: 0; margin: $gap-smallest 0 0;
padding: 0; padding: 0;
} }

View File

@ -3,12 +3,13 @@
*/ */
import clsx from 'clsx'; import clsx from 'clsx';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useEffect, useId, useRef } from '@wordpress/element'; import { useEffect, useId, useRef, useState } from '@wordpress/element';
import { ComboboxControl } from 'wordpress-components'; import { ComboboxControl } from 'wordpress-components';
import { ValidationInputError } from '@woocommerce/blocks-components'; import { ValidationInputError } from '@woocommerce/blocks-components';
import { isObject } from '@woocommerce/types'; import { isObject } from '@woocommerce/types';
import { useDispatch, useSelect } from '@wordpress/data'; import { useDispatch, useSelect } from '@wordpress/data';
import { VALIDATION_STORE_KEY } from '@woocommerce/block-data'; import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
/** /**
* Internal dependencies * Internal dependencies
@ -65,6 +66,8 @@ const Combobox = ( {
}; };
} ); } );
const [ isFocused, setIsFocused ] = useState( false );
useEffect( () => { useEffect( () => {
if ( ! required || value ) { if ( ! required || value ) {
clearValidationError( errorId ); clearValidationError( errorId );
@ -98,11 +101,17 @@ const Combobox = ( {
'has-error': error?.message && ! error?.hidden, 'has-error': error?.message && ! error?.hidden,
} ) } } ) }
ref={ controlRef } ref={ controlRef }
onFocus={ () => setIsFocused( true ) }
onBlur={ () => setIsFocused( false ) }
> >
<ComboboxControl <ComboboxControl
className={ 'wc-block-components-combobox-control' } className={ 'wc-block-components-combobox-control' }
label={ label } label={ label }
onChange={ onChange } onChange={ ( selectedValue: string ) => {
onChange( selectedValue );
setIsFocused( false );
} }
onSelect={ () => setIsFocused( false ) }
onFilterValueChange={ ( filterValue: string ) => { onFilterValueChange={ ( filterValue: string ) => {
if ( filterValue.length ) { if ( filterValue.length ) {
// If we have a value and the combobox is not focussed, this could be from browser autofill. // If we have a value and the combobox is not focussed, this could be from browser autofill.
@ -154,6 +163,7 @@ const Combobox = ( {
aria-invalid={ error?.message && ! error?.hidden } aria-invalid={ error?.message && ! error?.hidden }
aria-errormessage={ validationErrorId } aria-errormessage={ validationErrorId }
/> />
<Icon icon={ isFocused ? chevronUp : chevronDown } />
<ValidationInputError propertyName={ errorId } /> <ValidationInputError propertyName={ errorId } />
</div> </div>
); );

View File

@ -6,6 +6,16 @@
.wc-block-components-form .wc-block-components-combobox, .wc-block-components-form .wc-block-components-combobox,
.wc-block-components-combobox { .wc-block-components-combobox {
position: relative;
svg {
fill: currentColor;
position: absolute;
right: 15px;
top: 15px;
pointer-events: none;
}
.wc-block-components-combobox-control { .wc-block-components-combobox-control {
@include reset-typography(); @include reset-typography();
@include reset-box(); @include reset-box();
@ -31,10 +41,10 @@
line-height: em($gap); line-height: em($gap);
box-sizing: border-box; box-sizing: border-box;
outline: inherit; outline: inherit;
border: 1px solid $input-border-gray; border: 1px solid $universal-border-light;
background: #fff; background: #fff;
box-shadow: none; box-shadow: none;
color: $input-text-active; color: currentColor;
font-family: inherit; font-family: inherit;
font-weight: normal; font-weight: normal;
letter-spacing: inherit; letter-spacing: inherit;
@ -45,14 +55,14 @@
width: 100%; width: 100%;
opacity: initial; opacity: initial;
border-radius: $universal-border-radius; border-radius: $universal-border-radius;
max-height: 52px; max-height: 50px;
&[aria-expanded="true"], &[aria-expanded="true"],
&:focus { &:focus {
background-color: #fff; background-color: #fff;
color: $input-text-active;
outline: 0; outline: 0;
box-shadow: 0 0 0 1px $input-border-gray; box-shadow: 0 0 0 2px currentColor;
border-bottom: 0;
} }
&[aria-expanded="true"] { &[aria-expanded="true"] {
@ -68,7 +78,7 @@
&:focus { &:focus {
background-color: $input-background-dark; background-color: $input-background-dark;
color: $input-text-dark; color: $input-text-dark;
box-shadow: 0 0 0 1px $input-border-dark; box-shadow: 0 0 0 2px $input-border-gray;
} }
} }
} }
@ -76,18 +86,19 @@
position: absolute; position: absolute;
z-index: 10; z-index: 10;
background-color: $select-dropdown-light; background-color: $select-dropdown-light;
border: 1px solid $input-border-gray; border: 2px solid currentColor;
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom-width: 2px;
margin: 3em 0 0 0; margin: 3em 0 0 0;
padding: 0; padding: 0;
max-height: 300px; max-height: 300px;
min-width: 100%; min-width: calc(100% + 4px);
left: -2px;
top: -1px;
overflow: auto; overflow: auto;
color: currentColor; color: currentColor;
border-bottom-left-radius: $universal-border-radius; border-bottom-left-radius: $universal-border-radius;
border-bottom-right-radius: $universal-border-radius; border-bottom-right-radius: $universal-border-radius;
box-shadow: 0 1px 0 1px $input-border-gray;
box-sizing: border-box; box-sizing: border-box;
.has-dark-controls & { .has-dark-controls & {
@ -97,7 +108,7 @@
.components-form-token-field__suggestion { .components-form-token-field__suggestion {
@include font-size(regular); @include font-size(regular);
color: $gray-700; color: currentColor;
cursor: default; cursor: default;
list-style: none; list-style: none;
margin: 0; margin: 0;
@ -133,10 +144,10 @@
transform: translateY(em($gap)); transform: translateY(em($gap));
line-height: 1.25; // =20px when font-size is 16px. line-height: 1.25; // =20px when font-size is 16px.
left: em($gap-smaller); left: em($gap-smaller);
top: -2px; top: 0;
transform-origin: top left; transform-origin: top left;
transition: all 200ms ease; transition: all 200ms ease;
color: $universal-body-low-emphasis; color: currentColor;
z-index: 1; z-index: 1;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@ -155,7 +166,7 @@
.wc-block-components-combobox-control:has(input:-webkit-autofill) { .wc-block-components-combobox-control:has(input:-webkit-autofill) {
label { label {
transform: translateY(em($gap-smaller)) scale(0.875); transform: translateY(25%) scale(0.75);
} }
} }
@ -163,7 +174,7 @@
&:focus-within { &:focus-within {
.wc-block-components-combobox-control .wc-block-components-combobox-control
label.components-base-control__label { label.components-base-control__label {
transform: translateY(em($gap-smaller)) scale(0.875); transform: translateY(25%) scale(0.75);
} }
} }

View File

@ -65,6 +65,7 @@
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: currentColor;
font-size: inherit; font-size: inherit;
margin-top: $gap; margin-top: $gap;
text-align: left; text-align: left;

View File

@ -12,13 +12,14 @@
.wc-block-checkout__add-note .wc-block-components-textarea { .wc-block-checkout__add-note .wc-block-components-textarea {
border: 1px solid $universal-border-light;
margin-top: $gap; margin-top: $gap;
&:focus { &:focus {
background-color: #fff; background-color: #fff;
color: $input-text-active; color: currentColor;
outline: 0; outline: 0;
box-shadow: 0 0 0 1px $input-border-gray; box-shadow: 0 0 0 2px currentColor;
} }
} }

View File

@ -44,13 +44,8 @@
color: #333; color: #333;
} }
&.wc-block-checkout__shipping-method-option--selected { &.wc-block-checkout__shipping-method-option--selected {
outline: 1px solid $universal-border-strong; outline: 2px solid currentColor !important; // Overwriting previous !important statement
background-color: $universal-background; background-color: $universal-background;
&:focus {
outline: 1px solid $universal-border-strong;
background-color: $universal-background;
}
} }
} }

View File

@ -22,6 +22,7 @@
border: 1px solid $universal-border-medium; border: 1px solid $universal-border-medium;
border-radius: $universal-border-radius; border-radius: $universal-border-radius;
box-sizing: border-box; box-sizing: border-box;
color: currentColor;
height: em(24px); height: em(24px);
width: em(24px); width: em(24px);
margin: 0; margin: 0;
@ -34,11 +35,11 @@
background-color: #fff; background-color: #fff;
&:checked { &:checked {
background: #fff; border: 1px solid currentColor;
} }
&:focus { &:focus {
outline: 1px solid $universal-border-strong; outline: 2px solid currentColor;
outline-offset: 2px; outline-offset: 2px;
} }
@ -88,7 +89,7 @@
} }
.wc-block-components-checkbox__mark { .wc-block-components-checkbox__mark {
fill: #000; fill: currentColor;
position: absolute; position: absolute;
margin-left: em(3px); margin-left: em(3px);
margin-top: em(1px); margin-top: em(1px);

View File

@ -161,6 +161,7 @@
background: #fff; background: #fff;
border: 1px solid $universal-border-medium; border: 1px solid $universal-border-medium;
border-radius: 50%; border-radius: 50%;
color: currentColor;
display: inline-block; display: inline-block;
height: em(24px); // =1.5rem height: em(24px); // =1.5rem
min-height: 24px; min-height: 24px;
@ -174,16 +175,16 @@
margin: inherit; margin: inherit;
cursor: pointer; cursor: pointer;
&:checked { &:checked {
border: 1px solid $universal-border-strong; border: 1px solid currentColor;
} }
&:focus { &:focus {
outline: 1px solid $universal-border-strong; outline: 2px solid currentColor;
outline-offset: 2px; outline-offset: 2px;
} }
&:checked::before { &:checked::before {
background: #000; background: currentColor;
border-radius: 50%; border-radius: 50%;
content: ""; content: "";
display: block; display: block;

View File

@ -5,7 +5,6 @@
white-space: nowrap; white-space: nowrap;
label { label {
@include reset-color();
@include reset-typography(); @include reset-typography();
@include font-size(regular); @include font-size(regular);
position: absolute; position: absolute;
@ -14,7 +13,7 @@
left: em($gap-smaller + 1px); left: em($gap-smaller + 1px);
top: 0; top: 0;
transform-origin: top left; transform-origin: top left;
color: $universal-body-low-emphasis; color: currentColor;
transition: all 200ms ease; transition: all 200ms ease;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@ -49,7 +48,7 @@
line-height: em($gap); line-height: em($gap);
width: 100%; width: 100%;
border-radius: $universal-border-radius; border-radius: $universal-border-radius;
border: 1px solid $universal-border-strong; border: 1px solid $universal-border-light;
font-family: inherit; font-family: inherit;
margin: 0; margin: 0;
@ -57,13 +56,12 @@
min-height: 0; min-height: 0;
max-height: 52px; max-height: 52px;
background-color: #fff; background-color: #fff;
color: $input-text-active; color: currentColor;
&:focus { &:focus {
background-color: #fff; background-color: #fff;
color: $input-text-active;
outline: 0; outline: 0;
box-shadow: 0 0 0 1px $input-border-gray; box-shadow: 0 0 0 2px currentColor;
} }
.has-dark-controls & { .has-dark-controls & {
@ -74,7 +72,7 @@
&:focus { &:focus {
background-color: $input-background-dark; background-color: $input-background-dark;
color: $input-text-dark; color: $input-text-dark;
box-shadow: 0 0 0 1px $input-border-dark; box-shadow: 0 0 0 2px $input-border-dark;
} }
} }
} }
@ -90,7 +88,7 @@
&.is-active label, &.is-active label,
input:-webkit-autofill + label { input:-webkit-autofill + label {
transform: translateY(em($gap-smaller)) scale(0.875); transform: translateY(25%) scale(0.75);
} }
&.has-error input { &.has-error input {

View File

@ -3,7 +3,7 @@
background-color: #fff; background-color: #fff;
border: 1px solid $universal-border-strong; border: 1px solid $universal-border-strong;
border-radius: $universal-border-radius; border-radius: $universal-border-radius;
color: $input-text-active; color: currentColor;
font-family: inherit; font-family: inherit;
line-height: 1.375; // =22px when font-size is 16px. line-height: 1.375; // =22px when font-size is 16px.
margin: 0; margin: 0;