From 796e952b92e9edd382bdbe8801f56b237d09b356 Mon Sep 17 00:00:00 2001 From: kmanijak Date: Tue, 29 Nov 2022 16:42:24 +0100 Subject: [PATCH] Align text sizing in filter blocks: chips, checkboxes, buttons, dropdown (https://github.com/woocommerce/woocommerce-blocks/pull/7707) * Align the font-size of checkbox-control component to the price slider amount * Align the font-size of Price Slider Button to the price slider amount * Align the font-size of Filter Reset Button to the price slider amount * Align the font-size of Clear All Button to the price slider amount * Align the font-size of Apply button in Editor to the price slider amount * Align the font-size of Apply button in Frontend to the price slider amount * Align the font-size of Price Slider Amount to the standard size * Align the font-size of Active Filter chips to the price slider amount * Align the font-size of Filter by Price (text) to the price slider amount * Align the font-size of Filter by Attribute (dropdown) to the price slider amount * Align the font-size of placeholder of Filter by Attribute (dropdown) to the price slider amount * Change font-size for text in filters from font-size(smaller) to font-size(smaller) As a result of discussion in PR it was agreed to check the styles with bigger font size hence the change * Align the font-size of input text of Filter by Attribute (dropdown) to the price slider amount * Change margin-right of checkbox-control to relative value so it better adapts to the fonts --- .../assets/js/base/components/chip/style.scss | 1 + .../components/filter-reset-button/style.scss | 1 + .../js/base/components/price-slider/style.scss | 6 ++++++ .../assets/js/blocks/active-filters/style.scss | 2 ++ .../js/blocks/attribute-filter/style.scss | 17 ++++++++++++++--- .../assets/js/blocks/rating-filter/style.scss | 1 + .../assets/js/blocks/stock-filter/style.scss | 1 + .../components/checkbox-control/style.scss | 3 ++- 8 files changed, 28 insertions(+), 4 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss index 58a3ebf0cd5..dd6d2548b04 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/chip/style.scss @@ -32,6 +32,7 @@ } .wc-block-components-chip__text { flex-grow: 1; + @include font-size(small); } &.is-removable .wc-block-components-chip__text { padding-right: 0.5em; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss index 7d5d0b73986..63c87769916 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/filter-reset-button/style.scss @@ -1,5 +1,6 @@ .wc-block-components-filter-reset-button { @include filter-link-button(); + @include font-size(small); cursor: pointer; &[disabled] { diff --git a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss index 4a19905df88..cc9f2128695 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/price-slider/style.scss @@ -128,6 +128,7 @@ max-width: 80px; min-width: 0; padding: $gap-smaller; + @include font-size(small); .wc-block-components-price-slider--is-input-inline & { max-width: 60px; } @@ -144,6 +145,10 @@ display: flex; justify-content: space-between; margin: $gap-large 0; + + .wc-block-components-formatted-money-amount { + @include font-size(small); + } } .wc-block-components-price-slider__actions { @@ -155,6 +160,7 @@ button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button { margin-top: 0; margin-left: 0; + @include font-size(small); } } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss index 02d118dbf26..20579b1922e 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/active-filters/style.scss @@ -21,6 +21,7 @@ .wc-block-active-filters__clear-all { @include filter-link-button(); + @include font-size(small); border: none; margin-top: 15px; padding: 0; @@ -142,6 +143,7 @@ } .wc-block-active-filters__list-item-name { + @include font-size(small); display: flex; align-items: center; position: relative; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/style.scss index 51b3ce43d97..b7730b87b1e 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/style.scss @@ -79,11 +79,16 @@ } .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container { + @include reset-typography(); border: 0; padding: $gap-smaller; - .components-form-token-field__input::placeholder { - color: $black; + .components-form-token-field__input { + @include font-size(small); + + &::placeholder { + color: $black; + } } .components-form-token-field__suggestions-list { @@ -100,6 +105,11 @@ padding: $gap-small; } } + + .components-form-token-field__token, + .components-form-token-field__suggestion { + @include font-size(small); + } } } @@ -143,8 +153,10 @@ } } + // The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop. .wc-block-filter-submit-button.wc-block-components-filter-submit-button.wc-block-attribute-filter__button { margin-top: 0; + @include font-size(small); } } @@ -191,6 +203,5 @@ padding: em($gap-smaller) em($gap); @include font-size(small); height: max-content; - line-height: normal; width: max-content; } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/style.scss index fc489952ee3..823cead8c43 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/rating-filter/style.scss @@ -45,6 +45,7 @@ button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button { margin-left: 0; margin-top: 0; + @include font-size(small); } .wc-block-rating-filter__button { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/style.scss index 090b39f56f7..4df5236a88c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/stock-filter/style.scss @@ -46,6 +46,7 @@ button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button { margin-left: 0; margin-top: 0; + @include font-size(small); } .wc-block-stock-filter__button { diff --git a/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss b/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss index 408e3ce6c60..d1d638e69bb 100644 --- a/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss +++ b/plugins/woocommerce-blocks/packages/checkout/components/checkbox-control/style.scss @@ -6,6 +6,7 @@ align-items: flex-start; display: flex; position: relative; + @include font-size(small); } .wc-block-components-checkbox__input[type="checkbox"] { @@ -17,7 +18,7 @@ height: em(24px); width: em(24px); margin: 0; - margin-right: $gap; + margin-right: em($gap); min-height: em(24px); min-width: em(24px); overflow: hidden;