From d3a5420407fdce1f7f98574071b0c17aeb1740c1 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Mon, 6 Nov 2023 14:40:11 -0600 Subject: [PATCH 1/6] fix(list-item): adds border between grouped and ungrouped list-items --- packages/calcite-components/calcite-preset.ts | 1 + .../src/components/list-item-group/list-item-group.scss | 5 +++-- packages/calcite-components/src/components/list/list.scss | 5 +++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts index eda55adb9df..16a49518416 100644 --- a/packages/calcite-components/calcite-preset.ts +++ b/packages/calcite-components/calcite-preset.ts @@ -165,6 +165,7 @@ export default { "2-lg": "0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08)", "2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)", "border-bottom": "0 1px 0 var(--calcite-ui-border-3)", + "border-top": "0px -1px 0 var(--calcite-ui-border-3)", "outline-active": "0 0 0 1px var(--calcite-ui-brand)", none: "none", xs: "0 0 0 1px rgba(0, 0, 0, 0.05)", diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss index 45875b09dff..55d91febf73 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss @@ -16,10 +16,11 @@ } ::slotted(calcite-list-item) { - @apply shadow-border-bottom mb-px; + @apply shadow-border-top; + margin-block-start: 1px; } -::slotted(calcite-list-item:last-child) { +::slotted(calcite-list-item:first-child) { @apply shadow-none; } diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss index f33d96030f6..6352127589d 100755 --- a/packages/calcite-components/src/components/list/list.scss +++ b/packages/calcite-components/src/components/list/list.scss @@ -29,10 +29,11 @@ } ::slotted(calcite-list-item) { - @apply shadow-border-bottom mb-px; + @apply shadow-border-top; + margin-block-start: 1px; } -::slotted(calcite-list-item:last-child) { +::slotted(calcite-list-item:first-child) { @apply shadow-none; } From 550a9fec7be375014ccfe0a347fb5e79efaaa944 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Wed, 8 Nov 2023 11:23:22 -0600 Subject: [PATCH 2/6] fix border when filtered --- .../src/components/list-item-group/list-item-group.scss | 5 +++++ packages/calcite-components/src/components/list/list.scss | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss index 55d91febf73..802d2b12f44 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss @@ -24,4 +24,9 @@ @apply shadow-none; } +// removes shadow for the first item in filteredItems of the group. +::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { + @apply shadow-none; +} + @include base-component(); diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss index 6352127589d..f4cdfef21fa 100755 --- a/packages/calcite-components/src/components/list/list.scss +++ b/packages/calcite-components/src/components/list/list.scss @@ -37,6 +37,11 @@ @apply shadow-none; } +// removes shadow for the first item in filteredItems of the list. +::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { + @apply shadow-none; +} + .sticky-pos { @apply sticky top-0 From 0ca9e21ab077703ee63bc4c84b9e791fdc116eb2 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Thu, 9 Nov 2023 18:25:18 -0600 Subject: [PATCH 3/6] fixes margin when filtered items are not part of a group --- .../list-item-group/list-item-group.scss | 2 +- .../src/components/list/list.scss | 8 ++- .../src/components/list/list.tsx | 54 +++++++++++++++++++ 3 files changed, 61 insertions(+), 3 deletions(-) diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss index 802d2b12f44..65c22ffc53c 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss @@ -20,7 +20,7 @@ margin-block-start: 1px; } -::slotted(calcite-list-item:first-child) { +::slotted(calcite-list-item:first-of-type) { @apply shadow-none; } diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss index f4cdfef21fa..9b95fe96d14 100755 --- a/packages/calcite-components/src/components/list/list.scss +++ b/packages/calcite-components/src/components/list/list.scss @@ -33,15 +33,19 @@ margin-block-start: 1px; } -::slotted(calcite-list-item:first-child) { +::slotted(calcite-list-item:first-of-type) { @apply shadow-none; } // removes shadow for the first item in filteredItems of the list. -::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { +::slotted(calcite-list-item[data-filter]) { @apply shadow-none; } +// ::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { +// @apply shadow-none; +// } + .sticky-pos { @apply sticky top-0 diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 92d04130dd5..466907ef9fb 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -360,6 +360,8 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo sortable: Sortable; + private topLevelAncestorsMap = new Map(); + // -------------------------------------------------------------------------- // // Public Methods @@ -579,6 +581,10 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo this.filterElements({ el: listItem, filteredItems, visibleParents }) ); + if (filteredItems.length > 0) { + this.findFirstFilteredItem(filteredItems); + } + this.filteredItems = filteredItems; if (emit) { @@ -742,6 +748,54 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo } }; + private findFirstFilteredItem = (filteredItems: HTMLCalciteListItemElement[]): void => { + if (this.topLevelAncestorsMap.size > 0) { + this.topLevelAncestorsMap.forEach( + (value: HTMLCalciteListItemElement, key: HTMLCalciteListItemElement) => { + value.removeAttribute("data-filter"); + key.removeAttribute("data-filter"); + } + ); + this.topLevelAncestorsMap.clear(); + } + + filteredItems.forEach((item) => { + const topLevelAnchor = this.getTopLevelAncestorItemElement(item); + if (topLevelAnchor) { + this.topLevelAncestorsMap.set(item, topLevelAnchor); + } + }); + + const indexOfItemWithDataAttribute = filteredItems.findIndex((item) => + item.hasAttribute("data-filter") + ); + + if (indexOfItemWithDataAttribute > -1) { + filteredItems[indexOfItemWithDataAttribute].removeAttribute("data-filter"); + } + + filteredItems[0].setAttribute("data-filter", "0"); + this.topLevelAncestorsMap.get(filteredItems[0])?.setAttribute("data-filter", "0"); + }; + + private getTopLevelAncestorItemElement = ( + el: HTMLCalciteListItemElement + ): HTMLCalciteListItemElement | null => { + let closestParent = el.parentElement.closest("calcite-list-item") as HTMLCalciteListItemElement; + + while (closestParent) { + const nextClosestParent = closestParent.parentElement.closest( + "calcite-list-item" + ) as HTMLCalciteListItemElement; + if (nextClosestParent) { + closestParent = nextClosestParent; + } else { + return closestParent; + } + } + return null; + }; + handleNudgeEvent(event: CustomEvent): void { const { direction } = event.detail; From cc389840438b223b36ffa881607df2d46abe7698 Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 17 Nov 2023 12:07:42 -0600 Subject: [PATCH 4/6] refactor --- .../src/components/list/list.scss | 5 +--- .../src/components/list/list.stories.ts | 2 +- .../src/components/list/list.tsx | 25 ++++++++----------- 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/packages/calcite-components/src/components/list/list.scss b/packages/calcite-components/src/components/list/list.scss index 9b95fe96d14..45d233ed18a 100755 --- a/packages/calcite-components/src/components/list/list.scss +++ b/packages/calcite-components/src/components/list/list.scss @@ -40,12 +40,9 @@ // removes shadow for the first item in filteredItems of the list. ::slotted(calcite-list-item[data-filter]) { @apply shadow-none; + margin-block-start: 0px; } -// ::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { -// @apply shadow-none; -// } - .sticky-pos { @apply sticky top-0 diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts index f8aac4fea92..d2036299e07 100644 --- a/packages/calcite-components/src/components/list/list.stories.ts +++ b/packages/calcite-components/src/components/list/list.stories.ts @@ -362,7 +362,7 @@ export const closableListItems_TestOnly = (): string => html` `; -export const filteredChildListItems_TestOnly = (): string => html` html` 0) { - this.findFirstFilteredItem(filteredItems); + this.findAncestorOfFirstFilteredItem(filteredItems); } this.filteredItems = filteredItems; @@ -748,7 +748,7 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo } }; - private findFirstFilteredItem = (filteredItems: HTMLCalciteListItemElement[]): void => { + private findAncestorOfFirstFilteredItem = (filteredItems: HTMLCalciteListItemElement[]): void => { if (this.topLevelAncestorsMap.size > 0) { this.topLevelAncestorsMap.forEach( (value: HTMLCalciteListItemElement, key: HTMLCalciteListItemElement) => { @@ -760,18 +760,15 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo } filteredItems.forEach((item) => { - const topLevelAnchor = this.getTopLevelAncestorItemElement(item); - if (topLevelAnchor) { - this.topLevelAncestorsMap.set(item, topLevelAnchor); + if (item.hasAttribute("data-filter")) { + item.removeAttribute("data-filter"); } }); - const indexOfItemWithDataAttribute = filteredItems.findIndex((item) => - item.hasAttribute("data-filter") - ); - - if (indexOfItemWithDataAttribute > -1) { - filteredItems[indexOfItemWithDataAttribute].removeAttribute("data-filter"); + const firstFilteredItem = filteredItems[0]; + const topLevelAnchor = this.getTopLevelAncestorItemElement(firstFilteredItem); + if (topLevelAnchor) { + this.topLevelAncestorsMap.set(firstFilteredItem, topLevelAnchor); } filteredItems[0].setAttribute("data-filter", "0"); @@ -784,11 +781,11 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo let closestParent = el.parentElement.closest("calcite-list-item") as HTMLCalciteListItemElement; while (closestParent) { - const nextClosestParent = closestParent.parentElement.closest( + const closestListItemAncestor = closestParent.parentElement.closest( "calcite-list-item" ) as HTMLCalciteListItemElement; - if (nextClosestParent) { - closestParent = nextClosestParent; + if (closestListItemAncestor) { + closestParent = closestListItemAncestor; } else { return closestParent; } From b6162461188ea3f10977ed0e0318442f0869773a Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 17 Nov 2023 16:01:08 -0600 Subject: [PATCH 5/6] feedback changes --- packages/calcite-components/calcite-preset.ts | 2 +- .../list-item-group/list-item-group.scss | 6 +--- .../src/components/list/list.stories.ts | 4 +++ .../src/components/list/list.tsx | 34 +++++-------------- 4 files changed, 15 insertions(+), 31 deletions(-) diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts index 16a49518416..ad2a8ee2eef 100644 --- a/packages/calcite-components/calcite-preset.ts +++ b/packages/calcite-components/calcite-preset.ts @@ -165,7 +165,7 @@ export default { "2-lg": "0 12px 32px -2px rgba(0, 0, 0, 0.1), 0 4px 20px 0 rgba(0, 0, 0, 0.08)", "2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)", "border-bottom": "0 1px 0 var(--calcite-ui-border-3)", - "border-top": "0px -1px 0 var(--calcite-ui-border-3)", + "border-top": "0 -1px 0 var(--calcite-ui-border-3)", "outline-active": "0 0 0 1px var(--calcite-ui-brand)", none: "none", xs: "0 0 0 1px rgba(0, 0, 0, 0.05)", diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss index 65c22ffc53c..3fb002de53f 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss @@ -20,11 +20,7 @@ margin-block-start: 1px; } -::slotted(calcite-list-item:first-of-type) { - @apply shadow-none; -} - -// removes shadow for the first item in filteredItems of the group. +// removes shadow for the first item of the group for both filtered and unfiltered items. ::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { @apply shadow-none; } diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts index d2036299e07..8cd37ef4410 100644 --- a/packages/calcite-components/src/components/list/list.stories.ts +++ b/packages/calcite-components/src/components/list/list.stories.ts @@ -544,6 +544,10 @@ export const filteredChildListItems_TestOnly = (): string => html` `; +filteredChildListItems_TestOnly.parameters = { + chromatic: { delay: 1000 }, +}; + export const filterActions_TestOnly = (): string => html`(); + private ancestorOfFirstFilteredItem: HTMLCalciteListItemElement; // -------------------------------------------------------------------------- // @@ -749,41 +749,25 @@ export class List implements InteractiveComponent, LoadableComponent, SortableCo }; private findAncestorOfFirstFilteredItem = (filteredItems: HTMLCalciteListItemElement[]): void => { - if (this.topLevelAncestorsMap.size > 0) { - this.topLevelAncestorsMap.forEach( - (value: HTMLCalciteListItemElement, key: HTMLCalciteListItemElement) => { - value.removeAttribute("data-filter"); - key.removeAttribute("data-filter"); - } - ); - this.topLevelAncestorsMap.clear(); - } - + this.ancestorOfFirstFilteredItem?.removeAttribute("data-filter"); filteredItems.forEach((item) => { - if (item.hasAttribute("data-filter")) { - item.removeAttribute("data-filter"); - } + item.removeAttribute("data-filter"); }); - const firstFilteredItem = filteredItems[0]; - const topLevelAnchor = this.getTopLevelAncestorItemElement(firstFilteredItem); - if (topLevelAnchor) { - this.topLevelAncestorsMap.set(firstFilteredItem, topLevelAnchor); - } - + this.ancestorOfFirstFilteredItem = this.getTopLevelAncestorItemElement(filteredItems[0]); filteredItems[0].setAttribute("data-filter", "0"); - this.topLevelAncestorsMap.get(filteredItems[0])?.setAttribute("data-filter", "0"); + this.ancestorOfFirstFilteredItem?.setAttribute("data-filter", "0"); }; private getTopLevelAncestorItemElement = ( el: HTMLCalciteListItemElement ): HTMLCalciteListItemElement | null => { - let closestParent = el.parentElement.closest("calcite-list-item") as HTMLCalciteListItemElement; + let closestParent = el.parentElement.closest("calcite-list-item"); while (closestParent) { - const closestListItemAncestor = closestParent.parentElement.closest( - "calcite-list-item" - ) as HTMLCalciteListItemElement; + const closestListItemAncestor = + closestParent.parentElement.closest("calcite-list-item"); + if (closestListItemAncestor) { closestParent = closestListItemAncestor; } else { From 0127331ff9ecffba6df3ebf8c1f853ecb576221c Mon Sep 17 00:00:00 2001 From: anveshmekala Date: Fri, 17 Nov 2023 17:10:04 -0600 Subject: [PATCH 6/6] remove margin top for first item in group --- .../src/components/list-item-group/list-item-group.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss index 3fb002de53f..6412b93b577 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss @@ -23,6 +23,7 @@ // removes shadow for the first item of the group for both filtered and unfiltered items. ::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) { @apply shadow-none; + margin-block-start: 0px; } @include base-component();