feat(color-picker): replaces thumb focus outline to rounded #7378

anveshmekala · 2023-07-25T17:11:13Z

Related Issue: #4633

Summary

This PR will replace the existing focus outline for thumb in calcite-color-picker to rounded.

After the change:

driskull

👍 🎉 🌮

packages/calcite-components/src/components/color-picker/color-picker.tsx

driskull · 2023-07-26T22:01:07Z

packages/calcite-components/src/components/color-picker/color-picker.tsx

                role="slider"
-                style={{ top: `${hueTop}px`, left: `${hueLeft}px` }}
+                style={{
+                  top: `${hueTop - DIMENSIONS.scopeNode / 2}px`,


since a few places are dividing a value by the scopeNode and converting to px maybe convert that into a function for reuse.

packages/calcite-components/src/components/color-picker/color-picker.tsx

…line

jcfranco

Looking good, @anveshmekala! ✨🖍️😎✨

packages/calcite-components/src/components/color-picker/utils.ts

packages/calcite-components/src/components/color-picker/color-picker.tsx

packages/calcite-components/src/components/color-picker/color-picker.e2e.ts

jcfranco · 2023-07-27T19:41:31Z

packages/calcite-components/src/components/color-picker/resources.ts

@@ -93,4 +93,5 @@ export const DIMENSIONS = {
      radius: 10,
    },
  },
+  thumbNode: 1,


Can this be moved to the component itself or a separate constant? Currently, I find it a bit confusing:

the dimensions object stores the size of different parts across all scales that are drawn onto canvas elements

I know it's a bit verbose, but repeated values across scales have a corresponding prop

none of the existing part names use node, and there's already one for thumb

jcfranco · 2023-07-27T19:58:00Z

packages/calcite-components/src/components/color-picker/color-picker.scss

  &:focus {
    @apply focus-outset;
-    outline-offset: 16px;


One more thing I noticed. The design spec seems to have a 2px space between the thumb and the focus outline. The spacing in the PR screenshot looks larger than that. Maybe adjusting this to 14px can help better match that.

if we increase the spacing from 12px to 14px it will increase the gap between the thumb and outline.

Thoughts @ashetland

Adding @macandcheese.

If I’m following, I agree it should be a 2px gap to align with other “outset focus” styles.

…line

jcfranco

Aside from some minor comments, this LGTM! 🚀

jcfranco · 2023-07-31T19:50:06Z

packages/calcite-components/src/components/color-picker/color-picker.e2e.ts

@@ -22,6 +22,10 @@ describe("calcite-color-picker", () => {
    await page.waitForChanges();
  }

+  function getScopeCenter(X: number, Y: number): [number, number] {


jcfranco · 2023-07-31T22:12:41Z

packages/calcite-components/src/components/color-picker/color-picker.e2e.ts

      });
    });
  });
+
+  describe("mouse interaction with scope", () => {


Awesome coverage here. Can you move this closer to the keyboard scope interaction block? Bonus points if these are grouped within a scope interaction describe block.

describe("scope interaction", () => { describe("mouse", async () => { /* ... */ }); describe("keyboard", async () => { /* ... */ }); })

This is not critical and can be done in a follow-up PR.

currently mouse interaction with scope is placed near to keyboard scope interaction block.

will group them.

jcfranco · 2023-07-31T22:13:43Z

packages/calcite-components/src/components/color-picker/color-picker.e2e.ts

+      const [hueScopeX, hueScopeY] = await getElementXY(page, "calcite-color-picker", `.${CSS.hueScope}`);
+      const value = await colorPicker.getProperty("value");
+
+      await page.mouse.move(hueScopeX + 0.8, hueScopeY);


What does the 0.8 represent? If it's an arbitrary move in pixels, can you simplify this by using whole numbers? Also, can you assign it to a self-documenting const?

This applies to the 10 and 2 values below too.

the 0.8 represent the pixel inside the scope element and the reason for using value above 0.5 is to avoid getting rounded off and assert a change in value.

packages/calcite-components/src/components/color-picker/color-picker.e2e.ts

packages/calcite-components/src/components/color-picker/resources.ts

**Related Issue:** #4633 ## Summary This PR will replace the existing focus outline for thumb in `calcite-color-picker` to rounded. After the change: ![494C307B-315E-4842-93C5-911C6F3810A2](https://github.com/Esri/calcite-design-system/assets/88453586/02b8daed-05c8-4d98-ad1b-504fe9d58fd3) ![ED840D87-BFA5-4602-8D1C-51FF78CD04E2](https://github.com/Esri/calcite-design-system/assets/88453586/4599dc2a-aad4-4a48-b6fd-57277a9b0884)

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03) ### Features * **action-group:** Adds overlayPositioning property. ([#7366](#7366)) ([ca9f35a](ca9f35a)) * Allow sharing focus trap stacks via configuration global ([#7334](#7334)) ([934a19f](934a19f)) * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) * **block, block-section:** Add setFocus method ([#7208](#7208)) ([35d4bbb](35d4bbb)) * **block:** Improve block's content layout to allow scrolling ([#7367](#7367)) ([ecbf17b](ecbf17b)) * **color-picker:** Replaces thumb focus outline to rounded ([#7378](#7378)) ([d803980](d803980)) * **filter:** Add filter method ([#7127](#7127)) ([5a4283f](5a4283f)) * **flow:** Adds setFocus method ([#7252](#7252)) ([2472c58](2472c58)) * Improve focus behavior in components ([#7277](#7277)) ([ad9fbca](ad9fbca)) * **input-time-zone:** Add input-time-zone component ([#6947](#6947)) ([87bd496](87bd496)) * **list:** Add slots for filter actions ([#7183](#7183)) ([da07ab1](da07ab1)) * **list:** Add support for dragging items. ([#7109](#7109)) ([7324f70](7324f70)) * **menu-item:** Update spacing and icon layout ([#7381](#7381)) ([5659671](5659671)) * **navigation-logo:** Increase font-size of heading with no description ([#7081](#7081)) ([355e101](355e101)) * **switch:** Updates focus outline to be rounded ([#7390](#7390)) ([2616b82](2616b82)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7299](#7299)) ([c5678eb](c5678eb)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7412](#7412)) ([c1af3c7](c1af3c7)) ### Bug Fixes * **accordion, accordion-item:** `icon-position`, `icon-type`, `selection-mode` and `scale` can now be set as props or attributes ([#7191](#7191)) ([2b09aba](2b09aba)) * **action-bar:** No longer delegates focus when clicked on non-focusable region ([#7310](#7310)) ([1a9c15c](1a9c15c)) * **action:** Correctly focus the button after rendering updates. ([#7255](#7255)) ([40fe2ce](40fe2ce)) * **block:** Loader now appears for all loading cases ([#7303](#7303)) ([5af3600](5af3600)) * **block:** Removes extra loading indicator ([#7239](#7239)) ([a334a75](a334a75)) * **card:** Ensure teardown logic is called when disconnected ([#7289](#7289)) ([d07e322](d07e322)) * **chip:** Disconnect mutation observer when component is disconnected from the DOM ([#7418](#7418)) ([412e5fb](412e5fb)) * **color-picker:** Draw slider thumbs within bounds ([#7398](#7398)) ([2f37854](2f37854)) * **color-picker:** Fix opacity slider keyboard nudging ([#7400](#7400)) ([2b4f7c3](2b4f7c3)) * **color-picker:** Maintains correct numbering system when entering invalid RGB value ([#7327](#7327)) ([8d2a3a5](8d2a3a5)) * **combobox:** Add space after grouped items ([#7302](#7302)) ([b1580c7](b1580c7)) * **dropdown-item:** Provides accessible label when href is not parsed ([#7316](#7316)) ([966b83d](966b83d)) * **flow:** Call setFocus() on back button click ([#7285](#7285)) ([9102aa4](9102aa4)) * **input-date-picker:** Provides placeholder text context for AT users ([#7320](#7320)) ([31e0ba2](31e0ba2)) * **input-date-picker:** Reset active date picker date after closing ([#7219](#7219)) ([91b2a1b](91b2a1b)) * **input, input-number:** No longer removes trailing decimal separator ([#7159](#7159)) ([01535cf](01535cf)) * **link:** Adds outline-offset to avoid overlapping with text. ([#7342](#7342)) ([c30db4e](c30db4e)) * **list:** Changing filterText property will now update filtered items ([#7133](#7133)) ([a9c0bce](a9c0bce)) * **list:** Fix keyboard navigation after a listItem's disabled or closed property changes ([#7275](#7275)) ([91d28eb](91d28eb)) * **list:** Fix keyboard navigation when filterEnabled is true ([#7385](#7385)) ([41a2e42](41a2e42)) * **menu-item:** Prevent duplicate border in nested vertical menu-items ([#7387](#7387)) ([186a738](186a738)) * **panel:** Remove double border styling when content isn't provided ([#7368](#7368)) ([91a0610](91a0610)) * Remove style modifying all host components with hidden attribute ([#7346](#7346)) ([3103e2f](3103e2f)) * **scrim:** Update loader scale on resize of component. ([#7419](#7419)) ([24e7f70](24e7f70)) * **slider:** Prevent excessive tick rendering ([#7421](#7421)) ([c799409](c799409)) * **switch:** Fix for focus outline style in certain cases ([#7414](#7414)) ([217324f](217324f)) * **tab-title:** Add full focus outline to closable tab button in high contrast mode ([#7272](#7272)) ([d812d17](d812d17)) * **tooltip:** Avoid extra before open/close event emitting ([#7422](#7422)) ([dbb6818](dbb6818)) * **tooltip:** Deprecate the label property due to the description coming from the component's content ([#7247](#7247)) ([7934d75](7934d75)) * **tooltip:** Emits `close` and `beforeClose` events when container is set to `display:none` ([#7258](#7258)) ([60a4683](60a4683)) * **tooltip:** Ensure --calcite-app-z-index-tooltip is applied ([#7345](#7345)) ([a9a7072](a9a7072)) </details> <details><summary>@esri/calcite-components-react: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/[email protected]...@esri/[email protected]) (2023-08-03) ### Features * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.5.0-next.38 to ^1.5.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>

feat(color-picker): replaces thumb focus outline to rounded

29fa91d

github-actions bot added the enhancement Issues tied to a new feature or request. label Jul 25, 2023

github-actions bot assigned anveshmekala Jul 25, 2023

anveshmekala added 3 commits July 25, 2023 13:11

use integer values for width and height

6cd2fff

fix test errors

d63ba1b

add listener for pointerdown event from thumb

6aefbc4

anveshmekala marked this pull request as ready for review July 26, 2023 21:54

anveshmekala requested a review from a team as a code owner July 26, 2023 21:54

remove console.log statements

4fe5813

driskull approved these changes Jul 26, 2023

View reviewed changes

refactor

238bfea

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

anveshmekala marked this pull request as draft July 26, 2023 22:23

anveshmekala added 4 commits July 26, 2023 17:59

replace css with tailwind util classes

7131ed9

add spec test

8ae809d

cleanup

f66d93d

Merge branch 'main' into anveshmekala/4633-color-picker-fix-focus-out…

ce98213

…line

anveshmekala marked this pull request as ready for review July 27, 2023 16:52

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 Jul 27, 2023

anveshmekala requested a review from driskull July 27, 2023 19:17

jcfranco requested changes Jul 27, 2023

View reviewed changes

jcfranco reviewed Jul 27, 2023

View reviewed changes

anveshmekala marked this pull request as draft July 27, 2023 23:12

anveshmekala added 6 commits July 27, 2023 18:30

add more tests and feedback changes

2af2d33

refactor

46cd9f6

rename

4610739

remove new lines

9ea0443

more cleanup

3b98bc1

disable tab container

cb33490

Merge branch 'main' into anveshmekala/4633-color-picker-fix-focus-out…

355c0ae

…line

anveshmekala marked this pull request as ready for review July 28, 2023 22:59

anveshmekala requested a review from jcfranco July 28, 2023 22:59

anveshmekala added 3 commits July 31, 2023 14:39

remove empty new lines

8ce2e6d

change test util method name

858fafa

add focus screenshot test

3c98108

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 Jul 31, 2023

anveshmekala added 2 commits July 31, 2023 17:08

remove pointerDown handler for scope node

3d585ff

update css

d1bc943

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 Jul 31, 2023

jcfranco approved these changes Jul 31, 2023

View reviewed changes

feedback changes

193c54d

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 Jul 31, 2023

anveshmekala added 2 commits August 1, 2023 12:04

change outline offset

51c728c

tidy up

17102cd

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 Aug 1, 2023

increase delay for focus test

6488636

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 Aug 1, 2023

anveshmekala merged commit d803980 into main Aug 1, 2023

anveshmekala deleted the anveshmekala/4633-color-picker-fix-focus-outline branch August 1, 2023 19:56

github-actions bot added this to the 2023 July Priorities milestone Aug 1, 2023

calcite-admin mentioned this pull request Aug 1, 2023

chore: release latest #7261

Merged

geospatialem mentioned this pull request Aug 1, 2023

Hitbox focus on components #4633

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(color-picker): replaces thumb focus outline to rounded #7378

feat(color-picker): replaces thumb focus outline to rounded #7378

anveshmekala commented Jul 25, 2023 •

edited

Loading

driskull left a comment

driskull Jul 26, 2023

jcfranco left a comment

jcfranco Jul 27, 2023

jcfranco Jul 27, 2023

anveshmekala Jul 28, 2023

anveshmekala Jul 31, 2023

macandcheese Jul 31, 2023

jcfranco left a comment

jcfranco Jul 31, 2023

jcfranco Jul 31, 2023

anveshmekala Jul 31, 2023

anveshmekala Jul 31, 2023

jcfranco Jul 31, 2023

anveshmekala Jul 31, 2023

feat(color-picker): replaces thumb focus outline to rounded #7378

feat(color-picker): replaces thumb focus outline to rounded #7378

Conversation

anveshmekala commented Jul 25, 2023 • edited Loading

Summary

driskull left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anveshmekala commented Jul 25, 2023 •

edited

Loading