diff --git a/packages/js/internal-style-build/abstracts/_mixins.scss b/packages/js/internal-style-build/abstracts/_mixins.scss index aec22045af3..43ab642052d 100644 --- a/packages/js/internal-style-build/abstracts/_mixins.scss +++ b/packages/js/internal-style-build/abstracts/_mixins.scss @@ -1,7 +1,7 @@ // Rem output with px fallback @mixin font-size( $sizeValue: 16, $lineHeight: false ) { font-size: $sizeValue + px; - font-size: math.div($sizeValue, 16) + rem; + font-size: math.div( $sizeValue, 16 ) + rem; @if ( $lineHeight ) { line-height: $lineHeight; } @@ -106,7 +106,7 @@ background-color: $studio-white; color: $gray-900; box-shadow: inset 0 0 0 1px $gray-400, inset 0 0 0 2px $studio-white, - 0 1px 1px rgba($gray-900, 0.2); + 0 1px 1px rgba( $gray-900, 0.2 ); } @mixin button-style__active() { @@ -145,7 +145,6 @@ } /* stylelint-enable */ - // Gutenberg Switch. @mixin switch-style__focus-active() { box-shadow: 0 0 0 2px $studio-white, 0 0 0 3px $gray-700; @@ -158,19 +157,20 @@ // Sets positions for children of grid elements @mixin set-grid-item-position( $wrap-after, $number-of-items ) { @for $i from 1 through $number-of-items { - &:nth-child(#{$i}) { - grid-column-start: #{($i - 1) % $wrap-after + 1}; - grid-column-end: #{($i - 1) % $wrap-after + 2}; - grid-row-start: #{floor(math.div($i - 1, $wrap-after)) + 1}; - grid-row-end: #{floor(math.div($i - 1, $wrap-after)) + 2}; + &:nth-child( #{$i} ) { + grid-column-start: #{( $i - 1 ) % $wrap-after + 1}; + grid-column-end: #{( $i - 1 ) % $wrap-after + 2}; + grid-row-start: #{floor( math.div( $i - 1, $wrap-after ) ) + 1}; + grid-row-end: #{floor( math.div( $i - 1, $wrap-after ) ) + 2}; } } } // Hide an element from sighted users, but availble to screen reader users. +// @deprecated in favor of screen-reader-only @mixin visually-hidden() { - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); + clip: rect( 1px, 1px, 1px, 1px ); + clip-path: inset( 50% ); height: 1px; width: 1px; margin: -1px; @@ -180,7 +180,20 @@ word-wrap: normal !important; } +@mixin screen-reader-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect( 0, 0, 0, 0 ); + white-space: nowrap; + border-width: 0; +} + // Unhide a visually hidden element +// @deprecated in favor of not-screen-reader-only @mixin visually-shown() { clip: auto; clip-path: none; @@ -190,6 +203,17 @@ overflow: hidden; } +@mixin not-screen-reader-only { + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; +} + // Create a string-repeat function @function str-repeat( $character, $n ) { @if $n == 0 { diff --git a/packages/js/internal-style-build/changelog/enhancement-35565 b/packages/js/internal-style-build/changelog/enhancement-35565 new file mode 100644 index 00000000000..c69b2129169 --- /dev/null +++ b/packages/js/internal-style-build/changelog/enhancement-35565 @@ -0,0 +1,4 @@ +Significance: patch +Type: enhancement + +Add updated versions of screen-reader-only and not-screen-reader-only mixins diff --git a/plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.scss b/plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.scss index 3453461ef8a..1827a6e24ba 100644 --- a/plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.scss +++ b/plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.scss @@ -32,6 +32,12 @@ width: 100%; margin-top: $gap-large; + @include breakpoint( '<782px' ) { + thead { + @include screen-reader-only(); + } + } + th { text-align: left; color: $gray-700; @@ -54,10 +60,39 @@ td:not(:last-child) { margin-right: $gap; } + + @include breakpoint( '<782px' ) { + position: relative; + grid-template-columns: 1fr; + // Added the width of the trash icon as padding + // so that it can be displayed correctly + padding-right: 42px; + } + + @include breakpoint( '>782px' ) { + .woocommerce-experimental-select-control__label { + @include screen-reader-only(); + } + .woocommerce-experimental-select-control__combo-box-wrapper { + margin-bottom: 0; + } + } } &__table-attribute-trash-column { display: flex; justify-content: center; + + @include breakpoint( '<782px' ) { + position: absolute; + top: 0; + right: 0; + bottom: 0; + align-items: center; + } + + .components-button.has-icon { + padding: 8px; + } } } diff --git a/plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.tsx b/plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.tsx index 9ec22d666de..fb2bd1f0554 100644 --- a/plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.tsx +++ b/plugins/woocommerce-admin/client/products/fields/attribute-field/add-attribute-modal.tsx @@ -124,6 +124,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( { } }; + const attributeLabel = __( 'Attribute', 'woocommerce' ); + const valueLabel = __( 'Values', 'woocommerce' ); + return ( <> @@ -167,8 +170,8 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( { - - + + @@ -185,6 +188,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( { 'woocommerce' ) } value={ attribute } + label={ + attributeLabel + } onChange={ ( val ) => { @@ -246,6 +252,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( { ? [] : attribute.terms } + label={ + valueLabel + } onChange={ ( val ) => @@ -269,6 +278,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( { value={ attribute.options } + label={ + valueLabel + } onChange={ ( val ) => diff --git a/plugins/woocommerce/changelog/enhancement-35565 b/plugins/woocommerce/changelog/enhancement-35565 new file mode 100644 index 00000000000..0af3dfe5f2f --- /dev/null +++ b/plugins/woocommerce/changelog/enhancement-35565 @@ -0,0 +1,4 @@ +Significance: patch +Type: enhancement + +Improve element stacking in modals on tablet and mobile
AttributeValues{ attributeLabel }{ valueLabel }