fix(list-item): adds border between grouped and ungrouped list-items #8134

anveshmekala · 2023-11-06T20:41:44Z

Related Issue: #7546

Summary

Adds border to the calcite-list-item excluding the first calcite-list-item in the calcite-list-item-group or the calcite-list.

driskull

Code changes look good. 🎉

ashetland · 2023-11-07T17:16:23Z

Based on what was documented in the issue, I think this isn't quite fixing what was asked. I noted on a couple screenshots borders that now appear before the first item, but the issue requested that not happen.

anveshmekala · 2023-11-07T17:34:32Z

Based on what was documented in the issue, I think this isn't quite fixing what was asked. I noted on a couple screenshots borders that now appear before the first item, but the issue requested that not happen.

Agreed, observed that fix is causing a regression when filter-enabled.

ashetland · 2023-11-07T18:26:13Z

Do we need to add a story to mimic the config in the issue? Not sure if that actually gets covered in our current tests.

anveshmekala · 2023-11-07T18:35:51Z

Do we need to add a story to mimic the config in the issue? Not sure if that actually gets covered in our current tests.

All the stories which has groups and/or nesting would cover the config mentioned the issue. Don't think we need a new one.

github-actions · 2023-11-17T01:45:21Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

packages/calcite-components/src/components/list/list.tsx

jcfranco · 2023-11-17T19:47:21Z

packages/calcite-components/src/components/list/list.tsx

+    this.topLevelAncestorsMap.get(filteredItems[0])?.setAttribute("data-filter", "0");
+  };
+
+  private getTopLevelAncestorItemElement = (


I think you could use the walkUpAncestry util for this.

Per our convo, we can look at updating some of our dom utils to help cover this use case later (i.e., recursive closest without crossing shadow DOM).

packages/calcite-components/src/components/list/list.tsx

packages/calcite-components/src/components/list-item-group/list-item-group.scss

packages/calcite-components/calcite-preset.ts

ashetland · 2023-11-17T23:39:57Z

LGTM 🎉🎉🎉🎉🎉🎉🎉🚀🚀🚀🚀🚀🚀🚀🚀🚀🎉🎉🎉🎉🎉🎉🎉🚀🚀🚀🚀🚀🚀🚀🚀🚀🎉🎉🎉🎉🎉🎉🎉

jcfranco

Awesome! 🚀

jcfranco · 2023-11-18T00:03:16Z

packages/calcite-components/src/components/list-item-group/list-item-group.scss

  @apply shadow-none;
+  margin-block-start: 0px;


Nitpick: px not needed here.

jcfranco · 2023-11-18T00:04:44Z

packages/calcite-components/src/components/list/list.tsx

+    this.topLevelAncestorsMap.get(filteredItems[0])?.setAttribute("data-filter", "0");
+  };
+
+  private getTopLevelAncestorItemElement = (


Per our convo, we can look at updating some of our dom utils to help cover this use case later (i.e., recursive closest without crossing shadow DOM).

jcfranco · 2023-11-18T00:05:57Z

packages/calcite-components/src/components/list/list.tsx

+    });
+
+    this.ancestorOfFirstFilteredItem = this.getTopLevelAncestorItemElement(filteredItems[0]);
+    filteredItems[0].setAttribute("data-filter", "0");


Totally missed this last time, but you can use toggleAttribute if we don't care about the value. Not critical for this PR.

i think we can rename the attribute to be something like data-filtered-first so that we can leverage toggleAttribute.

jcfranco · 2023-11-18T04:26:46Z

This is approved and tests are looking ✅✅✅. I'm going to ahead and merge it.

@anveshmekala Can you submit a follow-up PR for any additional refactoring? Thanks!

anveshmekala · 2023-11-18T05:06:36Z

This is approved and tests are looking ✅✅✅. I'm going to ahead and merge it.

@anveshmekala Can you submit a follow-up PR for any additional refactoring? Thanks!

Thank you 👍

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/eslint-plugin-calcite-components: 0.2.3</summary> ## [0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3) (2023-11-21) </details> <details><summary>@esri/calcite-components: 1.11.0</summary> ## [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0) (2023-11-21) ### Features * **combobox:** Limit display of selected items with new selection-display prop ([#7912](#7912)) ([58317ae](58317ae)) * **date-picker:** Make component responsive ([#7872](#7872)) ([f131218](f131218)) * **input, input-date-picker, input-number, input-text, input-time-picker:** Truncate value and placeholder when input is narrow ([#8160](#8160)) ([533eff3](533eff3)) * **list-item:** Add content-bottom slot for placing content below the label and description of the component ([#8183](#8183)) ([7d400fb](7d400fb)) * **list:** Specify the element types in the `calciteListOrderChange` event detail. ([#8123](#8123)) ([3e81d7e](3e81d7e)) * **pagination:** Introduce responsive design for xxsmall breakpoint ([#8150](#8150)) ([ab20eb0](ab20eb0)) * **stepper-item:** Remove support for previousStep and nextStep in messages ([#8222](#8222)) ([213b31d](213b31d)) * **stepper:** Enable responsive layout ([#7744](#7744)) ([687ca2b](687ca2b)) ### Bug Fixes * **accordion-item:** Update expanded chevron color ([#8087](#8087)) ([d3d7688](d3d7688)) * **action:** Ensure action content is correctly spaced ([#8184](#8184)) ([b18dcc8](b18dcc8)) * **action:** Update transparent action styles ([#8194](#8194)) ([0f12489](0f12489)) * **block-section:** Wraps long text over to a new line when toggle switch is displayed ([#8101](#8101)) ([3f90780](3f90780)) * **checkbox:** Make label property public ([#8181](#8181)) ([d3b9c1f](d3b9c1f)) * **combobox-item:** Hide disabled item icon ([#8095](#8095)) ([36552f3](36552f3)) * **input-date-picker:** Fix date-picker wrapper displaying beyond its bounds ([#8172](#8172)) ([01ec024](01ec024)) * **input-number:** Prevents mutating value on blur ([#8226](#8226)) ([b89a893](b89a893)) * **input-time-zone:** Fix Indian/Christmas time zone translation ([#8096](#8096)) ([d79d591](d79d591)) * **list-item, stack:** Stretch action-menu and handle when placed inside a list-item or stack. ([#8185](#8185)) ([8a16a69](8a16a69)) * **list-item, stack:** Stretch dropdown when placed inside a list-item or stack ([#8204](#8204)) ([05e6b65](05e6b65)) * **list-item:** Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([b3c331c](b3c331c)) * **list-item:** Fix rendering of open icon. ([#8207](#8207)) ([a6e1766](a6e1766)) * **panel, flow-item:** Remove overflow rule ([#8055](#8055)) ([d0c3ed2](d0c3ed2)) * **split-button:** Fix width layout ([#8133](#8133)) ([051f332](051f332)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3 </details> <details><summary>@esri/calcite-components-angular: 1.11.0</summary> ## 1.11.0 (2023-11-21) ### Bug Fixes * **angular:** Publish from the dist directory ([#8151](#8151)) ([d813f14](d813f14)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> <details><summary>@esri/calcite-components-react: 1.11.0</summary> ## [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0) (2023-11-21) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

…8134) **Related Issue:** #7546 Adds border to the `calcite-list-item` excluding the first `calcite-list-item` in the `calcite-list-item-group` or the `calcite-list`.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/eslint-plugin-calcite-components: 0.2.3</summary> [0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3) (2023-11-21) </details> <details><summary>@esri/calcite-components: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0) (2023-11-21) * **combobox:** Limit display of selected items with new selection-display prop ([#7912](#7912)) ([58317ae](58317ae)) * **date-picker:** Make component responsive ([#7872](#7872)) ([f131218](f131218)) * **input, input-date-picker, input-number, input-text, input-time-picker:** Truncate value and placeholder when input is narrow ([#8160](#8160)) ([533eff3](533eff3)) * **list-item:** Add content-bottom slot for placing content below the label and description of the component ([#8183](#8183)) ([7d400fb](7d400fb)) * **list:** Specify the element types in the `calciteListOrderChange` event detail. ([#8123](#8123)) ([3e81d7e](3e81d7e)) * **pagination:** Introduce responsive design for xxsmall breakpoint ([#8150](#8150)) ([ab20eb0](ab20eb0)) * **stepper-item:** Remove support for previousStep and nextStep in messages ([#8222](#8222)) ([213b31d](213b31d)) * **stepper:** Enable responsive layout ([#7744](#7744)) ([687ca2b](687ca2b)) * **accordion-item:** Update expanded chevron color ([#8087](#8087)) ([d3d7688](d3d7688)) * **action:** Ensure action content is correctly spaced ([#8184](#8184)) ([b18dcc8](b18dcc8)) * **action:** Update transparent action styles ([#8194](#8194)) ([0f12489](0f12489)) * **block-section:** Wraps long text over to a new line when toggle switch is displayed ([#8101](#8101)) ([3f90780](3f90780)) * **checkbox:** Make label property public ([#8181](#8181)) ([d3b9c1f](d3b9c1f)) * **combobox-item:** Hide disabled item icon ([#8095](#8095)) ([36552f3](36552f3)) * **input-date-picker:** Fix date-picker wrapper displaying beyond its bounds ([#8172](#8172)) ([01ec024](01ec024)) * **input-number:** Prevents mutating value on blur ([#8226](#8226)) ([b89a893](b89a893)) * **input-time-zone:** Fix Indian/Christmas time zone translation ([#8096](#8096)) ([d79d591](d79d591)) * **list-item, stack:** Stretch action-menu and handle when placed inside a list-item or stack. ([#8185](#8185)) ([8a16a69](8a16a69)) * **list-item, stack:** Stretch dropdown when placed inside a list-item or stack ([#8204](#8204)) ([05e6b65](05e6b65)) * **list-item:** Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([b3c331c](b3c331c)) * **list-item:** Fix rendering of open icon. ([#8207](#8207)) ([a6e1766](a6e1766)) * **panel, flow-item:** Remove overflow rule ([#8055](#8055)) ([d0c3ed2](d0c3ed2)) * **split-button:** Fix width layout ([#8133](#8133)) ([051f332](051f332)) * The following workspace dependencies were updated * devDependencies * @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3 </details> <details><summary>@esri/calcite-components-angular: 1.11.0</summary> * **angular:** Publish from the dist directory ([#8151](#8151)) ([d813f14](d813f14)) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> <details><summary>@esri/calcite-components-react: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0) (2023-11-21) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

…8134) **Related Issue:** #7546 Adds border to the `calcite-list-item` excluding the first `calcite-list-item` in the `calcite-list-item-group` or the `calcite-list`.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/eslint-plugin-calcite-components: 0.2.3</summary> [0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3) (2023-11-21) </details> <details><summary>@esri/calcite-components: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0) (2023-11-21) * **combobox:** Limit display of selected items with new selection-display prop ([#7912](#7912)) ([58317ae](58317ae)) * **date-picker:** Make component responsive ([#7872](#7872)) ([f131218](f131218)) * **input, input-date-picker, input-number, input-text, input-time-picker:** Truncate value and placeholder when input is narrow ([#8160](#8160)) ([533eff3](533eff3)) * **list-item:** Add content-bottom slot for placing content below the label and description of the component ([#8183](#8183)) ([7d400fb](7d400fb)) * **list:** Specify the element types in the `calciteListOrderChange` event detail. ([#8123](#8123)) ([3e81d7e](3e81d7e)) * **pagination:** Introduce responsive design for xxsmall breakpoint ([#8150](#8150)) ([ab20eb0](ab20eb0)) * **stepper-item:** Remove support for previousStep and nextStep in messages ([#8222](#8222)) ([213b31d](213b31d)) * **stepper:** Enable responsive layout ([#7744](#7744)) ([687ca2b](687ca2b)) * **accordion-item:** Update expanded chevron color ([#8087](#8087)) ([d3d7688](d3d7688)) * **action:** Ensure action content is correctly spaced ([#8184](#8184)) ([b18dcc8](b18dcc8)) * **action:** Update transparent action styles ([#8194](#8194)) ([0f12489](0f12489)) * **block-section:** Wraps long text over to a new line when toggle switch is displayed ([#8101](#8101)) ([3f90780](3f90780)) * **checkbox:** Make label property public ([#8181](#8181)) ([d3b9c1f](d3b9c1f)) * **combobox-item:** Hide disabled item icon ([#8095](#8095)) ([36552f3](36552f3)) * **input-date-picker:** Fix date-picker wrapper displaying beyond its bounds ([#8172](#8172)) ([01ec024](01ec024)) * **input-number:** Prevents mutating value on blur ([#8226](#8226)) ([b89a893](b89a893)) * **input-time-zone:** Fix Indian/Christmas time zone translation ([#8096](#8096)) ([d79d591](d79d591)) * **list-item, stack:** Stretch action-menu and handle when placed inside a list-item or stack. ([#8185](#8185)) ([8a16a69](8a16a69)) * **list-item, stack:** Stretch dropdown when placed inside a list-item or stack ([#8204](#8204)) ([05e6b65](05e6b65)) * **list-item:** Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([b3c331c](b3c331c)) * **list-item:** Fix rendering of open icon. ([#8207](#8207)) ([a6e1766](a6e1766)) * **panel, flow-item:** Remove overflow rule ([#8055](#8055)) ([d0c3ed2](d0c3ed2)) * **split-button:** Fix width layout ([#8133](#8133)) ([051f332](051f332)) * The following workspace dependencies were updated * devDependencies * @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3 </details> <details><summary>@esri/calcite-components-angular: 1.11.0</summary> * **angular:** Publish from the dist directory ([#8151](#8151)) ([d813f14](d813f14)) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> <details><summary>@esri/calcite-components-react: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0) (2023-11-21) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

…8134) **Related Issue:** #7546 Adds border to the `calcite-list-item` excluding the first `calcite-list-item` in the `calcite-list-item-group` or the `calcite-list`.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/eslint-plugin-calcite-components: 0.2.3</summary> [0.2.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.2...@esri/eslint-plugin-calcite-components@0.2.3) (2023-11-21) </details> <details><summary>@esri/calcite-components: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.10.0...@esri/calcite-components@1.11.0) (2023-11-21) * **combobox:** Limit display of selected items with new selection-display prop ([#7912](#7912)) ([58317ae](58317ae)) * **date-picker:** Make component responsive ([#7872](#7872)) ([f131218](f131218)) * **input, input-date-picker, input-number, input-text, input-time-picker:** Truncate value and placeholder when input is narrow ([#8160](#8160)) ([533eff3](533eff3)) * **list-item:** Add content-bottom slot for placing content below the label and description of the component ([#8183](#8183)) ([7d400fb](7d400fb)) * **list:** Specify the element types in the `calciteListOrderChange` event detail. ([#8123](#8123)) ([3e81d7e](3e81d7e)) * **pagination:** Introduce responsive design for xxsmall breakpoint ([#8150](#8150)) ([ab20eb0](ab20eb0)) * **stepper-item:** Remove support for previousStep and nextStep in messages ([#8222](#8222)) ([213b31d](213b31d)) * **stepper:** Enable responsive layout ([#7744](#7744)) ([687ca2b](687ca2b)) * **accordion-item:** Update expanded chevron color ([#8087](#8087)) ([d3d7688](d3d7688)) * **action:** Ensure action content is correctly spaced ([#8184](#8184)) ([b18dcc8](b18dcc8)) * **action:** Update transparent action styles ([#8194](#8194)) ([0f12489](0f12489)) * **block-section:** Wraps long text over to a new line when toggle switch is displayed ([#8101](#8101)) ([3f90780](3f90780)) * **checkbox:** Make label property public ([#8181](#8181)) ([d3b9c1f](d3b9c1f)) * **combobox-item:** Hide disabled item icon ([#8095](#8095)) ([36552f3](36552f3)) * **input-date-picker:** Fix date-picker wrapper displaying beyond its bounds ([#8172](#8172)) ([01ec024](01ec024)) * **input-number:** Prevents mutating value on blur ([#8226](#8226)) ([b89a893](b89a893)) * **input-time-zone:** Fix Indian/Christmas time zone translation ([#8096](#8096)) ([d79d591](d79d591)) * **list-item, stack:** Stretch action-menu and handle when placed inside a list-item or stack. ([#8185](#8185)) ([8a16a69](8a16a69)) * **list-item, stack:** Stretch dropdown when placed inside a list-item or stack ([#8204](#8204)) ([05e6b65](05e6b65)) * **list-item:** Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([b3c331c](b3c331c)) * **list-item:** Fix rendering of open icon. ([#8207](#8207)) ([a6e1766](a6e1766)) * **panel, flow-item:** Remove overflow rule ([#8055](#8055)) ([d0c3ed2](d0c3ed2)) * **split-button:** Fix width layout ([#8133](#8133)) ([051f332](051f332)) * The following workspace dependencies were updated * devDependencies * @esri/eslint-plugin-calcite-components bumped from 0.2.3-next.6 to 0.2.3 </details> <details><summary>@esri/calcite-components-angular: 1.11.0</summary> * **angular:** Publish from the dist directory ([#8151](#8151)) ([d813f14](d813f14)) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> <details><summary>@esri/calcite-components-react: 1.11.0</summary> [1.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.10.0...@esri/calcite-components-react@1.11.0) (2023-11-21) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 1.11.0-next.3 to 1.11.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

…8134) **Related Issue:** #7546 Adds border to the `calcite-list-item` excluding the first `calcite-list-item` in the `calcite-list-item-group` or the `calcite-list`.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@1.1.0...@esri/calcite-design-tokens@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - Change the default export to a tree-shakable list of design tokens in camelCase format rather than a JSON object (`import * as tokens from "@esri/calcite-design-tokens";`) - Use font name in core font family tokens - Remove unnecessary core tokens line-height, font-size, letter-spacing, paragraph-spacing as these can be exclusive to semantic and reference core size tokens - Core size tokens now use their pixel size in their name - Change `border-radius` to `corner-radius` - Remove unnecessary `border-width` tokens `none`, `sm`, `md`, `lg` - Platform output - Remove component tokens from global output - Add new platform output - css - index - global - light - dark - core - breakpoint - typography classes - scss - index - global - light - dark - core - breakpoints - typography mixins - Replace "headless" with "global" - Remove "calcite" from filenames - Package.json exports - `@esri/calcite-design-tokens/css/headless` is now `@esri/calcite-design-tokens/css/global` - `@esri/calcite-design-tokens/scss/headless` is now `@esri/calcite-design-tokens/scss/global` - `@esri/calcite-design-tokens/js/headless` is now `@esri/calcite-design-tokens/js/global` - `@esri/calcite-design-tokens/es6/headless` is now `@esri/calcite-design-tokens/es6/global` - Token paths and values - Border - Use t-shirt sizing for border width tokens - `Border.border-width.0` is now `border.width.none` (--calcite-border-width-none) - `border.border-width.1` is now `border.width.sm` (--calcite-border-width-sm) - `border.border-width.2` is now `border.width.md` (--calcite-border-width-md) - `border.border-width.3` is now `border.width.lg` (--calcite-border-width-lg) - `border.border-width.4` is removed - Remove unused border radius tokens - `Core.border.border-radius.0` - `Core.border.border-radius.2` - `Core.border.border-radius.3` - Use t-shirt sizing for border radius (now called corner radius) tokens - `semantic.ui.border.border-radius` is `semantic.corner.radius.default` - `Core.border.border-radius.1` is now `semantic.corner.radius.sharp` - `Core.border.border-radius.4` is now `semantic.corner.radius.round` - `Core.border.border-radius.5` is now `semantic.corner.radius.pill` - Sizing - `core.sizing.` tokens are now `core.size.default` - Breakpoints - Move breakpoint tokens to their own separate output file for most platform outputs (except JS) - Update breakpoint token path from `.breakpoint.` to `.container-size.` - Delete unused `breakpoint.cols` tokens - Box Shadow - Use t-shirt sizing for global box shadow tokens - `box-shadow.0` is now `shadow.none` - `box-shadow.1` is now `shadow.sm` - `box-shadow.2` is now `shadow.md` - Colors - Remove "palette" from core color paths - `core.color.palette.high-saturation` is now `core.color.high-saturation` - Light Mode and Dark Mode - Semantic color tokens now use the composite color scheme token type to reference "light" and "dark" mode instead of having separate light and dark tokens. - `.calcite-mode-light` and `.calcite-mode-dark` classes as well as the color scheme media queries are now provided via `calcite-design-tokens/css/index.css` - Provide light and dark mode mixins via `calcite-design-tokens/css/index.scss` - Remove "ui" from output platform names in favor of "color" - `--calcite-ui-background` is now `--calcite-color-background` - `--calcite-ui-brand` is now `--calcite-color-brand` - `--calcite-ui-success` is now `--calcite-color-status-success` - `--calcite-ui-danger` is now `--calcite-color-status-danger` - `--calcite-ui-warning` is now `--calcite-color-status-warning` - `--calcite-ui-hint` is now `--calcite-color-status-hint` - `--calcite-button-transparent-hover` is now `--calcite-color-transparent-press` ### Features - Add json to design token output ([#8290](#8290)) ([753061f](753061f)) - Reduce global design tokens in calcite.css ([#8215](#8215)) ([335d010](335d010)) - Update default main file output for design tokens ([#8299](#8299)) ([4050a91](4050a91)) - Update json shape for docs ([#8308](#8308)) ([6fac3e9](6fac3e9)) ### Bug Fixes - Align tokens with figma variables ([#8311](#8311)) ([8d7cf3f](8d7cf3f)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.0.0</summary> ## [1.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@0.2.3...@esri/eslint-plugin-calcite-components@1.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) </details> <details><summary>@esri/calcite-components: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.11.0...@esri/calcite-components@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __tokens:__ Changes to `@esri/calcite-design-tokens`, including the names of CSS variables used to customize component styling. See the [breaking changes section](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-design-tokens/CHANGELOG.md#200-2023-12-02) of the `@esri/calcite-design-tokens` changelog. ([#8311](#8311)) ([8d7cf3f](8d7cf3f)), ([#8299](#8299)) ([4050a91](4050a91)), ([#8215](#8215)) ([335d010](335d010)) - __button, list, pick-list, value-list:__ Setting `loading` prop to true no longer prevents interaction nor applies disabled styles. If you'd like to block interaction when loading, please set `disabled` along with `loading`. ([#8292](#8292)) ([db3c5c7](db3c5c7)) - __dropdown:__ Dropdown's default `display` was changed from `inline-flex` to `inline-block` to make it easier to prompt truncation in trigger button text with minimal impact to layout (by setting an explicit width __or__ setting `width: 100%` or `display: block` on the dropdown of a width-constrained parent). ([#8253](#8253)) ([7c96e9f](7c96e9f)) - __dropdown, modal:__ For consistency, renames the `width` property to `widthScale`. ([#8251](#8251)) ([ab12968](ab12968)), ([#8252](#8252)) ([6b09245](6b09245)) - __react:__ Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the React wrappers. For example, the first code snippet in [#7185](#7185) is now required, or else the custom elements will not be defined in the browser. ([#8248](#8248)) ([0948c1a](0948c1a)) - __i18n:__ Reduced numbering system support to `latn`, `arab` and `arabext`. The following numbering systems were removed: `bali`, `beng`, `deva`, `fullwide`, `gujr`, `guru`, `hanidec`, `khmr`, `knda`, `laoo`, `limb`, `mlym`, `mong`, `mymr`, `orya`, `tamldec`, `telu`, `thai`, `tibt`. ([#8217](#8217)) ([9946ac1](9946ac1)) - __stepper-item:__ Removed both `previousStep` and `nextStep` message properties. These are no longer overrideable via `messageOverrides`. ([#8234](#8234)) ([331aafb](331aafb)) - __card:__ Removed the `deselect` message property – this property was deprecated in [#6657](#6657) as it is no longer being rendered. This is no longer overrideable via `messageOverrides`. ([#8099](#8099)) ([1bab172](1bab172)) - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Features - __action-menu:__ Set max height of the action menu ([#8275](#8275)) ([ca1be28](ca1be28)) - __action-menu:__ Support action-groups ([#8273](#8273)) ([c07144f](c07144f)) - __combobox, checkbox, input-time-zone, select, text-area:__ Add `status` property ([#8304](#8304)) ([a44e9fe](a44e9fe)) - __handle:__ Add disabled property ([#8283](#8283)) ([7aeecd5](7aeecd5)) - __list-item:__ Add dragDisabled property ([#8285](#8285)) ([f091f26](f091f26)) - __list:__ Support multiple selection using the shift key ([#8301](#8301)) ([79538be](79538be)) - Reduce global design tokens in calcite.css ([#8215](#8215)) ([335d010](335d010)) - __stepper:__ Enable responsive layout ([#7744](#7744)) ([556b8bc](556b8bc)) ### Bug Fixes - Align tokens with figma variables ([#8311](#8311)) ([8d7cf3f](8d7cf3f)) - __button, list, pick-list, value-list:__ Prevent loading prop from affecting interactivity ([#8292](#8292)) ([db3c5c7](db3c5c7)) - __button:__ Sets aria-disabled instead of disabled on internal anchor element ([#8270](#8270)) ([0926eb6](0926eb6)) - __color-picker, popover, shell-panel, slider, tooltip:__ Register events on the window instead of the document ([#8247](#8247)) ([2aaf592](2aaf592)) - __combobox, dropdown, input-date-picker, popover, tooltip:__ Fix positioning of component when component is moved ([#8296](#8296)) ([2b2506d](2b2506d)) - Dragging floating ui components ([#8230](#8230)) ([5a81f6c](5a81f6c)) - __dropdown:__ Change display to inline-block to ease truncation setup ([#8253](#8253)) ([7c96e9f](7c96e9f)) - __dropdown:__ Restore trigger container height ([51d1ea8](51d1ea8)) - __input-time-zone:__ Update time zone items when item-dependent props change ([#8271](#8271)) ([f77532e](f77532e)) - __input:__ Prevents mutating value on `blur` when `type="number"` ([#8245](#8245)) ([58ededd](58ededd)) - __label:__ Associate label to component when `for` prop is set after initialization ([#8309](#8309)) ([e81b650](e81b650)) - __list-item:__ Adds border between grouped and ungrouped list-items ([#8134](#8134)) ([ae9b083](ae9b083)) - __list-item:__ Adds border between last item in a group and slotted item ([#8262](#8262)) ([9b5cf76](9b5cf76)) - __list-item:__ An item with an empty slotted list should be openable. ([#8240](#8240)) ([d615b39](d615b39)) - __list-item:__ Focus on the first focusable element within the component when using arrow keys ([#8291](#8291)) ([b902365](b902365)) - __list-item:__ Reserve space for empty open lists. ([#8239](#8239)) ([484a5aa](484a5aa)) - __list:__ Add live region for dynamically changing list items ([#8148](#8148)) ([e3c0c06](e3c0c06)) - __react:__ Disable includeImportCustomElements to resolve initial render issues ([#8248](#8248)) ([0948c1a](0948c1a)) - __stepper:__ Typo in CSS variable for step bar's fill ([#8255](#8255)) ([2e643aa](2e643aa)) ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Code Refactoring - __card:__ Remove deprecated `deselected` message ([#8099](#8099)) ([1bab172](1bab172)) - __dropdown:__ Rename `width` property to `widthScale` ([#8251](#8251)) ([ab12968](ab12968)) - __i18n:__ Reduce list of supported numbering systems to `latn`, `arab`, and `arabext` ([#8217](#8217)) ([9946ac1](9946ac1)) - __modal:__ Rename `width` property to `widthScale` ([#8252](#8252)) ([6b09245](6b09245)) - __stepper-item:__ No longer supports previousStep and nextStep messages ([#8234](#8234)) ([331aafb](331aafb)) ### Dependencies - The following workspace dependencies were updated - devDependencies - @esri/calcite-design-tokens bumped from 1.1.1-next.2 to 2.0.0 - @esri/eslint-plugin-calcite-components bumped from 0.2.4-next.0 to 1.0.0 </details> <details><summary>@esri/calcite-components-angular: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@1.11.0...@esri/calcite-components-angular@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Dependencies - The following workspace dependencies were updated - dependencies - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0 </details> <details><summary>@esri/calcite-components-react: 2.0.0</summary> ## [2.0.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.11.0...@esri/calcite-components-react@2.0.0) (2023-12-02) ### ⚠ BREAKING CHANGES - __react:__ Disabled `includeImportCustomElements`. Make sure to import components from `@esri/calcite-components` in addition to the React wrappers. For example, the first code snippet in [#7185](#7185) is now required, or else the custom elements will not be defined in the browser. - __deps:__ We are treating the `@stencil/core@v4` bump as a precautionary measure, particularly due to its potential impact on projects using `calcite-components` and Stencil. ### Bug Fixes - __react:__ Disable includeImportCustomElements to resolve initial render issues ([#8248](#8248)) ([0948c1a](0948c1a)) ### Build System - __deps:__ Bump Stencil to v4 ([#8108](#8108)) ([bcbb79f](bcbb79f)) ### Dependencies - The following workspace dependencies were updated - dependencies - @esri/calcite-components bumped from ^1.12.0-next.7 to ^2.0.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev> Co-authored-by: Ali Stump <astump@esri.com> Co-authored-by: JC Franco <jfranco@esri.com>

fix(list-item): adds border between grouped and ungrouped list-items

d3a5420

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Nov 6, 2023

github-actions bot assigned anveshmekala Nov 6, 2023

anveshmekala marked this pull request as ready for review November 6, 2023 22:54

anveshmekala requested a review from a team as a code owner November 6, 2023 22:54

anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Nov 6, 2023

driskull approved these changes Nov 7, 2023

View reviewed changes

jcfranco requested review from SkyeSeitz and ashetland November 7, 2023 16:32

fix border when filtered

550a9fe

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 8, 2023

fixes margin when filtered items are not part of a group

0ca9e21

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Nov 17, 2023

anveshmekala removed the Stale Issues or pull requests that have not had recent activity. label Nov 17, 2023

refactor

cc38984

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 17, 2023

jcfranco reviewed Nov 17, 2023

View reviewed changes

packages/calcite-components/src/components/list-item-group/list-item-group.scss Outdated Show resolved Hide resolved

packages/calcite-components/calcite-preset.ts Outdated Show resolved Hide resolved

feedback changes

b616246

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Nov 17, 2023

remove margin top for first item in group

0127331

anveshmekala removed the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Nov 17, 2023

anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Nov 17, 2023

jcfranco approved these changes Nov 18, 2023

View reviewed changes

jcfranco merged commit b3c331c into main Nov 18, 2023
16 checks passed

jcfranco deleted the anveshmekala/7546-fix-list-inconsistent-borders branch November 18, 2023 04:26

github-actions bot added this to the 2023 November Priorities milestone Nov 18, 2023

calcite-admin mentioned this pull request Nov 18, 2023

chore: release main #8092

Merged

calcite-admin mentioned this pull request Dec 2, 2023

chore: release main #8246

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(list-item): adds border between grouped and ungrouped list-items #8134

fix(list-item): adds border between grouped and ungrouped list-items #8134

anveshmekala commented Nov 6, 2023 •

edited

driskull left a comment

ashetland commented Nov 7, 2023

anveshmekala commented Nov 7, 2023 •

edited

ashetland commented Nov 7, 2023

anveshmekala commented Nov 7, 2023

github-actions bot commented Nov 17, 2023

jcfranco Nov 17, 2023

jcfranco Nov 18, 2023

ashetland commented Nov 17, 2023

jcfranco left a comment

jcfranco Nov 18, 2023

jcfranco Nov 18, 2023

jcfranco Nov 18, 2023

anveshmekala Nov 18, 2023

jcfranco commented Nov 18, 2023

anveshmekala commented Nov 18, 2023

fix(list-item): adds border between grouped and ungrouped list-items #8134

fix(list-item): adds border between grouped and ungrouped list-items #8134

Conversation

anveshmekala commented Nov 6, 2023 • edited

Summary

driskull left a comment

Choose a reason for hiding this comment

ashetland commented Nov 7, 2023

anveshmekala commented Nov 7, 2023 • edited

ashetland commented Nov 7, 2023

anveshmekala commented Nov 7, 2023

github-actions bot commented Nov 17, 2023

jcfranco Nov 17, 2023

Choose a reason for hiding this comment

jcfranco Nov 18, 2023

Choose a reason for hiding this comment

ashetland commented Nov 17, 2023

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Nov 18, 2023

Choose a reason for hiding this comment

jcfranco Nov 18, 2023

Choose a reason for hiding this comment

jcfranco Nov 18, 2023

Choose a reason for hiding this comment

anveshmekala Nov 18, 2023

Choose a reason for hiding this comment

jcfranco commented Nov 18, 2023

anveshmekala commented Nov 18, 2023

anveshmekala commented Nov 6, 2023 •

edited

anveshmekala commented Nov 7, 2023 •

edited