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

Adapt the width of the pricing fields (#35545) 

* Add css class to change the input width based on the screen's width

* Changelog

* Move class from pricing-section.scss to product-page.scss and use breakpoint 960px mixin

* Move className from currencyInputProps to InputControl

* Improve changelog

* Move 'half-width-field' class to currencyInputProps instead of adding it manually for the two currency fields

* Add 'half-width-field' class to SKU and Shipping Class

Sent as a parameter to getInputProps and getSelectControlProps to avoid overwriting any additional className

* Update changelog
This commit is contained in:
Nathan Silveira 2022-11-18 13:03:10 -03:00 committed by GitHub
parent dba6d337f7
commit 6d4c1b3b8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
plugins/woocommerce-admin/client/products/product-page.scss
View File

@ -88,6 +88,12 @@
margin-bottom: 0;
}
}
.half-width-field {
@include breakpoint( '<960px' ) {
width: 100%;
}
width: 50%;
}
}
.woocommerce-edit-product {

3
plugins/woocommerce-admin/client/products/sections/pricing-section.tsx
View File

@ -149,6 +149,7 @@ export const PricingSection: React.FC = () => {
const currencyInputProps = {
...getCurrencySymbolProps( currencyConfig ),
className: 'half-width-field',
sanitize: ( value: Product[ keyof Product ] ) => {
return sanitizePrice( String( value ) );
},
@ -197,7 +198,6 @@ export const PricingSection: React.FC = () => {
<CardBody>
<BaseControl
id="product_pricing_regular_price"
className={ regularPriceProps?.className ?? '' }
help={ regularPriceProps?.help ?? '' }
>
<InputControl
@ -218,7 +218,6 @@ export const PricingSection: React.FC = () => {
<BaseControl
id="product_pricing_sale_price"
className={ salePriceProps?.className ?? '' }
help={ salePriceProps?.help ?? '' }
>
<InputControl

4
plugins/woocommerce-admin/client/products/sections/product-inventory-section/product-inventory-section.tsx
View File

@ -71,7 +71,9 @@ export const ProductInventorySection: React.FC = () => {
'SKU (Stock Keeping Unit)',
'woocommerce'
) }
{ ...getInputProps( 'sku' ) }
{ ...getInputProps( 'sku', {
className: 'half-width-field',
} ) }
/>
<div className="woocommerce-product-form__field">
<ConditionalWrapper

4
plugins/woocommerce-admin/client/products/sections/product-shipping-section.tsx
View File

@ -212,7 +212,9 @@ export function ProductShippingSection( {
<>
<SelectControl
label={ __( 'Shipping class', 'woocommerce' ) }
{ ...getSelectControlProps( 'shipping_class' ) }
{ ...getSelectControlProps( 'shipping_class', {
className: 'half-width-field',
} ) }
onChange={ ( value: string ) => {
if (
value ===

4
plugins/woocommerce/changelog/update-pricing-and-shipping-inputs-width Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: enhancement
Change the width of pricing fields, SKU and Shipping Class to 50% in big screens (>960px) in new product management experience