fix(combobox-item): tweak center content font-weight and spacing #9818

jcfranco · 2024-07-19T18:41:38Z

Related Issue: #3695

Summary

This fixes spacing and font-weight to follow the updated spec.

Notes

updates previous internal CSS prop to follow conventions (will follow suit for others in a separate PR)
ensures selected font weight is only applied to the title/heading
fixes trailing indent padding
prevents wrapping of short-heading

driskull

Looks good. The maxItems test might need some adjustments though.

jcfranco · 2024-07-22T19:48:14Z

For future reference, we'll need do the same as e0446b4 (#9818) for scroller calculations. The height of items might be fractional, so we should use getBoundingClientRect, as offsetHeight uses integers.

…-to-monorepo * origin/dev: chore: release next fix(combobox-item): tweak center content font-weight and spacing (#9818) chore: release next build(deps): update angular-cli monorepo to v18.1.1 (#9826)

**Related Issue:** #3695 ## Summary This fixes spacing and font-weight to follow the updated spec. ### Notes * updates previous internal CSS prop to follow conventions (will follow suit for others in a separate PR) * ensures selected font weight is only applied to the title/heading * fixes trailing indent padding * prevents wrapping of `short-heading`

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.30.0</summary> ## [3.30.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons-v3.29.0...@esri/calcite-ui-icons@3.30.0) (2024-07-31) ### Miscellaneous Chores * Add calcite-ui-icons to monorepo ([#9835](#9835)) ([05264ea](05264ea)) </details> <details><summary>@esri/calcite-components: 2.11.0</summary> ## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.1...@esri/calcite-components@2.11.0) (2024-07-31) ### Features * **chip:** Enhance multi-select group affordance ([#9286](#9286)) ([fd150e1](fd150e1)) * **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](#9701)) ([b2be625](b2be625)) * **combobox-item:** Apply heading color according to updated spec ([#9883](#9883)) ([9f642ff](9f642ff)) * **combobox, combobox-item:** Add `description`, `shortHeading` props and `content-end` slot ([#9771](#9771)) ([78eb555](78eb555)) * **combobox, combobox-item:** Add `metadata` support for filtering ([#9819](#9819)) ([5de7787](5de7787)) * **combobox:** Append custom values to top of dropdown ([#9817](#9817)) ([bd55097](bd55097)) * **dialog:** Add padding to default slot ([#9871](#9871)) ([9d89d1d](9d89d1d)) * **dialog:** Adds new dialog component and deprecates the modal component ([#9751](#9751)) ([0111c23](0111c23)) * **icon:** Type icon names ([#9650](#9650)) ([7513f3a](7513f3a)) * **panel, flow-item:** Add alerts slot ([#9778](#9778)) ([8b9b820](8b9b820)) * **panel, flow-item:** Add beforeClose property ([#9770](#9770)) ([aefd3cb](aefd3cb)) * **panel, flow-item:** Add scale property ([#9730](#9730)) ([27c597e](27c597e)) * Provide info message on stamped version instead of warning ([#9739](#9739)) ([b25cb7b](b25cb7b)) * **shell-panel:** Deprecate float displayMode and add float-content and float-all ([#9795](#9795)) ([bf93728](bf93728)) * **tooltip:** Support touch events ([#9487](#9487)) ([633706b](633706b)) ### Bug Fixes * **block-section:** Apply missing CSS class to start/end icon ([#9688](#9688)) ([2169ed2](2169ed2)) * **block:** Remove top padding when no heading is defined ([#9782](#9782)) ([704f5df](704f5df)) * **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](#9848)) ([cfdbd44](cfdbd44)) * **combobox-item:** Tweak center content font-weight and spacing ([#9818](#9818)) ([a67c4af](a67c4af)) * **deps:** Move @types/sortablejs as a dependency so the public types resolve properly ([#9786](#9786)) ([3d47c52](3d47c52)) * **dialog:** Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true ([#9891](#9891)) ([4390177](4390177)) * Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](#9710)) ([cd4d52c](cd4d52c)) * **flow-item:** Set closed property to true when internal panel is closed ([#9715](#9715)) ([f7d2a4f](f7d2a4f)) * Improve browser check to resolve SSR errors ([#9897](#9897)) ([bdb225b](bdb225b)) * **input-date-picker:** Ensure initial value is in range ([#9894](#9894)) ([7d05134](7d05134)) * **input-number:** Restore decimal input mode default ([#9741](#9741)) ([1165dca](1165dca)) * **panel, flow-item:** Fix footer-padding CSS prop regression ([#9757](#9757)) ([f935790](f935790)) * **panel, flow-item:** Prevent footer slots from conflicting with each other ([#9856](#9856)) ([cffaff8](cffaff8)) * **panel:** Correct footer padding and layout ([#9868](#9868)) ([1e02ece](1e02ece)) * **radio-button-group:** Remove blank clickable space outside of label ([#9793](#9793)) ([4cc24a0](4cc24a0)) * **segmented-control:** Make check state update correctly ([#9733](#9733)) ([602c922](602c922)) * **shell:** Fix resizing a slotted shell-panel when clicking to resize ([#9846](#9846)) ([326001c](326001c)) * **shell:** Update shell to correctly position calcite shell panel at shell's bottom ([#9748](#9748)) ([5959db7](5959db7)) * **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](#9867)) ([a77cd27](a77cd27)) * **tabs:** Handle tab close events that remove the associated tab-title and tab elements from the DOM ([#9768](#9768)) ([bda619c](bda619c)) * **tabs:** Update tab title indicator display ([#9666](#9666)) ([5f0914b](5f0914b)) * **tile:** Center align contentTop and contentBottom slots when alignment prop equals "center" ([#9732](#9732)) ([1a8393b](1a8393b)) * **tile:** Center align slot's text when alignment is equal to center ([#9773](#9773)) ([8611bfc](8611bfc)) * **time-picker:** Render meridiem first for korean locale ([#9842](#9842)) ([897f924](897f924)) * **tooltip:** Allow focusing on a reference element and then clicking on a tooltip ([#9878](#9878)) ([dfca2d4](dfca2d4)) * Widen icon type to allow string ([#9915](#9915)) ([44138b1](44138b1)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from ^3.29.1-next.0 to ^3.30.0 </details> <details><summary>@esri/calcite-components-angular: 2.11.0</summary> ## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.1...@esri/calcite-components-angular@2.11.0) (2024-07-31) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.0 </details> <details><summary>@esri/calcite-components-react: 2.11.0</summary> ## [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.1...@esri/calcite-components-react@2.11.0) (2024-07-31) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.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>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-ui-icons: 3.30.0</summary> [3.30.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons-v3.29.0...@esri/calcite-ui-icons@3.30.0) (2024-07-31) * Add calcite-ui-icons to monorepo ([#9835](#9835)) ([05264ea](05264ea)) </details> <details><summary>@esri/calcite-components: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.1...@esri/calcite-components@2.11.0) (2024-07-31) * **chip:** Enhance multi-select group affordance ([#9286](#9286)) ([fd150e1](fd150e1)) * **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](#9701)) ([b2be625](b2be625)) * **combobox-item:** Apply heading color according to updated spec ([#9883](#9883)) ([9f642ff](9f642ff)) * **combobox, combobox-item:** Add `description`, `shortHeading` props and `content-end` slot ([#9771](#9771)) ([78eb555](78eb555)) * **combobox, combobox-item:** Add `metadata` support for filtering ([#9819](#9819)) ([5de7787](5de7787)) * **combobox:** Append custom values to top of dropdown ([#9817](#9817)) ([bd55097](bd55097)) * **dialog:** Add padding to default slot ([#9871](#9871)) ([9d89d1d](9d89d1d)) * **dialog:** Adds new dialog component and deprecates the modal component ([#9751](#9751)) ([0111c23](0111c23)) * **icon:** Type icon names ([#9650](#9650)) ([7513f3a](7513f3a)) * **panel, flow-item:** Add alerts slot ([#9778](#9778)) ([8b9b820](8b9b820)) * **panel, flow-item:** Add beforeClose property ([#9770](#9770)) ([aefd3cb](aefd3cb)) * **panel, flow-item:** Add scale property ([#9730](#9730)) ([27c597e](27c597e)) * Provide info message on stamped version instead of warning ([#9739](#9739)) ([b25cb7b](b25cb7b)) * **shell-panel:** Deprecate float displayMode and add float-content and float-all ([#9795](#9795)) ([bf93728](bf93728)) * **tooltip:** Support touch events ([#9487](#9487)) ([633706b](633706b)) * **block-section:** Apply missing CSS class to start/end icon ([#9688](#9688)) ([2169ed2](2169ed2)) * **block:** Remove top padding when no heading is defined ([#9782](#9782)) ([704f5df](704f5df)) * **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](#9848)) ([cfdbd44](cfdbd44)) * **combobox-item:** Tweak center content font-weight and spacing ([#9818](#9818)) ([a67c4af](a67c4af)) * **deps:** Move @types/sortablejs as a dependency so the public types resolve properly ([#9786](#9786)) ([3d47c52](3d47c52)) * **dialog:** Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true ([#9891](#9891)) ([4390177](4390177)) * Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](#9710)) ([cd4d52c](cd4d52c)) * **flow-item:** Set closed property to true when internal panel is closed ([#9715](#9715)) ([f7d2a4f](f7d2a4f)) * Improve browser check to resolve SSR errors ([#9897](#9897)) ([bdb225b](bdb225b)) * **input-date-picker:** Ensure initial value is in range ([#9894](#9894)) ([7d05134](7d05134)) * **input-number:** Restore decimal input mode default ([#9741](#9741)) ([1165dca](1165dca)) * **panel, flow-item:** Fix footer-padding CSS prop regression ([#9757](#9757)) ([f935790](f935790)) * **panel, flow-item:** Prevent footer slots from conflicting with each other ([#9856](#9856)) ([cffaff8](cffaff8)) * **panel:** Correct footer padding and layout ([#9868](#9868)) ([1e02ece](1e02ece)) * **radio-button-group:** Remove blank clickable space outside of label ([#9793](#9793)) ([4cc24a0](4cc24a0)) * **segmented-control:** Make check state update correctly ([#9733](#9733)) ([602c922](602c922)) * **shell:** Fix resizing a slotted shell-panel when clicking to resize ([#9846](#9846)) ([326001c](326001c)) * **shell:** Update shell to correctly position calcite shell panel at shell's bottom ([#9748](#9748)) ([5959db7](5959db7)) * **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](#9867)) ([a77cd27](a77cd27)) * **tabs:** Handle tab close events that remove the associated tab-title and tab elements from the DOM ([#9768](#9768)) ([bda619c](bda619c)) * **tabs:** Update tab title indicator display ([#9666](#9666)) ([5f0914b](5f0914b)) * **tile:** Center align contentTop and contentBottom slots when alignment prop equals "center" ([#9732](#9732)) ([1a8393b](1a8393b)) * **tile:** Center align slot's text when alignment is equal to center ([#9773](#9773)) ([8611bfc](8611bfc)) * **time-picker:** Render meridiem first for korean locale ([#9842](#9842)) ([897f924](897f924)) * **tooltip:** Allow focusing on a reference element and then clicking on a tooltip ([#9878](#9878)) ([dfca2d4](dfca2d4)) * Widen icon type to allow string ([#9915](#9915)) ([44138b1](44138b1)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from ^3.29.1-next.0 to ^3.30.0 </details> <details><summary>@esri/calcite-components-angular: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.1...@esri/calcite-components-angular@2.11.0) (2024-07-31) * **@esri/calcite-components-angular:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.0 </details> <details><summary>@esri/calcite-components-react: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.1...@esri/calcite-components-react@2.11.0) (2024-07-31) * **@esri/calcite-components-react:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.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>

Cherry-pick the release commit from `main`. --- <details><summary>@esri/calcite-ui-icons: 3.30.0</summary> [3.30.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons-v3.29.0...@esri/calcite-ui-icons@3.30.0) (2024-07-31) * Add calcite-ui-icons to monorepo ([#9835](#9835)) ([05264ea](05264ea)) </details> <details><summary>@esri/calcite-components: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.1...@esri/calcite-components@2.11.0) (2024-07-31) * **chip:** Enhance multi-select group affordance ([#9286](#9286)) ([fd150e1](fd150e1)) * **color-picker, color-picker-hex-input:** Add input auto commit, blur and auto select enhancements. ([#9701](#9701)) ([b2be625](b2be625)) * **combobox-item:** Apply heading color according to updated spec ([#9883](#9883)) ([9f642ff](9f642ff)) * **combobox, combobox-item:** Add `description`, `shortHeading` props and `content-end` slot ([#9771](#9771)) ([78eb555](78eb555)) * **combobox, combobox-item:** Add `metadata` support for filtering ([#9819](#9819)) ([5de7787](5de7787)) * **combobox:** Append custom values to top of dropdown ([#9817](#9817)) ([bd55097](bd55097)) * **dialog:** Add padding to default slot ([#9871](#9871)) ([9d89d1d](9d89d1d)) * **dialog:** Adds new dialog component and deprecates the modal component ([#9751](#9751)) ([0111c23](0111c23)) * **icon:** Type icon names ([#9650](#9650)) ([7513f3a](7513f3a)) * **panel, flow-item:** Add alerts slot ([#9778](#9778)) ([8b9b820](8b9b820)) * **panel, flow-item:** Add beforeClose property ([#9770](#9770)) ([aefd3cb](aefd3cb)) * **panel, flow-item:** Add scale property ([#9730](#9730)) ([27c597e](27c597e)) * Provide info message on stamped version instead of warning ([#9739](#9739)) ([b25cb7b](b25cb7b)) * **shell-panel:** Deprecate float displayMode and add float-content and float-all ([#9795](#9795)) ([bf93728](bf93728)) * **tooltip:** Support touch events ([#9487](#9487)) ([633706b](633706b)) * **block-section:** Apply missing CSS class to start/end icon ([#9688](#9688)) ([2169ed2](2169ed2)) * **block:** Remove top padding when no heading is defined ([#9782](#9782)) ([704f5df](704f5df)) * **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](#9848)) ([cfdbd44](cfdbd44)) * **combobox-item:** Tweak center content font-weight and spacing ([#9818](#9818)) ([a67c4af](a67c4af)) * **deps:** Move @types/sortablejs as a dependency so the public types resolve properly ([#9786](#9786)) ([3d47c52](3d47c52)) * **dialog:** Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true ([#9891](#9891)) ([4390177](4390177)) * Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled ([#9710](#9710)) ([cd4d52c](cd4d52c)) * **flow-item:** Set closed property to true when internal panel is closed ([#9715](#9715)) ([f7d2a4f](f7d2a4f)) * Improve browser check to resolve SSR errors ([#9897](#9897)) ([bdb225b](bdb225b)) * **input-date-picker:** Ensure initial value is in range ([#9894](#9894)) ([7d05134](7d05134)) * **input-number:** Restore decimal input mode default ([#9741](#9741)) ([1165dca](1165dca)) * **panel, flow-item:** Fix footer-padding CSS prop regression ([#9757](#9757)) ([f935790](f935790)) * **panel, flow-item:** Prevent footer slots from conflicting with each other ([#9856](#9856)) ([cffaff8](cffaff8)) * **panel:** Correct footer padding and layout ([#9868](#9868)) ([1e02ece](1e02ece)) * **radio-button-group:** Remove blank clickable space outside of label ([#9793](#9793)) ([4cc24a0](4cc24a0)) * **segmented-control:** Make check state update correctly ([#9733](#9733)) ([602c922](602c922)) * **shell:** Fix resizing a slotted shell-panel when clicking to resize ([#9846](#9846)) ([326001c](326001c)) * **shell:** Update shell to correctly position calcite shell panel at shell's bottom ([#9748](#9748)) ([5959db7](5959db7)) * **tab-title:** Adjust hover styling for `bordered` Tab Title ([#9867](#9867)) ([a77cd27](a77cd27)) * **tabs:** Handle tab close events that remove the associated tab-title and tab elements from the DOM ([#9768](#9768)) ([bda619c](bda619c)) * **tabs:** Update tab title indicator display ([#9666](#9666)) ([5f0914b](5f0914b)) * **tile:** Center align contentTop and contentBottom slots when alignment prop equals "center" ([#9732](#9732)) ([1a8393b](1a8393b)) * **tile:** Center align slot's text when alignment is equal to center ([#9773](#9773)) ([8611bfc](8611bfc)) * **time-picker:** Render meridiem first for korean locale ([#9842](#9842)) ([897f924](897f924)) * **tooltip:** Allow focusing on a reference element and then clicking on a tooltip ([#9878](#9878)) ([dfca2d4](dfca2d4)) * Widen icon type to allow string ([#9915](#9915)) ([44138b1](44138b1)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from ^3.29.1-next.0 to ^3.30.0 </details> <details><summary>@esri/calcite-components-angular: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.1...@esri/calcite-components-angular@2.11.0) (2024-07-31) * **@esri/calcite-components-angular:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.11.0 </details> <details><summary>@esri/calcite-components-react: 2.11.0</summary> [2.11.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.1...@esri/calcite-components-react@2.11.0) (2024-07-31) * **@esri/calcite-components-react:** Synchronize components versions * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.11.0-next.30 to ^2.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> **Related Issue:** # ## Summary Co-authored-by: Calcite Admin <calcite-admin@esri.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

jcfranco added 3 commits July 19, 2024 10:53

fix(combobox-item): tweak center content font-weight and spacing

4b37ce7

rename internal font-size prop

a32251d

fix incorrect indent padding applied at the end

69bd305

github-actions bot assigned jcfranco Jul 19, 2024

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jul 19, 2024

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jul 19, 2024

jcfranco requested review from ashetland and driskull July 19, 2024 18:45

driskull approved these changes Jul 19, 2024

View reviewed changes

jcfranco added 2 commits July 19, 2024 18:40

prevent short-heading from wrapping

5df1ef3

update scroller height logic

e0446b4

jcfranco 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 Jul 22, 2024

jcfranco merged commit e2bddcf into dev Jul 22, 2024
13 checks passed

jcfranco deleted the jcfranco/3695-tweak-combobox-item-spacing branch July 22, 2024 22:05

github-actions bot added this to the 2024-07-30 - Jul Release milestone Jul 22, 2024

calcite-admin mentioned this pull request Jul 30, 2024

chore: release main #9716

Merged

benelan mentioned this pull request Jul 31, 2024

chore: release main (#9716) #9916

Merged

benelan mentioned this pull request Aug 28, 2024

chore: release main #10171

Merged

calcite-admin mentioned this pull request Sep 30, 2024

chore: release main #10457

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(combobox-item): tweak center content font-weight and spacing #9818

fix(combobox-item): tweak center content font-weight and spacing #9818

jcfranco commented Jul 19, 2024 •

edited

Loading

driskull left a comment

jcfranco commented Jul 22, 2024

fix(combobox-item): tweak center content font-weight and spacing #9818

fix(combobox-item): tweak center content font-weight and spacing #9818

Conversation

jcfranco commented Jul 19, 2024 • edited Loading

Summary

Notes

driskull left a comment

Choose a reason for hiding this comment

jcfranco commented Jul 22, 2024

jcfranco commented Jul 19, 2024 •

edited

Loading