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

Update Panel component class names to follow guidelines (https://github.com/woocommerce/woocommerce-blocks/pull/3860) 

* Rename panel class names to follow correct guidelines

* Remove unused CSS

* Add docs page link
This commit is contained in:
Albert Juhé Lluveras 2021-02-17 14:48:53 +01:00 committed by GitHub
parent 5f5bcd7c06
commit b2339bda5d
8 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
View File

@ -143,21 +143,6 @@
}
}
.wc-blocks-credit-card-images {
padding-top: $gap-small;
display: flex;
.wc-blocks-credit-cart-icon {
height: 18px;
width: auto;
margin-right: $gap-small;
&:last-child {
margin-right: 0;
}
}
}
.wc-block-components-checkout-payment-methods * {
pointer-events: all; // Overrides parent disabled component in editor context
}

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

@ -18,7 +18,7 @@
padding-left: percentage($gap-large / 1060px);
width: 35%;
.wc-blocks-components-panel > h2 {
.wc-block-components-panel > h2 {
@include font-size(regular);
@include reset-box();
}
@ -45,7 +45,7 @@
.is-large {
.wc-block-components-sidebar {
.wc-block-components-totals-item,
.wc-blocks-components-panel {
.wc-block-components-panel {
padding-left: $gap;
padding-right: $gap;
}
@ -54,7 +54,7 @@
// For Twenty Twenty we need to increase specificity a bit more.
.theme-twentytwenty {
.wc-block-components-sidebar .wc-blocks-components-panel > h2 {
.wc-block-components-sidebar .wc-block-components-panel > h2 {
@include font-size(large);
@include reset-box();
}

2
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
View File

@ -247,7 +247,7 @@ table.wc-block-cart-items {
.wc-block-components-sidebar {
.wc-block-components-shipping-calculator,
.wc-block-components-shipping-rates-control__package:not(.wc-blocks-components-panel) {
.wc-block-components-shipping-rates-control__package:not(.wc-block-components-panel) {
padding-left: $gap;
padding-right: $gap;
}

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

@ -38,7 +38,7 @@ Some of our components have responsive classes depending on the container width.
Those classes are:
| Container width | Class name |
| --------------- | ----------- |
|-----------------|-------------|
| >700px | `is-large` |
| 521px-700px | `is-medium` |
| 401px-520px | `is-small` |
@ -78,3 +78,4 @@ WooCommerce Blocks avoids using legacy unprefixed classes as much as possible. H
- [Class names update in 2.8.0](./class-names-update-280.md)
- [Class names update in 3.3.0](./class-names-update-330.md)
- [Class names update in 3.4.0](./class-names-update-340.md)
- [Class names update in 4.6.0](./class-names-update-460.md)

12
plugins/woocommerce-blocks/docs/theming/class-names-update-460.md Normal file
View File

@ -0,0 +1,12 @@
# Class names update in 4.6.0
In WC Blocks 4.6.0, some class names were updated in order to follow the same guidelines from other classes.
## Replaced classes
| Removed | New class name |
|-------------------------------------------|------------------------------------------|
| `wc-blocks-components-panel` | `wc-block-components-panel` |
| `wc-blocks-components-panel__button` | `wc-block-components-panel__button` |
| `wc-blocks-components-panel__button-icon` | `wc-block-components-panel__button-icon` |
| `wc-blocks-components-panel__content` | `wc-block-components-panel__content` |

8
plugins/woocommerce-blocks/packages/checkout/panel/index.js
View File

@ -23,26 +23,26 @@ const Panel = ( {
return (
<div
className={ classNames( className, 'wc-blocks-components-panel', {
className={ classNames( className, 'wc-block-components-panel', {
'has-border': hasBorder,
} ) }
>
<TitleTag>
<button
aria-expanded={ isOpen }
className="wc-blocks-components-panel__button"
className="wc-block-components-panel__button"
onClick={ () => setIsOpen( ! isOpen ) }
>
<Icon
aria-hidden="true"
className="wc-blocks-components-panel__button-icon"
className="wc-block-components-panel__button-icon"
srcElement={ isOpen ? chevronUp : chevronDown }
/>
{ title }
</button>
</TitleTag>
<div
className="wc-blocks-components-panel__content"
className="wc-block-components-panel__content"
hidden={ ! isOpen }
>
{ children }

16
plugins/woocommerce-blocks/packages/checkout/panel/style.scss
View File

@ -1,12 +1,12 @@
.wc-blocks-components-panel.has-border {
.wc-block-components-panel.has-border {
@include with-translucent-border( 1px 0 );
+ .wc-blocks-components-panel.has-border::after {
+ .wc-block-components-panel.has-border::after {
border-top-width: 0;
}
}
.wc-blocks-components-panel__button {
.wc-block-components-panel__button {
@include reset-box();
height: auto;
line-height: 1;
@ -28,7 +28,7 @@
box-shadow: none;
}
> .wc-blocks-components-panel__button-icon {
> .wc-block-components-panel__button-icon {
fill: currentColor;
position: absolute;
right: 0;
@ -38,7 +38,7 @@
}
}
.wc-blocks-components-panel__content {
.wc-block-components-panel__content {
padding-bottom: em($gap);
// Ensures the panel contents are not visible for any theme that tweaked the
@ -49,13 +49,13 @@
}
// Extra classes for specificity.
.theme-twentytwentyone.theme-twentytwentyone.theme-twentytwentyone .wc-blocks-components-panel__button {
.theme-twentytwentyone.theme-twentytwentyone.theme-twentytwentyone .wc-block-components-panel__button {
background-color: inherit;
color: inherit;
}
.theme-twentytwenty .wc-blocks-components-panel__button,
.theme-twentyseventeen .wc-blocks-components-panel__button {
.theme-twentytwenty .wc-block-components-panel__button,
.theme-twentyseventeen .wc-block-components-panel__button {
background: transparent;
color: inherit;
}

4
plugins/woocommerce-blocks/packages/checkout/shipping/shipping-rates-control/style.scss
View File

@ -1,5 +1,5 @@
.wc-block-components-shipping-rates-control__package {
.wc-blocks-components-panel__button {
.wc-block-components-panel__button {
margin-bottom: 0;
margin-top: 0;
padding-bottom: em($gap-small);
@ -14,7 +14,7 @@
// Remove panel padding because we are adding bottom padding to `.wc-block-components-radio-control`
// and `.wc-block-components-radio-control__option-layout` in the next ruleset.
.wc-blocks-components-panel__content {
.wc-block-components-panel__content {
padding-bottom: 0;
}