Skip to content

Commit 73990a9

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 994d52d commit 73990a9

File tree

14 files changed

+792
-195
lines changed

14 files changed

+792
-195
lines changed

‎docs/api/javascript/ui/colorgradient.md‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,19 @@ Sets the available input formats in the gradient input editor. Only "hex" and "r
7979
});
8080
</script>
8181

82+
### input `Boolean` *(default: true)*
83+
84+
Whether to render the input.
85+
86+
#### Example
87+
88+
<div id="ColorGradient"></div>
89+
<script>
90+
$("#ColorGradient").kendoColorGradient({
91+
input: false
92+
});
93+
</script>
94+
8295
### value `String | kendo.Color` *(default: null)*
8396

8497
Specifies the initially selected color.
@@ -94,14 +107,13 @@ Specifies the initially selected color.
94107

95108
### messages `Object`
96109

97-
Allows customization of "Apply" / "Cancel" labels.
110+
Allows customization labels and messages in the ColorGradient.
98111

99112
#### Example
100113

101114
<div id="colorgradient"></div>
102115
<script>
103116
$("#colorgradient").kendoColorGradient({
104-
buttons: true,
105117
messages: {
106118
contrastRatio: "Contrast ratio",
107119
gradient: "Gradient view"
@@ -121,36 +133,28 @@ Allows customization of the "Fail" text in the contrast tool.
121133

122134
Allows customization of the "Pass" text in the contrast tool.
123135

124-
### messages.gradient `String` *(default: "Gradient view")*
125-
126-
Allows customization of the Gradient view button.
127-
128-
### messages.palette `String` *(default: "Palette view")*
129-
130-
Allows customization of the Palette view button.
131-
132136
### messages.toggleFormat `String` *(default: "Toggle format")*
133137

134-
Allows customization of the toggle format button in the Gradient's input editor.
138+
Allows customization of the toggle format button's title in the Gradient's input editor.
135139

136140
### messages.red `String` *(default: "Red")*
137141

138-
Allows customization of the rgb's red input in the Gradient's input editor.
142+
Allows customization of the rgb's red input's aria-label in the Gradient's input editor.
139143

140144
### messages.green `String` *(default: "Green")*
141145

142-
Allows customization of the rgb's green input in the Gradient's input editor.
146+
Allows customization of the rgb's green input's aria-label in the Gradient's input editor.
143147

144148
### messages.blue `String` *(default: "Blue")*
145149

146-
Allows customization of the rgb's blue input in the Gradient's input editor.
150+
Allows customization of the rgb's blue input's aria-label in the Gradient's input editor.
147151
### messages.alpha `String` *(default: "Alpha")*
148152

149-
Allows customization of the rgb's alpha input in the Gradient's input editor.
153+
Allows customization of the rgb's alpha input's aria-label in the Gradient's input editor.
150154

151155
### messages.hex `String` *(default: "HEX")*
152156

153-
Allows customization of the hex input in the Gradient's input editor.
157+
Allows customization of the hex input's aria-label in the Gradient's input editor.
154158

155159
## Methods
156160

@@ -223,7 +227,7 @@ Enables or disables the widget.
223227

224228
Whether the widget should be enabled (`true`) or disabled (`false`). If not specified, the method will enable the widget.
225229

226-
#### Example - disable the flat color picker
230+
#### Example
227231

228232
<div id="colorgradient"></div>
229233
<script>
@@ -242,7 +246,7 @@ Triggers when a new color has been selected.
242246

243247
##### e.value `String`
244248

245-
The value of the ColorPicker.
249+
The value of the ColorGradient.
246250

247251
#### Example - subscribe to the "change" event during initialization
248252

‎docs/api/javascript/ui/colorpicker.md‎

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,6 @@ the DOM.
2020

2121
Specifies whether the widget should display the Apply / Cancel buttons.
2222

23-
Applicable only for the HSV selector, when a [`pallete`](/api/javascript/ui/colorpicker#configuration-palette) is not specified.
24-
2523
#### Example
2624

2725
<input id="colorpicker" type="color" />
@@ -59,18 +57,19 @@ Sets the background color for the contrast tool in the ColorGradient.
5957
});
6058
</script>
6159

62-
### clearButton `Boolean` *(default: false)*
63-
64-
Specifies whether the widget should display the 'Clear color' button.
60+
### closeOnSelect `Boolean` *(default: false)*
6561

66-
Applicable only for the HSV selector, when a [`pallete`](/api/javascript/ui/colorpicker#configuration-palette) is not specified.
62+
Specifies whether selection of a color in the palette view closes the popup. Applied only when buttons are set to false and the currently selected view is palette.
6763

6864
#### Example
6965

7066
<input id="colorpicker" type="color" />
7167
<script>
7268
$("#colorpicker").kendoColorPicker({
73-
clearButton: true
69+
buttons: false,
70+
view: "palette",
71+
views: ["palette"],
72+
closeOnSelect: true
7473
});
7574
</script>
7675

@@ -97,7 +96,7 @@ Sets the default input format in the gradient input editor.
9796

9897
#### Example
9998

100-
<div id="colorpicker"></div>
99+
<input id="colorpicker" type="color" />
101100
<script>
102101
$("#colorpicker").kendoColorPicker({
103102
format: "rgb"
@@ -110,14 +109,27 @@ Sets the available input formats in the gradient input editor. Only "hex" and "r
110109

111110
#### Example
112111

113-
<div id="colorpicker"></div>
112+
<input id="colorpicker" type="color" />
114113
<script>
115114
$("#colorpicker").kendoColorPicker({
116115
format: "rgb",
117116
formats: ["rgb"]
118117
});
119118
</script>
120119

120+
### input `Boolean` *(default: true)*
121+
122+
Whether to render the input in the ColorGradient component.
123+
124+
#### Example
125+
126+
<input id="colorpicker" type="color" />
127+
<script>
128+
$("#colorpicker").kendoColorPicker({
129+
input: false
130+
});
131+
</script>
132+
121133
### tileSize `Number|Object` *(default: 14)*
122134

123135
The size of a color cell.
@@ -206,9 +218,13 @@ Allows customization of the "Cancel" button text.
206218
})
207219
</script>
208220

209-
### messages.previewInput `String` *(default: "Color Hexadecimal Code")*
221+
### messages.clearColor `String` *(default: "Clear color")*
222+
223+
Allows customization of the Clear Color button label.
210224

211-
Allows customization of the "Color Hexadecimal Code" preview input title.
225+
### messages.previewInput `String`
226+
227+
Overrides the messages.hex property. Legacy option.
212228

213229
#### Example
214230

@@ -243,26 +259,26 @@ Allows customization of the Palette view button.
243259

244260
### messages.toggleFormat `String` *(default: "Toggle format")*
245261

246-
Allows customization of the toggle format button in the Gradient's input editor.
262+
Allows customization of the toggle format button's title in the Gradient's input editor.
247263

248264
### messages.red `String` *(default: "Red")*
249265

250-
Allows customization of the rgb's red input in the Gradient's input editor.
266+
Allows customization of the rgb's red input's aria-label in the Gradient's input editor.
251267

252268
### messages.green `String` *(default: "Green")*
253269

254-
Allows customization of the rgb's green input in the Gradient's input editor.
270+
Allows customization of the rgb's green input's aria-label in the Gradient's input editor.
255271

256272
### messages.blue `String` *(default: "Blue")*
257273

258-
Allows customization of the rgb's blue input in the Gradient's input editor.
274+
Allows customization of the rgb's blue input's aria-label in the Gradient's input editor.
259275
### messages.alpha `String` *(default: "Alpha")*
260276

261-
Allows customization of the rgb's alpha input in the Gradient's input editor.
277+
Allows customization of the rgb's alpha input's aria-label in the Gradient's input editor.
262278

263279
### messages.hex `String` *(default: "HEX")*
264280

265-
Allows customization of the hex input in the Gradient's input editor.
281+
Allows customization of the hex input's aria-label in the Gradient's input editor.
266282

267283
### palette `String|Array` *(default: null)*
268284

@@ -278,9 +294,6 @@ a simple color picker that lists the colors. The following are supported:
278294
If you pass an array it can contain strings supported by [parseColor][] or
279295
[Color][] objects.
280296

281-
If `palette` is missing or `null`, the widget will display the HSV
282-
selector.
283-
284297
#### Example - use "websafe" palette
285298

286299
<input id="colorpicker" type="color" />
@@ -316,9 +329,7 @@ Note that currently in HTML5 the `<input type="color">` does not support opacity
316329

317330
### preview `Boolean` *(default: true)*
318331

319-
Only applicable for the HSV selector.
320-
321-
Displays the color preview element, along with an input field where the end user can paste a color in a CSS-supported notation.
332+
Displays the color preview element and the previously selected color for comparison. With buttons set to false, both elements will update at the same time.
322333

323334
#### Example
324335

@@ -508,7 +519,7 @@ sets a new background color for the contrast tool.
508519

509520
The new background color.
510521

511-
#### Example - disable the color picker
522+
#### Example
512523

513524
<div id="colorpicker"></div>
514525
<script>

‎docs/api/javascript/ui/flatcolorpicker.md‎

Lines changed: 64 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,20 @@ Specifies whether the widget should display the Apply / Cancel buttons.
3737
});
3838
</script>
3939

40+
### columns `Number`
41+
42+
The number of columns to show in the palette. Also defines the width of the FlatColorPicker.
43+
44+
#### Example - wrap list of colors on two rows with 3 columns
45+
46+
<input id="flatcolorpicker" type="color" />
47+
<script>
48+
$("#flatcolorpicker").kendoFlatColorPicker({
49+
palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
50+
columns: 3
51+
});
52+
</script>
53+
4054
### contrastTool `Boolean|Object` *(default: false)*
4155

4256
Enables the contrast tool in the ColorGradient.
@@ -92,6 +106,20 @@ Sets the available input formats in the gradient input editor. Only "hex" and "r
92106
});
93107
</script>
94108

109+
110+
### input `Boolean` *(default: true)*
111+
112+
Whether to render the input in ColorGradient component.
113+
114+
#### Example
115+
116+
<div id="flatcolorpicker"></div>
117+
<script>
118+
$("#flatcolorpicker").kendoFlatColorPicker({
119+
input: false
120+
});
121+
</script>
122+
95123
### value `String | kendo.Color` *(default: null)*
96124

97125
Specifies the initially selected color.
@@ -107,8 +135,7 @@ Specifies the initially selected color.
107135

108136
### preview `Boolean` *(default: true)*
109137

110-
Specifies whether we should display the preview bar which displays the
111-
current color and the input field.
138+
Specifies whether a selected and previous color are displayed for color comparison. with autoupdate set to true both selected and previous colors will be updated.
112139

113140
#### Example
114141

@@ -134,6 +161,30 @@ the input field, whenever a valid color can be parsed. If you pass
134161
});
135162
</script>
136163

164+
### palette `String|Array` *(default: null)*
165+
166+
Specifies the color palette to display.
167+
168+
#### Example - use "websafe" palette
169+
170+
<div id="flatcolorpicker"></div>
171+
<script>
172+
$("#flatcolorpicker").kendoFlatColorPicker({
173+
palette: "websafe",
174+
columns: 18
175+
});
176+
</script>
177+
178+
#### Example - use list of colors
179+
180+
<div id="flatcolorpicker"></div>
181+
<script>
182+
$("#flatcolorpicker").kendoFlatColorPicker({
183+
palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
184+
columns: 6
185+
});
186+
</script>
187+
137188
### messages `Object`
138189

139190
Allows customization of "Apply" / "Cancel" labels.
@@ -181,6 +232,10 @@ Allows customization of "Cancel" label.
181232
});
182233
</script>
183234

235+
### messages.clearColor `String` *(default: "Clear color")*
236+
237+
Allows customization of the Clear Color button label.
238+
184239
### messages.contrastRatio `String` *(default: "Contrast ratio")*
185240

186241
Allows customization of the "Contrast ratio" text in the contrast tool.
@@ -203,26 +258,26 @@ Allows customization of the Palette view button.
203258

204259
### messages.toggleFormat `String` *(default: "Toggle format")*
205260

206-
Allows customization of the toggle format button in the Gradient's input editor.
261+
Allows customization of the toggle format button's aria-label in the Gradient's input editor.
207262

208263
### messages.red `String` *(default: "Red")*
209264

210-
Allows customization of the rgb's red input in the Gradient's input editor.
265+
Allows customization of the rgb's red input's aria-label in the Gradient's input editor.
211266

212267
### messages.green `String` *(default: "Green")*
213268

214-
Allows customization of the rgb's green input in the Gradient's input editor.
269+
Allows customization of the rgb's green input's aria-label in the Gradient's input editor.
215270

216271
### messages.blue `String` *(default: "Blue")*
217272

218-
Allows customization of the rgb's blue input in the Gradient's input editor.
273+
Allows customization of the rgb's blue input's aria-label in the Gradient's input editor.
219274
### messages.alpha `String` *(default: "Alpha")*
220275

221-
Allows customization of the rgb's alpha input in the Gradient's input editor.
276+
Allows customization of the rgb's alpha input's aria-label in the Gradient's input editor.
222277

223278
### messages.hex `String` *(default: "HEX")*
224279

225-
Allows customization of the hex input in the Gradient's input editor.
280+
Allows customization of the hex input's aria-label in the Gradient's input editor.
226281

227282
## Methods
228283

@@ -314,7 +369,7 @@ Triggers when a new color has been selected.
314369

315370
##### e.value `String`
316371

317-
The value of the ColorPicker.
372+
The value of the FlatColorPicker.
318373

319374
#### Example - subscribe to the "change" event during initialization
320375

0 commit comments

Comments
 (0)