Skip to content

Update colorpicker api.json #3573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 9, 2025
Merged

Update colorpicker api.json #3573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bc3bae
wix-noci: update api.json
rnuinoci[bot] Mar 9, 2025
b7cb7d9
Update ReactLiveScope and fix space
M-i-k-e-l Mar 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docuilib/src/theme/ReactLiveScope/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Carousel from 'react-native-ui-lib/carousel';
import Checkbox from 'react-native-ui-lib/checkbox';
import Chip from 'react-native-ui-lib/chip';
import ColorPalette from 'react-native-ui-lib/colorPalette';
import ColorPicker from 'react-native-ui-lib/colorPicker';
import ColorSwatch from 'react-native-ui-lib/colorSwatch';
import Constants from 'react-native-ui-lib/constants';
import Drawer from 'react-native-ui-lib/drawer';
Expand Down Expand Up @@ -72,9 +73,10 @@ const ReactLiveScope = {
Checkbox,
Chip,
ColorPalette,
ColorPicker,
Colors,
ColorSwatch,
Constants,
Colors,
Drawer,
Hint,
Icon,
Expand Down
111 changes: 107 additions & 4 deletions src/components/colorPicker/colorPicker.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@
"type": "string[]",
"description": "Array of colors for the picker's color palette (hex values)"
},
{"name": "value", "type": "string", "description": "The value of the selected swatch"},
{
"name": "value",
"type": "string",
"description": "The value of the selected swatch"
},
{
"name": "animatedIndex",
"type": "number",
Expand All @@ -31,8 +35,16 @@
"description": "Accessibility labels as an object of strings",
"default": "{\n addButton: 'add custom color using hex code',\n dismissButton: 'dismiss',\n doneButton: 'done',\n input: 'custom hex color code'\n}"
},
{"name": "testID", "type": "string", "description": "The test id for e2e tests"},
{"name": "backgroundColor", "type": "string", "description": "The ColorPicker's background color"}
{
"name": "testID",
"type": "string",
"description": "The test id for e2e tests"
},
{
"name": "backgroundColor",
"type": "string",
"description": "The ColorPicker's background color"
}
],
"snippet": [
"<ColorPicker",
Expand All @@ -43,5 +55,96 @@
" onSubmit={() => console.log('submit')$5}",
" onValueChange={() => console.log('value changed')$6}",
"/>"
]
],
"docs": {
"hero": {
"title": "ColorPicker",
"description": "markdown:Picking color for background, typography and other elements is possible by various means, among these are: \nColor Swatch, Color Palette and Color Picker Dialog. \nAll these can be implemented in the color picking flow. ",
"type": "hero",
"layout": "horizontal",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_cover.png"
}
]
},
"tabs": [
{
"title": "Overview",
"sections": [
{
"type": "list",
"items": [
{
"title": "",
"description": "markdown:1. Tapping 'Add New' in the Color Palette opens a color picker dialog.
 \n2. Using HLS controls (or even typing actual HEX value) user can achieve any color. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage1.png"
}
]
},
{
"title": "",
"description": "markdown:3. Changes are saved by tapping on ‘V’. \n4. New color styles is saved in the Color Palette and selected as the theme color. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_usage2.png"
}
]
}
],
"layout": "horizontal",
"title": "Usage Example",
"description": "In this example, user picks his own theme color."
},
{
"type": "section",
"title": "Additional entry points examples",
"description": "As mentioned, Color Picker dialog can be triggered by various entry points. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_entryPoints.png"
}
]
},
{
"type": "list",
"items": [
{
"title": "",
"description": "markdown:1. Tapping on the HEX value will “activate” the input field (Main Input) and display the keyboard. New color can be created either by typing a hex value or by pasting a specific value. \n2. Until new valid hex value is provided, the initial color background is kept. Hex value is highlighted with either white at 25% or black at 25%, depending on the background color. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex1.png"
}
]
},
{
"title": "",
"description": "markdown:3. ‘#’ symbol is permanent and cant be deleted. \n4. Once hex value is valid (6 characters), background color changes accordingly. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_hex2.png"
}
]
}
],
"layout": "horizontal",
"title": "Adding HEX values manually",
"description": "Color Picker dialog allows manual entry of the HEX values:"
},
{
"type": "section",
"title": "Spec",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorPicker/ColorPicker_spec.png"
}
]
}
]
}
]
}
}