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

Update the checked input radio button margin style (https://github.com/woocommerce/woocommerce-admin/pull/6701) 

* Add component RadioControl and remove List
This commit is contained in:
Hsing-yu Flowers 2021-04-20 12:22:10 -04:00 committed by GitHub
parent a336c54e22
commit 15897e1bbb
4 changed files with 59 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md
View File

@ -32,6 +32,11 @@
1. Visit any admin page with the params `plugin_action` (`install`, `activate`, or `install-activate`) and `plugins` (list of comma separated plugins). `wp-admin/admin.php?page=wc-admin&plugin_action=install&plugins=jetpack`
2. If visiting this URL from a link, make sure you are sent back to the referer.
3. Check that the plugins provided are installed, activated, or both depending on your query.
### Update the checked input radio button margin style #6701
1. Go to Home.
2. Click on 'Add my products'.
3. Select 'Start with a template'.
4. Click on the input radio button and see that render as expected.
### Retain persisted queries when navigating to Homescreen #6614

59
plugins/woocommerce-admin/client/task-list/tasks/products/product-template-modal.js
View File

@ -2,14 +2,13 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, Modal } from '@wordpress/components';
import { Button, Modal, RadioControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { applyFilters } from '@wordpress/hooks';
import { ITEMS_STORE_NAME } from '@woocommerce/data';
import { getAdminLink } from '@woocommerce/wc-admin-settings';
import { recordEvent } from '@woocommerce/tracks';
import { List } from '@woocommerce/components';
/**
* Internal dependencies
@ -48,7 +47,7 @@ const PRODUCT_TEMPLATES = [
];
export default function ProductTemplateModal( { onClose } ) {
const [ selectedTemplate, setSelectedTemplate ] = useState();
const [ selectedTemplate, setSelectedTemplate ] = useState( null );
const [ isRedirecting, setIsRedirecting ] = useState( false );
const { createProductFromTemplate } = useDispatch( ITEMS_STORE_NAME );
@ -85,11 +84,6 @@ export default function ProductTemplateModal( { onClose } ) {
}
};
const onSelectTemplateClick = ( event ) => {
const val = event.target && event.target.value;
setSelectedTemplate( val );
};
const templates = applyFilters(
ONBOARDING_PRODUCT_TEMPLATES_FILTER,
PRODUCT_TEMPLATES
@ -104,36 +98,25 @@ export default function ProductTemplateModal( { onClose } ) {
>
<div className="woocommerce-product-template-modal__wrapper">
<div className="woocommerce-product-template-modal__list">
<List items={ templates }>
{ ( item, index ) => (
<div className="woocommerce-list__item-inner">
<input
id={ `product-templates-${
item.key || index
}` }
className="components-radio-control__input"
type="radio"
name="product-template-options"
value={ item.key }
onChange={ onSelectTemplateClick }
checked={ item.key === selectedTemplate }
/>
<label
className="woocommerce-list__item-text"
htmlFor={ `product-templates-${
item.key || index
}` }
>
<div className="woocommerce-list__item-label">
{ item.title }
</div>
<div className="woocommerce-list__item-subtitle">
{ item.subtitle }
</div>
</label>
</div>
) }
</List>
<RadioControl
selected={ selectedTemplate }
options={ templates.map( ( item ) => {
return {
label: (
<>
<span className="woocommerce-product-template-modal__list-title">
{ item.title }
</span>
<span className="woocommerce-product-template-modal__list-subtitle">
{ item.subtitle }
</span>
</>
),
value: item.key,
};
} ) }
onChange={ setSelectedTemplate }
/>
</div>
<div className="woocommerce-product-template-modal__actions">
<Button

56
plugins/woocommerce-admin/client/task-list/tasks/products/product-template-modal.scss
View File

@ -1,43 +1,51 @@
$border-color: $gray-100;
.woocommerce-product-template-modal {
min-width: 565px;
@include breakpoint( '>600px' ) {
min-width: 565px;
}
.woocommerce-product-template-modal__actions {
padding-top: $gap-large;
}
}
.woocommerce-product-template-modal__list {
.woocommerce-list {
margin: 0 #{-1 * $gap-large};
border-bottom: 1px solid $border-color;
border-top: 1px solid $border-color;
}
.woocommerce-list__item-inner {
.components-radio-control__input {
width: 20px;
height: 20px;
margin-right: $gap;
&:checked::before {
margin: 1px 0 0 1px;
width: 10px;
height: 10px;
background: var(--wp-admin-theme-color);
}
&:focus {
box-shadow: none;
.components-base-control {
margin: 0 -#{$gap-large};
.components-base-control__field {
.components-radio-control__option {
display: flex;
text-decoration: none;
width: 100%;
align-items: center;
padding: $gap $gap-large;
margin-bottom: 0;
box-sizing: border-box;
border-bottom: 1px solid $gray-100;
&:first-child {
border-top: 1px solid $gray-100;
}
.components-radio-control__input {
margin-right: $gap;
flex: none;
&:checked::before {
box-sizing: border-box;
}
&:focus {
box-shadow: none;
}
}
}
}
}
.woocommerce-list__item-label {
.woocommerce-product-template-modal__list-title {
color: $gray-900;
display: block;
}
.woocommerce-list__item-subtitle {
.woocommerce-product-template-modal__list-subtitle {
color: $gray-700;
margin-top: 4px;
}
.woocommerce-list__item:hover {
background: none;
display: block;
}
}
.woocommerce-product-template-modal__actions {

1
plugins/woocommerce-admin/readme.txt
View File

@ -84,6 +84,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
- Dev: Add event recording to start of gateway connections #6801
- Fix: Event tracking for merchant email notes #6616
- Fix: Use the store timezone to make time data requests #6632
- Fix: Update the checked input radio button margin style #6701
- Fix: Make pagination buttons height and width consistent #6725
- Fix: Retain persisted queries when navigating to Homescreen #6614
- Fix: Update folded header style #6724