-
Notifications
You must be signed in to change notification settings - Fork 78
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(list-item): Add content-bottom slot for placing content below the label and description of the component #8183
Conversation
Nice! No issue with the visuals but cc @SkyeSeitz @ashetland for visibility. I think we need to do a larger pass on the "inline/bottom/block/top" stuff, but for now maybe "bottom" is clearer since we already have "content/actions-end" and those don't use "inline". |
I vote for
Agree. |
I think I know the answer to this, but it ties into other things I'm working on. Should the bottom slot have some default padding on it or do we leave it up to the user? At first I was thinking about x-padding to help align it with the heading+description, but then of course that leads to asking about y-padding too. If we have a logic for this across the system I'm missing it 🙃. |
Agreed on |
I do think inline/block-start/end (as in Card) is a more accurate verbiage that aligns with css terminology and is writing mode agnostic. But in our current nomenclature here it wouldn’t fit, so bottom IMO is good for now. Places like Shell, other components that use top/bottom/start/end, maybe can all use inline/block-start/end in the future. |
@jcfranco @macandcheese can I get a review of this one? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome! Can you add this slot to the jsdoc definitions at the top of list-item.tsx
so it comes through in docs? Looks good otherwise, we can work to add "good use cases" to the doc site.
Nice catch. Added slot doc. @geospatialem can you review it? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🚀
I disagree here. The
☝️from https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end |
@macandcheese Do we need an audit for this for the future? Seems like we should for consistency. |
@@ -51,6 +51,7 @@ import { | |||
* @slot content - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component. | |||
* @slot content-end - A slot for adding non-actionable elements after the label and description of the component. | |||
* @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component. | |||
* @slot content-bottom - A slot for adding content below the label and description of the component. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome! Small recommended tweak and consistency with backticks in to differentiate the props:
A slot for adding content below the component's `label` and `description`.
🤖 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>
🤖 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>
🤖 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>
🤖 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>
Related Issue: #8173
Summary
content-bottom
. Could also be calledcontent-block-end
?content-bottom
is indented the same as the item.