Remove pnpm-lock.yaml
This commit is contained in:
parent
a43a1ad34a
commit
df4b87940d
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue