Align text sizing in filter blocks: chips, checkboxes, buttons, dropd…

…own (#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
woocommerce · Nov 29, 2022 · 8c857e2 · 8c857e2
1 parent 0d3e954
commit 8c857e2
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 4 deletions.
diff --git a/assets/js/base/components/chip/style.scss b/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/assets/js/base/components/filter-reset-button/style.scss b/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/assets/js/base/components/price-slider/style.scss b/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/assets/js/blocks/active-filters/style.scss b/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/assets/js/blocks/attribute-filter/style.scss b/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/assets/js/blocks/rating-filter/style.scss b/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/assets/js/blocks/stock-filter/style.scss b/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/packages/checkout/components/checkbox-control/style.scss b/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;