Skip to content

Commit f67abde

Browse files
undavideundavide
committed
Color Picker API updates
1 parent 844dad1 commit f67abde

File tree

4 files changed

+30
-30
lines changed

4 files changed

+30
-30
lines changed

‎src/pages/guides/develop/how_to/use_color.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -133,10 +133,6 @@ Please note that Adobe Express uses the terms **make** and **create** to disting
133133

134134
Adobe Express includes a native Color Picker, with special features such as Recommended Swatches, Eyedropper, Themes, Library and Brand colors. The Color Picker is available also to add-ons, you can invoke it using the [`addOnUISdk.app.showColorPicker()`](../../../references/addonsdk/addonsdk-app.md#showcolorpicker) method.
135135

136-
<InlineAlert slots="text" variant="warning"/>
137-
138-
**IMPORTANT:** This is currently **_experimental only_** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../../../references/manifest/index.md#requirements) section of the `manifest.json`.
139-
140136
#### Benefits
141137

142138
- It simplifies the process of selecting a color, bypassing the Browser's color picker.

‎src/pages/references/addonsdk/addonsdk-app.md

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -258,10 +258,6 @@ See the use case implementations for an example of the [custom modal dialog](../
258258

259259
Shows the Adobe Express color picker based on specific options passed in.
260260

261-
<InlineAlert slots="text" variant="warning"/>
262-
263-
**IMPORTANT:** This is currently **_experimental only_** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../manifest/index.md#requirements) section of the `manifest.json`.
264-
265261
#### Signature
266262

267263
`showColorPicker(anchorElement: HTMLElement, options?: ColorPickerOptions): Promise<void>;`
@@ -275,13 +271,13 @@ Shows the Adobe Express color picker based on specific options passed in.
275271

276272
##### `ColorPickerOptions`
277273

278-
| Name | Type | Description |
279-
| ------------------------ | -----------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
280-
| `title?` | `string` | Label header/title for the color picker. Default value: `""` |
281-
| `initialColor?` | `number` | Default/starting color when you open the color picker for the first time on a `anchorElement`. When you have already changed the color with this picker, then the next time you open the picker, the last selected color will be the starting color. Default: `0xFFFFFF` (white) |
282-
| `placement?` | `object` [ColorPickerPlacement](./addonsdk-constants.md#constants) | Placement of the popover with respect to the anchor element (default: `"left"`). |
283-
| `eyedropperHidesPicker?` | `boolean` | Closes the color picker popover while using the EyeDropper. After the color is selected via the EyeDropper, the color picker popup opens again. Default: `false`. |
284-
| `disableAlphaChannel?` | `boolean` | Disables the transparency slider in the "custom" section of the color picker. Default: `false`. |
274+
| Name | Type | Description |
275+
| ------------------------ | -----------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
276+
| `title?` | `string` | Label header/title for the color picker. Default value: `""` |
277+
| `initialColor?` | `number` or `string` | Default/starting color when you open the color picker for the first time on a `anchorElement`, in the format `0xRRGGBB[AA]` or `"#RRGGBB[AA]"`. When you have already changed the color with this picker, then the next time you open the picker, the last selected color will be the starting color. Default: `0xFFFFFF` (white) |
278+
| `placement?` | `object` [ColorPickerPlacement](./addonsdk-constants.md#constants) | Placement of the popover with respect to the anchor element (default: `"left"`). |
279+
| `eyedropperHidesPicker?` | `boolean` | Closes the color picker popover while using the EyeDropper. After the color is selected via the EyeDropper, the color picker popup opens again. Default: `false`. |
280+
| `disableAlphaChannel?` | `boolean` | Disables the transparency slider in the "custom" section of the color picker. Default: `false`. |
285281

286282
#### Return Value
287283

@@ -310,10 +306,6 @@ colorPickerButton.addEventListener(ColorPickerEvent.colorChange, (event) => {
310306

311307
Hides the Adobe Express color picker.
312308

313-
<InlineAlert slots="text" variant="warning"/>
314-
315-
**IMPORTANT:** This is currently **_experimental only_** and should not be used in any add-ons you will be distributing until it has been declared stable. To use it, you will first need to set the `experimentalApis` flag to `true` in the [`requirements`](../manifest/index.md#requirements) section of the `manifest.json`.
316-
317309
#### Signature
318310

319311
`hideColorPicker(): Promise<void>;`

‎src/pages/references/changelog.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@ contributors:
2222

2323
# Changelog
2424

25+
## 2025-05-05
26+
27+
### Updated
28+
29+
There are a few notable changes regarding the [Color Picker APIs](../references/addonsdk/addonsdk-app.md#showcolorpicker), which have now moved to stable:
30+
31+
- The `initialColor` parameter now accepts a string in `"#RRGGBB[AA]"` format, in addition to the previous HEX number `0xRRGGBB[AA]`—both with optional alpha channel.
32+
- We fixed the return value of the `ColorPickerEvent.colorChange` event, which now correctly handles the color with or without the alpha channel, depending on the value of the `disableAlphaChannel` parameter.
33+
- **Breaking change**: the `ColorPickerEvents` enum has been renamed to `ColorPickerEvent` (singular).
34+
2535
## 2025-04-22
2636

2737
### Updated

‎src/pages/references/ui-components/color-picker.md

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,15 @@ The Adobe Express native Color Picker offers several unique features, compared t
3232

3333
![Color Picker](./images/colorpicker_brand.png)
3434

35-
Using the Adobe ExpressColor Picker in your add-on instead of building your own version provides a few benefits:
35+
Using the Adobe Express Color Picker in your add-on instead of building your own version provides a few benefits:
3636

3737
- It simplifies the process of selecting a color, bypassing the Browser's color picker.
3838
- It provides a consistent experience to users, as the color picker is integrated with Adobe Express.
3939
- It's in sync with any swatches or Brand colors defined in the application.
4040
- It will evolve with Adobe Express, adding new features over time.
4141

42+
Please note that the Color Picker is going to be available to add-ons in Adobe Express on desktop environment only.
43+
4244
## API
4345

4446
The [`addOnUISdk.app`](../addonsdk/addonsdk-app.md) has two dedicated method:
@@ -197,30 +199,30 @@ The color picker can be positioned relative to the anchor element using the `pla
197199

198200
**Invalid anchor element: must be an instance of `HTMLElement`.**
199201

200-
- **Origin:** Parameter `anchorElement`
201-
- **Fix:** the anchorElement should be a valid `HTMLElement`
202+
- **Origin:** Parameter `anchorElement`.
203+
- **Fix:** the anchorElement should be a valid `HTMLElement`.
202204

203205
**Invalid title: must be a string.**
204206

205-
- **Origin:** Property `title` in the `ColorPickerOptions`
206-
- **Fix:** the `title` should be a valid string
207+
- **Origin:** Property `title` in the `ColorPickerOptions`.
208+
- **Fix:** the `title` should be a valid string.
207209

208-
**Invalid initial color: must be a HEX number in `0xRRGGBB` format.**
210+
**Invalid initialColor: must be either a number in `0xRRGGBB[AA]` format or a string in `"#RRGGBB[AA]"` format.**
209211

210-
- **Origin:** Property `initialColor` in the `ColorPickerOptions`
211-
- **Fix:** the `initialColor` should be a valid number in 0xRRGGBB format.
212+
- **Origin:** Property `initialColor` in the `ColorPickerOptions`.
213+
- **Fix:** the `initialColor` should be a valid number in `0xRRGGBB[AA]` format or a valid string in `"#RRGGBB[AA]"` format.
212214

213215
**Invalid placement value: must be one of the valid `ColorPickerPlacement` values.**
214216

215-
- **Origin:** Property `placement` in the `ColorPickerOptions`
217+
- **Origin:** Property `placement` in the `ColorPickerOptions`.
216218
- **Fix:** the `placement` should be a valid string from the `ColorPickerPlacement` enum.
217219

218220
**Invalid `eyedropperHidesPicker`: must be a boolean value.**
219221

220-
- **Origin:** Property `eyedropperHidesPicker` in the `ColorPickerOptions`
222+
- **Origin:** Property `eyedropperHidesPicker` in the `ColorPickerOptions`.
221223
- **Fix:** the `eyedropperHidesPicker` must be a boolean value.
222224

223225
**Invalid `disableAlphaChannel`: must be a boolean value.**
224226

225-
- **Origin:** Property `disableAlphaChannel` in the `ColorPickerOptions`
227+
- **Origin:** Property `disableAlphaChannel` in the `ColorPickerOptions`.
226228
- **Fix:** the `disableAlphaChannel` must be a boolean value.

0 commit comments

Comments
 (0)