ColorChooser does not closing selection modal on Apply or Close action

[serhiibilous]

Latest version

• [X] I have tested the latest version

Description

When we clicked the color button to change the color, the selection modal opened, and we changed the color. Then, if we click the "Close" or "Apply" button, the selection modal does not close. It only works if we click outside of the selection modal.

Steps to reproduce

Render ColorChooser component open a selection modal, select a collor and click close or Apply.

Expected behavior

The selection modal should be closed after Applying chnages or clicking on close.

Package name(s)

Lab (@salt-ds/lab)

Package version(s)

@salt-ds/lab@1.0.0-alpha.52

Browser

• [X] Chrome
• [X] Safari
• [X] Firefox
• [X] Microsoft Edge

Operating system

• [X] macOS
• [X] Windows
• [X] Linux
• [X] iOS
• [X] Android

Are you a JPMorgan Chase & Co. employee?

• [X] I am an employee of JPMorgan Chase & Co.

[origami-z]

Lab components that are not listed on Salt website are not receiving active development. So this is low priority for us. Any PR is welcome.

---

Buttons were broken from #2735 when open is no longer controlling Overlay. To better align with Overlay's composable API, ColorChooser may be disassembled into multiple pieces, like #3716. So controlling panel open falls into user's hand.

[serhiibilous]

If someone needs it, you can create a custom solution to have ColorChooser by using ColorPicker wrapped in the Overlay.

          <Overlay placement="bottom" open={open} onOpenChange={onOpenChange}>
            <OverlayTrigger>
              <Button>
                <div
                  className={classNames(withBaseName("overlayButtonSwatch"))}
                  style={{
                    backgroundColor: field.value,
                  }}
                />
                <div className={withBaseName("overlayButtonText")}>
                  {field.value}
                </div>
              </Button>
            </OverlayTrigger>
            <OverlayPanel aria-labelledby={fieldId}>
              <OverlayPanelCloseButton onClick={handleClose} />
              <OverlayPanelContent>
                <ColorPicker
                  disableAlphaChooser={false}
                  onChange={handleChange}
                  onDialogClosed={() => {}}
                  color={Color.makeColorFromHex(field.value)}
                />
              </OverlayPanelContent>
            </OverlayPanel>
          </Overlay>
        </div>```