fix(input-date-picker): update the focus and hover chevron icon color #9146

aPreciado88 · 2024-04-17T23:09:35Z

Related Issue: 7712

Summary

This updates input-date-picker chevron colors to be --calcite-color-text-3 when idle and --calcite-color-text-1 when hovered or pressed.

…hen idle and ui-text-1 when hovered or pressed.

benelan

First PR lets go! 🎉

The PR title is a bit too long and it shouldn't end with any punctuation. Also, we want to keep implementation details out of the PR title. Maybe change it to something like:

fix(input-date-picker): consistent chevron icon color

The implementation details (like the design tokens used) can go in the PR body. And the tokens should be --calcite-color-text-N like you have in the code, rather than the legacy --calcite-ui-text-N tokens that are currently in the PR title/body.

Once you are done making changes, add the pr ready for visual snapshots label to run Chromatic.

benelan · 2024-04-17T23:52:18Z

packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx

@@ -681,6 +681,7 @@ export class InputDatePicker
      // we set tab index to -1 to prevent delegatesFocus from stealing focus before we can set it
      <span class={CSS.toggleIcon} tabIndex={-1}>
        <calcite-icon
+          class={open ? "chevron-icon-up" : "chevron-icon-down"}


Can you add these classes to the CSS object in resources.ts. See two lines above for a usage example.

I consolidated this css into a single class and added it to resources.ts.

benelan

I took a closer look at the issue, and it doesn't say anything about the open property effecting the chevron color. For example, the current implementation wouldn't work for the Figma design's last example:

Can you take another look? The :focus and/or :active pseudo-classes may do what we want.

…olor-text-3 when idle and --calcite-color-text-1 when hovered or pressed.

benelan

Nice changes, code LGTM! cc @ashetland for snapshot review

ashetland · 2024-04-18T19:13:01Z

Nice changes, code LGTM! cc @ashetland for snapshot review

I'm going to approve the screenshots as all the changes are expected, but the change to text.1 is only happening while I hover on the icon. It should change onHover and onFocus of the entire input. See PR #8955.

aPreciado88 · 2024-04-18T21:25:31Z

@ashetland I updated the component to change the chevron's color when the input is hovered.

…eciado88/7712-update-date-picker-chevron-colors

benelan

@ashetland mentioned text-1 should be applied on :focus too

aPreciado88 · 2024-04-18T23:13:53Z

@benelan @ashetland I updated the component to apply text-1 on :hover, :active and :focus

benelan

LGTM!

ashetland · 2024-04-19T15:33:09Z

Heyo, I'm still only seeing it on hover.

jcfranco · 2024-04-19T16:36:51Z

@aPreciado88 Can you update the PR title (specifically, the description part) to use the imperative, present tense per the conventions we link to in our contributing doc? You can look at previous commits on main as examples.

aPreciado88 · 2024-04-19T17:17:53Z

@jcfranco I updated the title! Please let me know if that looks good.

jcfranco · 2024-04-19T17:18:47Z

@aPreciado88 Looks perfect, thanks!

ashetland · 2024-04-19T17:35:19Z

🤘🚀🚢🎉

…eciado88/7712-update-date-picker-chevron-colors

…#9146) **Related Issue:** [7712](#7712) ### Summary This updates `input-date-picker` chevron colors to be `--calcite-color-text-3` when idle and `--calcite-color-text-1` when hovered or pressed.

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 2.2.0</summary> ## [2.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@2.1.2...@esri/calcite-design-tokens@2.2.0) (2024-04-30) ### Features * Ensure all components inherit font-family ([#8388](#8388)) ([90f8923](90f8923)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 1.2.0</summary> ## [1.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@1.1.0...@esri/eslint-plugin-calcite-components@1.2.0) (2024-04-30) ### Features * **enforce-ref-last-prop:** Add fixer ([#8671](#8671)) ([688bc51](688bc51)) ### Bug Fixes * **slider:** Improve snapping + step logic ([#8169](#8169)) ([8b83042](8b83042)) </details> <details><summary>@esri/calcite-components: 2.8.0</summary> ## [2.8.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.7.1...@esri/calcite-components@2.8.0) (2024-04-30) ### Features * Add calciteInvalid event for form validation ([#9211](#9211)) ([a504508](a504508)) * Add validity property to form components ([#9210](#9210)) ([e49902b](e49902b)) * **carousel:** Add Carousel and Carousel Item components ([#8995](#8995)) ([b1ba428](b1ba428)) * **enforce-ref-last-prop:** Add fixer ([#8671](#8671)) ([688bc51](688bc51)) * Ensure all components inherit font-family ([#8388](#8388)) ([90f8923](90f8923)) * **input-time-zone:** Add readonly support ([#9111](#9111)) ([153a122](153a122)) * **input-time-zone:** Allow clearing value ([#9168](#9168)) ([193bb7d](193bb7d)) * **list-item-group:** Update list item group styles ([#9072](#9072)) ([c734849](c734849)) * **navigation-logo:** Add heading level ([#9054](#9054)) ([c2beba8](c2beba8)) * **pagination:** Add navigation methods ([#9154](#9154)) ([5ca6a5f](5ca6a5f)) * **slider:** Add support for custom label formatting ([#9179](#9179)) ([710d1ee](710d1ee)) * **slider:** Allow configuring fill behavior ([#9170](#9170)) ([1b2cdbf](1b2cdbf)) * **tile, tile-group:** Support single, multi, single-persist, none selection modes and icon and border selection appearances ([#9159](#9159)) ([2d77470](2d77470)) ### Bug Fixes * **action:** Maintain equal height when text is not enabled in a small scale ([#9051](#9051)) ([407824a](407824a)) * **chip-group:** Improve programmatic Chip selection behavior ([#9213](#9213)) ([b7a4c77](b7a4c77)) * **combobox:** Update the focus and hover chevron icon color ([#9187](#9187)) ([a1317da](a1317da)) * **combobox, input-time-zone:** Improve readOnly behavior and styling ([#9222](#9222)) ([606d80f](606d80f)) * **combobox:** Fix aria-role for proper voiceover support ([#9039](#9039)) ([eebe8ca](eebe8ca)) * **combobox:** Update the focused chevron icon color ([#9202](#9202)) ([27ac02d](27ac02d)) * **date-picker:** Ensure `proximitySelectionDisabled` resets range on post-range-commit selection ([#9171](#9171)) ([f466b14](f466b14)) * **date-picker:** Restore focus on date when navigating month with arrow/page keys ([#9063](#9063)) ([db109e0](db109e0)) * Fix memory leak affecting components using conditionally-rendered slots ([#9208](#9208)) ([28701b6](28701b6)) * **input-date-picker:** Update the focus and hover chevron icon color ([#9146](#9146)) ([ca895e9](ca895e9)) * **input-time-zone:** Ensure selected item is properly displayed when there are other items with the same offset ([#9134](#9134)) ([1f94903](1f94903)) * **input, input-number, input-text, input-date-picker, input-time-picker, filter, menu-item:** Ignore canceled events and enforce cancellations where needed ([#8952](#8952)) ([d0fa977](d0fa977)) * **list, list-item, list-item-group:** Improve drag experience by indenting items ([#9169](#9169)) ([88aab49](88aab49)) * **list, list-item:** Support keyboard sorting in screen readers ([#9038](#9038)) ([b2e1b9b](b2e1b9b)) * **list:** Closed list-items no longer render extra space ([#9031](#9031)) ([3985004](3985004)) * **panel:** Support cancelling the esc key event to prevent closing a panel ([#9032](#9032)) ([ecfa5f1](ecfa5f1)) * **preset:** Update the focus outline color ([#9098](#9098)) ([725f47c](725f47c)) * **radio-button:** Display validation message in parent group ([#9218](#9218)) ([b1e869f](b1e869f)) * **select:** Update the focus and hover chevron icon color and select focus and hover background color ([#9160](#9160)) ([b187340](b187340)) * **slider:** Fix fill placement and tick styling when ranged ([#9204](#9204)) ([a84d831](a84d831)) * **slider:** Improve snapping + step logic ([#8169](#8169)) ([8b83042](8b83042)) * **slider:** Rename `highlightPlacement` to `fillPlacement` ([#9195](#9195)) ([9e5a713](9e5a713)) * **slider:** Style ticks according to the fill placement ([#9196](#9196)) ([5eb4e10](5eb4e10)) * **stepper-item:** Remove delay in highlighting item ([#8996](#8996)) ([bcf23dd](bcf23dd)) * **tree-item:** Do not select when chevron clicked ([#9115](#9115)) ([99ad8f1](99ad8f1)) ### Dependencies * The following workspace dependencies were updated * devDependencies * @esri/calcite-design-tokens bumped from ^2.2.0-next.0 to ^2.2.0 * @esri/eslint-plugin-calcite-components bumped from ^1.2.0-next.1 to ^1.2.0 </details> <details><summary>@esri/calcite-components-angular: 2.8.0</summary> ## [2.8.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.7.1...@esri/calcite-components-angular@2.8.0) (2024-04-30) ### Miscellaneous Chores * **@esri/calcite-components-angular:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.0-next.20 to ^2.8.0 </details> <details><summary>@esri/calcite-components-react: 2.8.0</summary> ## [2.8.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.7.1...@esri/calcite-components-react@2.8.0) (2024-04-30) ### Miscellaneous Chores * **@esri/calcite-components-react:** Synchronize components versions ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^2.8.0-next.20 to ^2.8.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>

aPreciado88 requested a review from a team as a code owner April 17, 2024 23:09

github-actions bot assigned aPreciado88 Apr 17, 2024

aPreciado88 changed the title ~~fix(input-date-picker) updated chevron icons colors to be ui-text-3 w…~~ fix:(input-date-picker) updated chevron icons colors to be ui-text-3 w… Apr 17, 2024

aPreciado88 changed the title ~~fix:(input-date-picker) updated chevron icons colors to be ui-text-3 w…~~ fix: (input-date-picker) updated chevron icon colors Apr 17, 2024

aPreciado88 changed the title ~~fix: (input-date-picker) updated chevron icon colors~~ fix: input-date-picker, updated chevron icon colors Apr 17, 2024

aPreciado88 changed the title ~~fix: input-date-picker, updated chevron icon colors~~ fix: input date picker, updated chevron icon colors Apr 17, 2024

aPreciado88 changed the title ~~fix: input date picker, updated chevron icon colors~~ fix(input-date-picker): updated chevron icon colors to be ui-text-3 when idle and ui-text-1 when hovered or pressed. Apr 17, 2024

fix(input-date-picker): updated chevron icon colors to be ui-text-3 w…

873e528

…hen idle and ui-text-1 when hovered or pressed.

aPreciado88 force-pushed the aPreciado88/7712-update-date-picker-chevron-colors branch from 5400a86 to 873e528 Compare April 17, 2024 23:30

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

benelan reviewed Apr 18, 2024

View reviewed changes

benelan requested changes Apr 18, 2024

View reviewed changes

aPreciado88 changed the title ~~fix(input-date-picker): updated chevron icon colors to be ui-text-3 when idle and ui-text-1 when hovered or pressed.~~ fix(input-date-picker): consistent chevron icon color Apr 18, 2024

fix(input-date-picker): updated chevron icon colors to be --calcite-c…

a55aa92

…olor-text-3 when idle and --calcite-color-text-1 when hovered or pressed.

aPreciado88 requested a review from benelan April 18, 2024 17:20

aPreciado88 added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 18, 2024

benelan approved these changes Apr 18, 2024

View reviewed changes

fix(input-date-picker): consistent chevron icon color

4f1b970

aPreciado88 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 Apr 18, 2024

aPreciado88 requested a review from benelan April 18, 2024 21:25

Merge branch 'main' of github.com:Esri/calcite-design-system into aPr…

992bceb

…eciado88/7712-update-date-picker-chevron-colors

benelan requested changes Apr 18, 2024

View reviewed changes

fix(input-date-picker): consistent chevron icon color

a0cd311

aPreciado88 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 Apr 18, 2024

aPreciado88 requested a review from benelan April 18, 2024 23:29

benelan approved these changes Apr 19, 2024

View reviewed changes

aPreciado88 changed the title ~~fix(input-date-picker): consistent chevron icon color~~ fix(input-date-picker): update the focus and hover chevron icon color Apr 19, 2024

fix(input-date-picker): update the focus and hover chevron icon color

eff55bb

aPreciado88 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 Apr 19, 2024

aPreciado88 requested a review from benelan April 19, 2024 17:26

Merge branch 'main' of github.com:Esri/calcite-design-system into aPr…

0f01b44

…eciado88/7712-update-date-picker-chevron-colors

aPreciado88 added skip visual snapshots Pull requests that do not need visual regression testing. 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 Apr 22, 2024

Merge branch 'main' of github.com:Esri/calcite-design-system into aPr…

97a3eee

…eciado88/7712-update-date-picker-chevron-colors

aPreciado88 merged commit ca895e9 into main Apr 23, 2024
11 checks passed

aPreciado88 deleted the aPreciado88/7712-update-date-picker-chevron-colors branch April 23, 2024 16:58

github-actions bot added this to the 2024-04-30 - Apr Release milestone Apr 23, 2024

calcite-admin mentioned this pull request Apr 23, 2024

chore: release main #9050

Merged

calcite-admin mentioned this pull request May 14, 2024

chore: release main #9237

Merged

calcite-admin mentioned this pull request May 28, 2024

chore: release hotfix #9438

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(input-date-picker): update the focus and hover chevron icon color #9146

fix(input-date-picker): update the focus and hover chevron icon color #9146

aPreciado88 commented Apr 17, 2024 •

edited

benelan left a comment •

edited

benelan Apr 17, 2024 •

edited

aPreciado88 Apr 18, 2024

benelan left a comment •

edited

benelan left a comment

ashetland commented Apr 18, 2024

aPreciado88 commented Apr 18, 2024

benelan left a comment

aPreciado88 commented Apr 18, 2024 •

edited

benelan left a comment

ashetland commented Apr 19, 2024

jcfranco commented Apr 19, 2024

aPreciado88 commented Apr 19, 2024

jcfranco commented Apr 19, 2024

ashetland commented Apr 19, 2024

fix(input-date-picker): update the focus and hover chevron icon color #9146

fix(input-date-picker): update the focus and hover chevron icon color #9146

Conversation

aPreciado88 commented Apr 17, 2024 • edited

Summary

benelan left a comment • edited

Choose a reason for hiding this comment

benelan Apr 17, 2024 • edited

Choose a reason for hiding this comment

aPreciado88 Apr 18, 2024

Choose a reason for hiding this comment

benelan left a comment • edited

Choose a reason for hiding this comment

benelan left a comment

Choose a reason for hiding this comment

ashetland commented Apr 18, 2024

aPreciado88 commented Apr 18, 2024

benelan left a comment

Choose a reason for hiding this comment

aPreciado88 commented Apr 18, 2024 • edited

benelan left a comment

Choose a reason for hiding this comment

ashetland commented Apr 19, 2024

jcfranco commented Apr 19, 2024

aPreciado88 commented Apr 19, 2024

jcfranco commented Apr 19, 2024

ashetland commented Apr 19, 2024

aPreciado88 commented Apr 17, 2024 •

edited

benelan left a comment •

edited

benelan Apr 17, 2024 •

edited

benelan left a comment •

edited

aPreciado88 commented Apr 18, 2024 •

edited