fix: Update the tag-list-item target-size to be 24x24px. (#3779)

BrightspaceUI · Jun 27, 2023 · 6282896 · 6282896
1 parent 2ce4808
commit 6282896
Show file tree

Hide file tree

Showing 61 changed files with 6 additions and 9 deletions.
diff --git a/...ilter-overflow-group/d2l-filter-overflow-group-tags-at-width-320-is-correct.png b/...ilter-overflow-group/d2l-filter-overflow-group-tags-at-width-320-is-correct.png
diff --git a/...ilter-overflow-group/d2l-filter-overflow-group-tags-at-width-400-is-correct.png b/...ilter-overflow-group/d2l-filter-overflow-group-tags-at-width-400-is-correct.png
diff --git a/...ilter-overflow-group/d2l-filter-overflow-group-tags-at-width-500-is-correct.png b/...ilter-overflow-group/d2l-filter-overflow-group-tags-at-width-500-is-correct.png
diff --git a/...ilter-overflow-group/d2l-filter-overflow-group-tags-at-width-700-is-correct.png b/...ilter-overflow-group/d2l-filter-overflow-group-tags-at-width-700-is-correct.png
diff --git a/...-basic-at-width-1500-is-correct-when-show-more-button-clicked-if-applicable.png b/...-basic-at-width-1500-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...nshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-1500-is-correct.png b/...nshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-1500-is-correct.png
diff --git a/...s-basic-at-width-320-is-correct-when-show-more-button-clicked-if-applicable.png b/...s-basic-at-width-320-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-320-is-correct.png b/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-320-is-correct.png
diff --git a/...s-basic-at-width-400-is-correct-when-show-more-button-clicked-if-applicable.png b/...s-basic-at-width-400-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-400-is-correct.png b/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-400-is-correct.png
diff --git a/...s-basic-at-width-599-is-correct-when-show-more-button-clicked-if-applicable.png b/...s-basic-at-width-599-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-599-is-correct.png b/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-599-is-correct.png
diff --git a/...s-basic-at-width-601-is-correct-when-show-more-button-clicked-if-applicable.png b/...s-basic-at-width-601-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-601-is-correct.png b/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-601-is-correct.png
diff --git a/...s-basic-at-width-969-is-correct-when-show-more-button-clicked-if-applicable.png b/...s-basic-at-width-969-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-969-is-correct.png b/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-969-is-correct.png
diff --git a/...s-basic-at-width-980-is-correct-when-show-more-button-clicked-if-applicable.png b/...s-basic-at-width-980-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-980-is-correct.png b/...enshots/ci/golden/filter-tags/d2l-filter-tags-basic-at-width-980-is-correct.png
diff --git a/...ags/d2l-filter-tags-clearable-behavior-is-correct-when-deleting-second-item.png b/...ags/d2l-filter-tags-clearable-behavior-is-correct-when-deleting-second-item.png
diff --git a/...s/d2l-filter-tags-clearable-behavior-is-correct-when-deleting-the-last-item.png b/...s/d2l-filter-tags-clearable-behavior-is-correct-when-deleting-the-last-item.png
diff --git a/.../test/screenshots/ci/golden/filter-tags/d2l-filter-tags-flex-end-is-correct.png b/.../test/screenshots/ci/golden/filter-tags/d2l-filter-tags-flex-end-is-correct.png
diff --git a/...test/screenshots/ci/golden/filter-tags/d2l-filter-tags-rtl-basic-is-correct.png b/...test/screenshots/ci/golden/filter-tags/d2l-filter-tags-rtl-basic-is-correct.png
diff --git a/...creenshots/ci/golden/filter-tags/d2l-filter-tags-rtl-two-filters-is-correct.png b/...creenshots/ci/golden/filter-tags/d2l-filter-tags-rtl-two-filters-is-correct.png
diff --git a/...st/screenshots/ci/golden/filter-tags/d2l-filter-tags-two-filters-is-correct.png b/...st/screenshots/ci/golden/filter-tags/d2l-filter-tags-two-filters-is-correct.png
diff --git a/components/tag-list/tag-list-item-mixin.js b/components/tag-list/tag-list-item-mixin.js
@@ -69,10 +69,10 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				white-space: nowrap;
 			}
 			.tag-list-item-container.tag-list-item-container-clearable {
-				padding-right: 0.25rem;
+				padding-right: 0.2rem;
 			}
 			:host([dir="rtl"]) .tag-list-item-container.tag-list-item-container-clearable {
-				padding-left: 0.25rem;
+				padding-left: 0.2rem;
 				padding-right: 0;
 			}
 			.tag-list-item-content {
@@ -99,19 +99,16 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				}
 			}
 			.d2l-tag-list-item-clear-button {
-				margin-left: -0.6rem;
-				padding-left: 3px;
+				margin-left: calc(-0.6rem + 3px);
 			}
 			:host([dir="rtl"]) .d2l-tag-list-item-clear-button {
 				margin-left: 0;
-				margin-right: -0.6rem;
-				padding-left: 0;
-				padding-right: 3px;
+				margin-right: calc(-0.6rem + 3px);
 			}
 			d2l-button-icon {
 				--d2l-button-icon-fill-color: var(--d2l-color-chromite);
-				--d2l-button-icon-min-height: 1.1rem;
-				--d2l-button-icon-min-width: 1.1rem;
+				--d2l-button-icon-min-height: 1.2rem;
+				--d2l-button-icon-min-width: 1.2rem;
 			}
 			d2l-button-icon:hover {
 				--d2l-button-icon-fill-color: var(--d2l-color-tungsten);

diff --git a/.../tag-list/d2l-tag-list-clearable-at-width-320-is-correct-after-adding-items.png b/.../tag-list/d2l-tag-list-clearable-at-width-320-is-correct-after-adding-items.png
diff --git a/...earable-at-width-320-is-correct-when-show-more-button-clicked-if-applicable.png b/...earable-at-width-320-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-320-is-correct.png b/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-320-is-correct.png
diff --git a/.../tag-list/d2l-tag-list-clearable-at-width-400-is-correct-after-adding-items.png b/.../tag-list/d2l-tag-list-clearable-at-width-400-is-correct-after-adding-items.png
diff --git a/...earable-at-width-400-is-correct-when-show-more-button-clicked-if-applicable.png b/...earable-at-width-400-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-400-is-correct.png b/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-400-is-correct.png
diff --git a/.../tag-list/d2l-tag-list-clearable-at-width-599-is-correct-after-adding-items.png b/.../tag-list/d2l-tag-list-clearable-at-width-599-is-correct-after-adding-items.png
diff --git a/...earable-at-width-599-is-correct-when-show-more-button-clicked-if-applicable.png b/...earable-at-width-599-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-599-is-correct.png b/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-599-is-correct.png
diff --git a/.../tag-list/d2l-tag-list-clearable-at-width-601-is-correct-after-adding-items.png b/.../tag-list/d2l-tag-list-clearable-at-width-601-is-correct-after-adding-items.png
diff --git a/...earable-at-width-601-is-correct-when-show-more-button-clicked-if-applicable.png b/...earable-at-width-601-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-601-is-correct.png b/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-601-is-correct.png
diff --git a/.../tag-list/d2l-tag-list-clearable-at-width-969-is-correct-after-adding-items.png b/.../tag-list/d2l-tag-list-clearable-at-width-969-is-correct-after-adding-items.png
diff --git a/...earable-at-width-969-is-correct-when-show-more-button-clicked-if-applicable.png b/...earable-at-width-969-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-969-is-correct.png b/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-969-is-correct.png
diff --git a/.../tag-list/d2l-tag-list-clearable-at-width-980-is-correct-after-adding-items.png b/.../tag-list/d2l-tag-list-clearable-at-width-980-is-correct-after-adding-items.png
diff --git a/...earable-at-width-980-is-correct-when-show-more-button-clicked-if-applicable.png b/...earable-at-width-980-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-980-is-correct.png b/...reenshots/ci/golden/tag-list/d2l-tag-list-clearable-at-width-980-is-correct.png
diff --git a/...ag-list/d2l-tag-list-clearable-behavior-is-correct-when-deleting-first-item.png b/...ag-list/d2l-tag-list-clearable-behavior-is-correct-when-deleting-first-item.png
diff --git a/...list/d2l-tag-list-clearable-behavior-is-correct-when-deleting-the-last-item.png b/...list/d2l-tag-list-clearable-behavior-is-correct-when-deleting-the-last-item.png
diff --git a/...default-at-width-320-is-correct-when-show-more-button-clicked-if-applicable.png b/...default-at-width-320-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...default-at-width-400-is-correct-when-show-more-button-clicked-if-applicable.png b/...default-at-width-400-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...default-at-width-599-is-correct-when-show-more-button-clicked-if-applicable.png b/...default-at-width-599-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...screenshots/ci/golden/tag-list/d2l-tag-list-default-at-width-599-is-correct.png b/...screenshots/ci/golden/tag-list/d2l-tag-list-default-at-width-599-is-correct.png
diff --git a/...default-at-width-601-is-correct-when-show-more-button-clicked-if-applicable.png b/...default-at-width-601-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...en/tag-list/d2l-tag-list-default-at-width-969-is-correct-after-adding-items.png b/...en/tag-list/d2l-tag-list-default-at-width-969-is-correct-after-adding-items.png
diff --git a/...default-at-width-969-is-correct-when-show-more-button-clicked-if-applicable.png b/...default-at-width-969-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...screenshots/ci/golden/tag-list/d2l-tag-list-default-at-width-969-is-correct.png b/...screenshots/ci/golden/tag-list/d2l-tag-list-default-at-width-969-is-correct.png
diff --git a/...default-at-width-980-is-correct-when-show-more-button-clicked-if-applicable.png b/...default-at-width-980-is-correct-when-show-more-button-clicked-if-applicable.png
diff --git a/...tag-list/test/screenshots/ci/golden/tag-list/d2l-tag-list-interactive-focus.png b/...tag-list/test/screenshots/ci/golden/tag-list/d2l-tag-list-interactive-focus.png
diff --git a/...ag-list/test/screenshots/ci/golden/tag-list/d2l-tag-list-interactive-normal.png b/...ag-list/test/screenshots/ci/golden/tag-list/d2l-tag-list-interactive-normal.png
diff --git a/...screenshots/ci/golden/tag-list/d2l-tag-list-is-correct-at-1400px-page-width.png b/...screenshots/ci/golden/tag-list/d2l-tag-list-is-correct-at-1400px-page-width.png
diff --git a/...enshots/ci/golden/tag-list/d2l-tag-list-is-correct-when-clear-button-hidden.png b/...enshots/ci/golden/tag-list/d2l-tag-list-is-correct-when-clear-button-hidden.png
diff --git a/...t-tag-list-item-style-behaviour-is-correct-on-focus-and-hover-tag-list-item.png b/...t-tag-list-item-style-behaviour-is-correct-on-focus-and-hover-tag-list-item.png
diff --git a/...tag-list-tag-list-item-style-behaviour-is-correct-on-focus-on-tag-list-item.png b/...tag-list-tag-list-item-style-behaviour-is-correct-on-focus-on-tag-list-item.png
diff --git a/...tag-list-tag-list-item-style-behaviour-is-correct-on-hover-on-tag-list-item.png b/...tag-list-tag-list-item-style-behaviour-is-correct-on-hover-on-tag-list-item.png