Skip to content

Commit 81f7836

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 81e767a commit 81f7836

File tree

6 files changed

+243
-28
lines changed

6 files changed

+243
-28
lines changed

‎LICENSE.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
This project has been released under the [Apache License, version 2.0](http://www.apache.org/licenses/LICENSE-2.0.html), the text of which is included below. This license applies ONLY to the source of this repository and does not extend to any other Kendo UI distribution or variant, or any other 3rd party libraries used in a repository. For licensing information about Kendo UI, see the [License Agreements page](https://www.kendoui.com/purchase/license-agreement.aspx) at [KendoUI.com](http://www.kendoui.com).
22

3-
> Copyright © 2014-2015 Telerik
3+
> Copyright © 2014-2018 Progress Software
44
55
> Licensed under the Apache License, Version 2.0 (the "License");
66
you may not use this file except in compliance with the License.

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

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,151 @@ Defines the selection type.
6363
});
6464
</script>
6565

66+
### items `Array`
67+
68+
A JavaScript array that contains the ButtonGroup's items configuration.
69+
70+
#### Example - initialize ButtonGroup with items
71+
72+
<div id="buttonGroup"></div>
73+
<script>
74+
$("#buttonGroup").kendoButtonGroup({
75+
items: [
76+
{ text: "Align Left", icon: "align-left", selected: true},
77+
{ text: "Align Center", icon: "align-center"},
78+
{ text: "Align Right", icon: "align-right"},
79+
]
80+
});
81+
</script>
82+
83+
### items.attributes `Object`
84+
85+
Specifies the HTML attributes of a ButtonGroup item.
86+
87+
> HTML attributes which are JavaScript keywords (e.g. class) must be quoted.
88+
89+
#### Example - adding custom class to a button
90+
91+
<div id="buttonGroup"></div>
92+
93+
<script>
94+
$("#buttonGroup").kendoButtonGroup({
95+
items: [
96+
{ text: "Align Left", icon: "align-left"},
97+
{ text: "Align Center", icon: "align-center", attributes: {class: "red"}},
98+
{ text: "Align Right", icon: "align-right"},
99+
]
100+
});
101+
</script>
102+
103+
<style>
104+
.red { background-color: red; }
105+
</style>
106+
107+
### items.badge `String`
108+
109+
Specifies the badge of a button.
110+
111+
#### Example
112+
113+
<div id="buttonGroup"></div>
114+
115+
<script>
116+
$("#buttonGroup").kendoButtonGroup({
117+
items: [
118+
{ text: "foo", badge: "2" },
119+
{ text: "bar" }
120+
]
121+
});
122+
</script>
123+
124+
### items.enabled `Boolean` *(default: true)*
125+
126+
Specifies if a button is enabled.
127+
128+
#### Example
129+
130+
<div id="buttonGroup"></div>
131+
132+
<script>
133+
$("#buttonGroup").kendoButtonGroup({
134+
items: [
135+
{ text: "foo", enabled: false },
136+
{ text: "bar" }
137+
]
138+
});
139+
</script>
140+
141+
### items.icon `String`
142+
143+
If set, the ButtonGroup will render an icon in the button.
144+
145+
#### Example
146+
147+
<div id="buttonGroup"></div>
148+
149+
<script>
150+
$("#buttonGroup").kendoButtonGroup({
151+
items: [
152+
{ icon: "align-left" },
153+
{ icon: "align-center" },
154+
{ icon: "align-right" }
155+
]
156+
});
157+
</script>
158+
159+
### items.imageUrl `String`
160+
161+
If set, the ButtonGroup will render an image with the specified URL in the button.
162+
163+
#### Example
164+
165+
<div id="buttonGroup"></div>
166+
167+
<script>
168+
var baseUrl = "https://demos.telerik.com/kendo-ui/content/shared/icons";
169+
$("#buttonGroup").kendoButtonGroup({
170+
items: [
171+
{ text: "foo", imageUrl: baseUrl + "/sports/snowboarding.png" },
172+
{ text: "bar", imageUrl: baseUrl + "/sports/snowboarding.png" }
173+
]
174+
});
175+
</script>
176+
177+
### items.selected `Boolean` *(default: false)*
178+
179+
Specifies if a button is initially selected.
180+
181+
#### Example
182+
183+
<div id="buttonGroup"></div>
184+
185+
<script>
186+
$("#buttonGroup").kendoButtonGroup({
187+
items: [
188+
{ text: "foo", selected: true },
189+
{ text: "bar" }
190+
]
191+
});
192+
</script>
193+
194+
### items.text `String`
195+
196+
Specifies the text of the ButtonGroup item.
197+
198+
#### Example
199+
200+
<div id="buttonGroup"></div>
201+
202+
<script>
203+
$("#buttonGroup").kendoButtonGroup({
204+
items: [
205+
{ text: "foo" },
206+
{ text: "bar" }
207+
]
208+
});
209+
</script>
210+
66211
## Methods
67212

68213
### badge

‎src/kendo.toolbar.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,9 @@ var __meta__ = { // jshint ignore:line
111111

112112
hide: function() {
113113
this.element.addClass(STATE_HIDDEN).hide();
114+
if(this.overflow && this.overflowHidden){
115+
this.overflowHidden();
116+
}
114117
this.options.hidden = true;
115118
},
116119

@@ -309,7 +312,8 @@ var __meta__ = { // jshint ignore:line
309312
init: function(options, toolbar) {
310313
this.overflow = true;
311314

312-
Button.fn.init.call(this, options, toolbar);
315+
Button.fn.init.call(this, $.extend({}, options), toolbar);
316+
// Button.fn.init.call(this, options, toolbar);
313317

314318
var element = this.element;
315319

‎styles/web/common/button.less

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,12 @@
6565
}
6666

6767
// Disabled state
68-
&[disabled]
69-
.k-state-disabled &
68+
&[disabled],
69+
.k-state-disabled &,
7070
&.k-state-disabled {
7171
cursor: default;
7272
outline: 0;
73+
box-shadow: none;
7374
}
7475

7576
}

‎styles/web/themes/button.less

Lines changed: 55 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,18 @@
3737
}
3838
}
3939

40+
// Focused state
41+
&:focus,
42+
&.k-state-focused {
43+
border-color: @button-focused-border-color;
44+
.box-shadow(@button-focused-shadow);
45+
}
46+
47+
// Focus active
48+
&:focus:active {
49+
.box-shadow(@button-focused-active-shadow);
50+
}
51+
4052
// Disabled state
4153
&[disabled],
4254
.k-state-disabled &,
@@ -48,19 +60,10 @@
4860
background-color: @disabled-background-color;
4961
.composite-background(@disabled-gradient);
5062
}
51-
52-
// Focused state
53-
&:focus,
54-
&.k-state-focused,
55-
&.k-state-focused:hover,
56-
.k-state-disabled &:focus {
57-
border-color: @button-focused-border-color;
58-
.box-shadow(@button-focused-shadow);
59-
}
60-
61-
// Focus active
62-
&:focus:active:not(.k-state-disabled):not([disabled]) {
63-
.box-shadow(@button-focused-active-shadow);
63+
&[disabled],
64+
&.k-state-disabled,
65+
&.k-state-disabled:active {
66+
box-shadow: none;
6467
}
6568

6669
}
@@ -110,26 +113,20 @@
110113

111114
// Disabled
112115
&[disabled],
113-
&[disabled]:hover,
114-
&[disabled]:focus,
115-
&[disabled]:active,
116-
&[disabled]:hover:active,
117116
.k-state-disabled &,
118117
.k-state-disabled &:hover,
119-
.k-state-disabled &:focus,
120-
.k-state-disabled &:active,
121-
.k-state-disabled &:hover:active,
122118
&.k-state-disabled,
123-
&.k-state-disabled:hover,
124-
&.k-state-disabled:focus,
125-
&.k-state-disabled:active,
126-
&.k-state-disabled:hover:active {
119+
&.k-state-disabled:hover {
127120
color: @primary-disabled-text-color;
128121
border-color: @primary-disabled-border-color;
129122
background-color: @primary-disabled-background-color;
130123
box-shadow: none;
131124
.composite-background(@primary-disabled-gradient);
132125
}
126+
&[disabled],
127+
&.k-state-disabled {
128+
box-shadow: none;
129+
}
133130

134131
}
135132

@@ -157,6 +154,40 @@
157154
.border-radius();
158155
}
159156

157+
.k-button {
158+
159+
// Disabled state
160+
&[disabled],
161+
.k-state-disabled &,
162+
.k-state-disabled &:hover,
163+
&.k-state-disabled,
164+
&.k-state-disabled:hover {
165+
color: @disabled-text-color;
166+
border-color: @disabled-border-color;
167+
background-color: @disabled-background-color;
168+
.composite-background(@disabled-gradient);
169+
}
170+
171+
// Active state
172+
&.k-state-active {
173+
color: @button-active-text-color;
174+
background-color: @button-active-background;
175+
border-color: @button-active-border-color;
176+
box-shadow: none;
177+
.composite-background(@button-active-gradient);
178+
.box-shadow(@button-active-shadow);
179+
.box-shadow(none);
180+
}
181+
182+
183+
// Focused state
184+
&:focus,
185+
&.k-state-focused {
186+
border-color: @button-focused-border-color;
187+
.box-shadow(@button-focused-shadow);
188+
}
189+
}
190+
160191
}
161192
.k-rtl .k-button-group {
162193
.k-item .k-button {

‎tests/toolbar/resizing.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,4 +312,38 @@
312312
equal(toolbar.overflowAnchor.css("visibility"), "hidden");
313313
});
314314

315+
test("hide method hides overflow buttons", 1, function() {
316+
container.width(150);
317+
318+
var toolbar = container.kendoToolBar({
319+
items: [
320+
{ type: "button", id: "foo", text: "foo" },
321+
{ type: "button", id: "bar", text: "bar" },
322+
{ type: "button", id: "baz", text: "baz" },
323+
{ type: "button", id: "qux", text: "qux" }
324+
]
325+
}).data("kendoToolBar");
326+
327+
toolbar.hide("#qux")
328+
329+
ok($("#qux_overflow").hasClass("k-overflow-hidden"), "#qux_overflow is hidden");
330+
});
331+
332+
test("Overflow anchor is NOT shown when buttons are hidden via hide method", 1, function() {
333+
container.width(150);
334+
335+
var toolbar = container.kendoToolBar({
336+
mobile: true,
337+
items: [
338+
{ type: "button", id: "foo", text: "foo" },
339+
{ type: "button", id: "bar", text: "bar" }
340+
]
341+
}).data("kendoToolBar");
342+
343+
toolbar.hide("#foo")
344+
toolbar.hide("#bar")
345+
346+
equal(toolbar.overflowAnchor.css("visibility"), "hidden");
347+
});
348+
315349
})();

0 commit comments

Comments
 (0)