Improve element stacking in modals on tablet and mobile (#35733)
* Add updated versions of sr-only and not-sr-only mixins * Improve element stacking in modals on tablet and mobile * Add comment suggestion * Change sr-only for screen-reader-only which is more descriptive
This commit is contained in:
Maikel David Pérez Gómez
GitHub
parent
1e9fff35c0
commit
25a7c35cf4
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: enhancement
|
||||
|
||||
Add updated versions of screen-reader-only and not-screen-reader-only mixins
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,6 +124,9 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( {
|
|||
}
|
||||
};
|
||||
|
||||
const attributeLabel = __( 'Attribute', 'woocommerce' );
|
||||
const valueLabel = __( 'Values', 'woocommerce' );
|
||||
|
||||
return (
|
||||
<>
|
||||
<Form< AttributeForm >
|
||||
|
|
@ -167,8 +170,8 @@ export const AddAttributeModal: React.FC< AddAttributeModalProps > = ( {
|
|||
<table className="woocommerce-add-attribute-modal__table">
|
||||
<thead>
|
||||
<tr className="woocommerce-add-attribute-modal__table-header">
|
||||
<th>Attribute</th>
|
||||
<th>Values</th>
|
||||
<th>{ attributeLabel }</th>
|
||||
<th>{ valueLabel }</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -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
|
||||
) =>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: enhancement
|
||||
|
||||
Improve element stacking in modals on tablet and mobile
|
||||
Loading…
Reference in New Issue