Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Don't add the hidden class name to elements with the hidden attribute (https://github.com/woocommerce/woocommerce-blocks/pull/3582) 

* Revert "Add 'hidden' class name when using the 'hidden' attribute"

This reverts commit 0332e33a60a516506718e8ed4659e45d32dc80a4.

* Add styles for hidden panel content

* Add docs about account for the hidden attribute in styles

* Update docs/theming/README.md

Co-authored-by: Rua Haszard <rua.haszard@automattic.com>

Co-authored-by: Rua Haszard <rua.haszard@automattic.com>
This commit is contained in:
Albert Juhé Lluveras 2020-12-22 10:26:59 +01:00 committed by GitHub
parent a713e56c7a
commit 257c970726
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js
View File

@ -1,8 +1,3 @@
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* Quantity Input Component.
*
@ -16,10 +11,7 @@ import classnames from 'classnames';
const QuantityInput = ( { disabled, min, max, value, onChange } ) => {
return (
<input
className={ classnames(
'wc-block-components-product-add-to-cart-quantity',
{ hidden: max === 1 }
) }
className="wc-block-components-product-add-to-cart-quantity"
type="number"
value={ value }
min={ min }

4
plugins/woocommerce-blocks/assets/js/base/components/panel/index.js
View File

@ -42,9 +42,7 @@ const Panel = ( {
</button>
</TitleTag>
<div
className={ classNames( 'wc-blocks-components-panel__content', {
hidden: ! isOpen,
} ) }
className="wc-blocks-components-panel__content"
hidden={ ! isOpen }
>
{ children }

6
plugins/woocommerce-blocks/assets/js/base/components/panel/style.scss
View File

@ -41,6 +41,12 @@
.wc-blocks-components-panel__content {
padding-bottom: em($gap);
overflow: auto;
// Ensures the panel contents are not visible for any theme that tweaked the
// `display` property of div elements.
&[hidden] {
display: none;
}
}
.theme-twentytwenty .wc-blocks-components-panel__button,

4
plugins/woocommerce-blocks/docs/theming/README.md
View File

@ -59,6 +59,10 @@ WooCommerce Blocks uses HTML elements according to their semantic meaning, not t
In these cases, Blocks include some CSS resets to undo most default styles introduced by themes. A `<button>` that is displayed as a text link will probably have resets for the background, border, etc. That will solve most conflicts out-of-the-box but in some occasions those CSS resets might not have effect if the theme has a specific CSS selector with higher specificity. When that happens, we really encourage theme developers to decrease their selectors specificity so Blocks styles have preference, if that's not possible, themes can write CSS resets on top.
### Hidden elements
WC Blocks use the [`hidden` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) to hide some elements from the UI so they are not displayed in screens neither read by assistive technologies. If your theme has some generic styles that tweak the CSS display property of blocks elements (ie: `div { display: block; }`), make sure you correctly handle the hidden attribute: `div[hidden] { display: none; }`.
### Legacy classes from WooCommerce (.price, .star-rating, .button...)
WooCommerce Blocks avoids using legacy unprefixed classes as much as possible. However, you might find some of them that have been added for backwards compatibility. We still encourage themes to use the prefixed classes when possible, this avoids conflicts with other plugins, the editor, etc.