feat(color-picker, color-picker-hex-input): Add input auto commit, blur and auto select enhancements. #9701

aPreciado88 · 2024-06-26T18:16:36Z

Related Issue: #9624

Summary

Updates color-picker and color-picker-hex-input to:

-Auto select values when clicking on input fields. This applies to all inputs.
-Auto commit a valid 6-char (or 8-char if alpha-channel is enabled).
-Commit a 3-char (or 4-char with alpha-channel) shorthand value onBlur.
-Auto commit channel inputs. If the user deletes the value completely, there will be no change. If left blank, the original value will be restored onBlur.
-Increase/decrease channel input value, when the input is cleared and Arrow-up or Arrow-down are pressed.
-Blur focused input when clicking anywhere within the component, this applies to all input fields.

…ciado88/7057-apply-entered-hex-value-immediately

…ciado88/9624-color-picker-component-enhancements

driskull

Looking good! Had some comments @aPreciado88 👍

driskull · 2024-06-27T16:28:16Z

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

+    if (this.disabled) {
+      return;
+    }
+    this.handleColorPickerBlur();


question: every time the internal container of the component is clicked, the component is blurred?

It seems a little odd to be calling blur on every click of the component, even if the input is clicked.

After reviewing with Franco yesterday, I'm looking for an alternate solution to this. The goal is to be able to blur the input fields without having to click outside of the component.

driskull · 2024-06-27T16:31:25Z

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

+      if alphaChannel is enabled, commit valid 4 digit hex codes.
+      if alphaChannel is disabled, commit valid 3 digit hex codes.
+    */
+  private validateShortHandValue = (value: string): boolean => {


Suggested change

private validateShortHandValue = (value: string): boolean => {

private validateShortHandValue = (value: string): boolean => {

const length = value?.length;

const {alphaChannel } = this;

return (

(alphaChannel && length === 4) || (!alphaChannel && length === 3)

);

};

Franco pointed out this util I'm using this and getting rid of validateShortHandValue.

I'm fine with doing that refactor afterwards, but let's rename the method for consistency.

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

driskull · 2024-06-27T16:36:18Z

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

      inputValue = "";
+      this.channelInputClear = true;
+      // reset this to allow typing in new value when channel input is empty


question: reading this comment, would a private property like allowTypingNewVal be better to allow typing a new value when the input is empty?

Maybe a single property like isInputEmpty or isClear could be used in place of channelInputClear and arrowUpOrDownTracker?

I'm clearing the arrowUpOrDownTracker to prevent an edge case here. If arrowUp or arrowDown are triggered before clearing the input, and then a new value is typed, the logic within that if will be executed. I can try to validate this with a single variable, like you suggested.

driskull · 2024-06-27T16:38:34Z

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

@@ -340,6 +340,10 @@ export class ColorPicker

  private shiftKeyChannelAdjustment = 0;

+  private arrowUpOrDownTracker = "";


If keeping this property can we type it to something like:

private arrowKeyTracker: "up" | "down" | null = null;

driskull · 2024-06-27T16:55:20Z

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

    }
  };

+  private handleChannelBlur = (event: CustomEvent): void => {
+    const input = event.currentTarget as HTMLCalciteInputNumberElement;
+    const channelIndex = Number(input.getAttribute("data-channel-index"));


nitpick: would be nice in the future if we didn't have to convert this to a string in the DOM and then have to parse it back as a Number. Maybe channelsToRender could be stored and used to lookup the index in the future.

… name

…ciado88/9624-color-picker-component-enhancements

jcfranco

This is looking great, @aPreciado88! 🤘😎🤘

Let's sync up to discuss options for the FIXME comment.

jcfranco · 2024-07-03T17:29:40Z

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

+
+    this.focusedInput = false;
+
+    const channelInputs = Array.from(this.tabsRef.querySelectorAll(".channel"));


Can you use the CSS class lookup to build the channel selector? Applies to other hardcoded selectors.

jcfranco · 2024-07-03T17:35:18Z

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

    expect(inputSpy.length).toBe(previousInputEventLength);
  });

+  // same should apply for other channel inputs


Can you merge this comment into the test name? Applies to other comments.

jcfranco · 2024-07-03T17:35:59Z

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

+      if alphaChannel is enabled, commit valid 4 digit hex codes.
+      if alphaChannel is disabled, commit valid 3 digit hex codes.
+    */
+  private validateShortHandValue = (value: string): boolean => {


I'm fine with doing that refactor afterwards, but let's rename the method for consistency.

jcfranco · 2024-07-03T17:38:31Z

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

@@ -108,6 +108,66 @@ describe("calcite-color-picker-hex-input", () => {
    expect(await input.getProperty("value")).toBe("#fafafafa");
  });

+  it("commits shorthand hex on blur", async () => {


Not critical for this PR, but can you look into moving hex and hexa-specific tests under their respective describe blocks?

This test suite needs to be revisited, so we could also create a follow-up issue to restructure/simplify the suite and tackle this there.

jcfranco · 2024-07-03T17:40:20Z

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

@@ -340,6 +340,16 @@ export class ColorPicker

  private shiftKeyChannelAdjustment = 0;

+  private arrowKeyTracker: "up" | "down" | null = null;


Can you reorder these new variables to follow alphabetical order?

jcfranco · 2024-07-03T17:48:21Z

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

      inputValue = "";
+      this.isChannelInputEmpty = true;
+      // reset this to allow typing in new value, when channel input is cleared after ArrowUp or ArrowDown have been pressed
+      this.arrowKeyTracker = null;


Shouldn't this be reset in handleChannelKeyUpOrDown?

jcfranco · 2024-07-03T19:28:26Z

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

@@ -1684,4 +1762,24 @@ export class ColorPicker
  private getAdjustedScopePosition(left: number, top: number): [number, number] {
    return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
  }
+
+  private blurInputFields = (event: PointerEvent): void => {


For a separate refactor/research issue, we may be able to avoid explicitly blurring all inputs whenever the component is clicked by disabling delegatesFocus and relying on internal blur events.

Doing so would:

change the behavior of having the color field thumb focused on

non-focusable element clicks or

calls to colorPicker.focus().

no longer emit blur/focus on the host when focus moves to/from the component

1 should be fine since the original request is based on users wanting to clear inputs when clicking within the color picker and our documentations recommends using setFocus instead of the native method. 2 is a bit more tricky since we would need to restore this behavior if we deem it a breaking change. We don't have any doc on using native focus/blur events, and even if we did, it is not consistent because not all components use delegatesFocus.

One more minor difference I noticed is color thumbs not getting the focus outline when pressed before dragging, but the following should help restore that:

diff --git i/packages/calcite-components/src/components/color-picker/color-picker.tsx w/packages/calcite-components/src/components/color-picker/color-picker.tsx index cc6f8d9b6..7bab79f67 100644 --- i/packages/calcite-components/src/components/color-picker/color-picker.tsx +++ w/packages/calcite-components/src/components/color-picker/color-picker.tsx @@ -13,7 +13,12 @@ import { } from "@stencil/core"; import Color from "color"; import { throttle } from "lodash-es"; -import { Direction, getElementDir, isPrimaryPointerButton } from "../../utils/dom"; +import { + Direction, + focusFirstTabbable, + getElementDir, + isPrimaryPointerButton +} from "../../utils/dom"; import { Scale } from "../interfaces"; import { connectInteractive, @@ -79,9 +84,6 @@ const throttleFor60FpsInMs = 16; @Component({ tag: "calcite-color-picker", styleUrl: "color-picker.scss", - shadow: { - delegatesFocus: true, - }, assetsDirs: ["assets"], }) export class ColorPicker @@ -570,9 +572,15 @@ export class ColorPicker bounds: this.colorFieldRenderingContext.canvas.getBoundingClientRect(), }; this.captureColorFieldColor(offsetX, offsetY); - this.colorFieldScopeNode.focus(); + this.focusScope(this.colorFieldScopeNode); }; + private focusScope(focusEl: HTMLElement): void { + requestAnimationFrame(() => { + focusEl.focus(); + }); + } + private handleHueSliderPointerDown = (event: PointerEvent): void => { if (!isPrimaryPointerButton(event)) { return; @@ -588,7 +596,7 @@ export class ColorPicker bounds: this.hueSliderRenderingContext.canvas.getBoundingClientRect(), }; this.captureHueSliderColor(offsetX); - this.hueScopeNode.focus(); + this.focusScope(this.hueScopeNode); }; private handleOpacitySliderPointerDown = (event: PointerEvent): void => { @@ -606,7 +614,7 @@ export class ColorPicker bounds: this.opacitySliderRenderingContext.canvas.getBoundingClientRect(), }; this.captureOpacitySliderValue(offsetX); - this.opacityScopeNode.focus(); + this.focusScope(this.opacityScopeNode); }; private globalPointerUpHandler = (event: PointerEvent): void => { @@ -679,7 +687,7 @@ export class ColorPicker @Method() async setFocus(): Promise<void> { await componentFocusable(this); - this.el.focus(); + focusFirstTabbable(this.el); } //--------------------------------------------------------------------------

jcfranco · 2024-07-03T19:32:21Z

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

@@ -1684,4 +1762,24 @@ export class ColorPicker
  private getAdjustedScopePosition(left: number, top: number): [number, number] {
    return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
  }
+
+  private blurInputFields = (event: PointerEvent): void => {


Can you rename this method to follow event handler conventions?

jcfranco · 2024-07-03T19:33:54Z

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

+    channelInputs.forEach((element: HTMLCalciteInputNumberElement) => element?.blur());
+
+    const hexInput: HTMLCalciteInputTextElement =
+      this.hexInputRef.shadowRoot.querySelector(".hex-input");


FIXME: we shouldn't be going through component shadow roots.

We need to decide whether to

add internal, for now, setBlur methods to supporting components or

to remove delegatesFocus + other related adjustments (see previous related comment).

1 would also help with #8257.

jcfranco · 2024-07-03T19:48:47Z

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

+
+  private blurInputFields = (event: PointerEvent): void => {
+    const clickedElement = event.composedPath()[0] as HTMLCalciteInputElement;
+    if (!this.focusedInput || clickedElement.tagName === "INPUT") {


The clicked element type and conditional don't match (i.e., HTMLCalciteInputElement.tagName is CALCITE-INPUT).

Can you summarize what that last conditional is checking for?

aPreciado88 · 2024-07-05T23:50:56Z

@jcfranco I addressed your comments and updated the PR. I'll create a new issue to work on updating the color-picker test suite.

…ciado88/9624-color-picker-component-enhancements

jcfranco

LGTM!

Is it possible for the title to include a bit of context regarding the enhancements? I think they're all input-UX related, right?

jcfranco · 2024-07-19T17:43:05Z

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

-  shadow: {
-    delegatesFocus: true,
-  },
+  shadow: {},


This line is no longer necessary, so let's drop it.

I meant to suggest restoring shadow to true and not removing it entirely. Thanks for the catch, @aPreciado88, and sorry for the hassle!

jcfranco · 2024-07-19T17:56:12Z

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

@@ -340,6 +343,10 @@ export class ColorPicker

  private shiftKeyChannelAdjustment = 0;

+  private upOrDownArrowKeyTracker: "down" | null | "up" = null;


Nitpick: could we move null to be last? This should keep non-null values together.

Just tracked my original comment and I think there was a misunderstanding. I meant to suggest the private props be sorted alphabetically, not the types for this variable. Sorry for the confusion!

jcfranco · 2024-07-19T17:59:31Z

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

@@ -180,6 +183,14 @@ export class ColorPickerHexInput implements LoadableComponent {
      allowEmpty && !internalColor ? "" : this.formatOpacityForInternalInput(internalColor);
  };

+  private onOpacityInputFocus = (): void => {


Nitpick: selection text handlers could be merged into one and reused.

jcfranco

LGTM!

Is it possible for the title to include a bit of context regarding the enhancements? I think they're all input-UX related, right?

…cements

…-to-monorepo * origin/dev: feat(combobox, combobox-item): add `metadata` support for filtering (#9819) chore: release next feat(tooltip): support touch events (#9487) build(deps): update storybook monorepo to v8.2.4 (#9815) chore: release next feat(color-picker, color-picker-hex-input): Add input auto commit, blur and auto select enhancements. (#9701) build(deps): update dependency tailwindcss to v3.4.6 (#9814) build(deps): update dependency rollup to v4.18.1 (#9813) build(deps): pin dependencies (#9812)

…ur and auto select enhancements. (#9701) **Related Issue:** [#9624](#9624) ## Summary Updates `color-picker` and `color-picker-hex-input` to: -Auto select values when clicking on input fields. This applies to all inputs. -Auto commit a valid 6-char (or 8-char if alpha-channel is enabled). -Commit a 3-char (or 4-char with alpha-channel) shorthand value onBlur. -Auto commit channel inputs. If the user deletes the value completely, there will be no change. If left blank, the original value will be restored onBlur. -Increase/decrease channel input value, when the input is cleared and Arrow-up or Arrow-down are pressed. -Blur focused input when clicking anywhere within the component, this applies to all input fields.

🤖 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>

aPreciado88 added 10 commits June 11, 2024 13:24

fix(color-picker-hex-input): fix color not auto updating

6591424

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

5043c9b

…ciado88/7057-apply-entered-hex-value-immediately

fix(color-picker-hex-input): fix color not auto updating

54cd63e

fix(color-picker-hex-input): fix color not auto updating

69b82eb

fix(color-picker-hex-input): fix color not auto updating

3336d89

fix(color-picker-hex-input): fix color not auto updating

d53e0b2

fix(color-picker-hex-input): fix color not auto updating

2ceb323

feat(color-picker,color-picker-hex-input) pull dev

20d7630

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

d88d363

…ciado88/9624-color-picker-component-enhancements

feat(color-picker,color-picker-hex-input): add component enhancements

c7e73dc

aPreciado88 requested a review from a team as a code owner June 26, 2024 18:16

feat(color-picker,color-picker-hex-input): fix merge conflicts

1335003

github-actions bot assigned aPreciado88 Jun 26, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Jun 26, 2024

aPreciado88 added this to the 2024-07-30 - Jul Release milestone Jun 26, 2024

feat(color-picker,color-picker-hex-input): update click handler logic

6b16caa

driskull reviewed Jun 27, 2024

View reviewed changes

aPreciado88 added 5 commits June 28, 2024 17:19

feat(color-picker,color-picker-hex-input): update input blur logic

23e4bb7

feat(color-picker,color-picker-hex-input): update input blur function…

a425167

… name

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

70a3c0c

…ciado88/9624-color-picker-component-enhancements

feat(color-picker,color-picker-hex-input): update end to end tests

3019101

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

eb646aa

…ciado88/9624-color-picker-component-enhancements

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

aPreciado88 requested a review from driskull July 2, 2024 23:10

aPreciado88 added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 2, 2024

jcfranco requested changes Jul 3, 2024

View reviewed changes

fix(tile): update input blur logic and code clean up

fcf027c

aPreciado88 removed the skip visual snapshots Pull requests that do not need visual regression testing. label Jul 8, 2024

aPreciado88 added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jul 8, 2024

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

a5a6a2a

…ciado88/9624-color-picker-component-enhancements

aPreciado88 requested a review from jcfranco July 8, 2024 16:58

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

f21e7fa

…ciado88/9624-color-picker-component-enhancements

jcfranco reviewed Jul 19, 2024

View reviewed changes

jcfranco approved these changes Jul 19, 2024

View reviewed changes

feat(color-picker, color-picker-hex-input): code clean up

15f4822

Merge branch 'dev' into aPreciado88/9624-color-picker-component-enhan…

0a9afce

…cements

aPreciado88 merged commit 281a869 into dev Jul 19, 2024
9 checks passed

aPreciado88 deleted the aPreciado88/9624-color-picker-component-enhancements branch July 19, 2024 23:23

jcfranco mentioned this pull request Jul 24, 2024

feat(dialog): adds new dialog component and deprecates the modal component #9751

Merged

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

jcfranco mentioned this pull request Oct 9, 2024

Consistent focus/blur eventing across components #5147

Open

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(color-picker, color-picker-hex-input): Add input auto commit, blur and auto select enhancements. #9701

feat(color-picker, color-picker-hex-input): Add input auto commit, blur and auto select enhancements. #9701

aPreciado88 commented Jun 26, 2024 •

edited

Loading

driskull left a comment

driskull Jun 27, 2024

aPreciado88 Jun 27, 2024

driskull Jun 27, 2024

aPreciado88 Jun 27, 2024

jcfranco Jul 3, 2024

driskull Jun 27, 2024

aPreciado88 Jun 27, 2024

driskull Jun 27, 2024

driskull Jun 27, 2024

jcfranco left a comment

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

jcfranco Jul 3, 2024

aPreciado88 commented Jul 5, 2024

jcfranco left a comment

jcfranco Jul 19, 2024

jcfranco Jul 19, 2024

jcfranco Jul 19, 2024

jcfranco Jul 19, 2024

jcfranco left a comment

-  private validateShortHandValue = (value: string): boolean => {
+private validateShortHandValue = (value: string): boolean => {
+  const  length = value?.length;
+  const {alphaChannel } = this;
+    return (
+      (alphaChannel && length === 4) || (!alphaChannel && length === 3)
+    );
+  };

		@@ -340,6 +340,10 @@ export class ColorPicker

		private shiftKeyChannelAdjustment = 0;

		private arrowUpOrDownTracker = "";


		this.focusedInput = false;

		const channelInputs = Array.from(this.tabsRef.querySelectorAll(".channel"));

		@@ -340,6 +340,16 @@ export class ColorPicker

		private shiftKeyChannelAdjustment = 0;

		private arrowKeyTracker: "up" \| "down" \| null = null;

		@@ -340,6 +343,10 @@ export class ColorPicker

		private shiftKeyChannelAdjustment = 0;

		private upOrDownArrowKeyTracker: "down" \| null \| "up" = null;

feat(color-picker, color-picker-hex-input): Add input auto commit, blur and auto select enhancements. #9701

feat(color-picker, color-picker-hex-input): Add input auto commit, blur and auto select enhancements. #9701

Conversation

aPreciado88 commented Jun 26, 2024 • edited Loading

Summary

driskull 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

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

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

aPreciado88 commented Jul 5, 2024

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

jcfranco left a comment

Choose a reason for hiding this comment

aPreciado88 commented Jun 26, 2024 •

edited

Loading