@progress/kendo-themes-html 4.42.1-dev.4 → 4.43.0

package/lib/jsx-runtime.js

@@ -66,6 +66,16 @@ const booleanAttr = new Set([
     'aria'
 ]);
 
+const nullAttr = new Set([
+    'size',
+    'rounded',
+    'fillMode',
+    'themeColor',
+
+    'trackRounded',
+    'thumbRounded'
+]);
+
 const skipAttr = new Set([
     'is',
     'aria',
@@ -144,6 +154,10 @@ function attrToProps( attributes ) {
             attrName = attrMap[attrName];
         }
 
+        // Set props as is
+        props[ attrName ] = attrValue;
+
+        // Ensure boolean value
         if (booleanAttr.has(attrName) && typeof attrValue === 'string') {
             switch (attrValue) {
                 case '':
@@ -154,8 +168,11 @@ function attrToProps( attributes ) {
                     props[ attrName ] = false;
                     break;
             }
-        } else {
-            props[ attrName ] = attrValue;
+        }
+
+        // Ensure null value
+        if (nullAttr.has(attrName) && attrValue === 'null') {
+            props[ attrName ] = null;
         }
     });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "4.42.1-dev.4",
+  "version": "4.43.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -42,5 +42,5 @@
     "@rollup/plugin-node-resolve": "^13.0.6",
     "rollup": "^2.59.0"
   },
-  "gitHead": "e858f6d0ffd07117aa86b4c83d28e9999b2884f9"
+  "gitHead": "8841c18b8c8f2b159bcd5ed316ce283c5de2fd7c"
 }

package/src/autocomplete/autocomplete.jsx

@@ -138,10 +138,10 @@ AutocompleteStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/avatar/README.md

@@ -0,0 +1,21 @@
+```html
+<!-- default rendering -->
+<div class="k-avatar k-avatar-md k-rounded-circle k-avatar-solid k-avatar-solid-primary">
+    <span class="k-avatar-image">
+        <img src="../../assets/avatar.jpg" class="">
+    </span>
+</div>
+
+<!-- canonical rendering -->
+<div class="
+    k-avatar
+    k-avatar-{size}
+    k-rounded-{rounded}
+    k-avatar-{fillMode}
+    k-avatar-{fillMode}-{themeColor}
+">
+    <span class="k-avatar-{type}">
+        {content}
+    </span>
+</div>
+```

package/src/avatar/avatar.jsx

@@ -0,0 +1,116 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component';
+
+class Avatar extends Component {
+    render() {
+        return <AvatarStatic {...this.props} />;
+    }
+}
+
+function AvatarStatic(props) {
+    const {
+        className: ownClassName,
+
+        children,
+
+        type,
+
+        size,
+        shape,
+        rounded,
+        bordered,
+
+        fillMode,
+        themeColor,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let avatarClasses = [
+        ownClassName,
+        'k-avatar',
+        styles.sizeClass( size, 'k-avatar' ),
+        styles.roundedClass( rounded ),
+        styles.fillModeClass( fillMode, 'k-avatar' ),
+        styles.shapeClass( shape, 'k-avatar' ),
+        styles.themeColorClass( fillMode, themeColor, 'k-avatar' ),
+        styles.borderedClass( bordered, 'k-avatar' ),
+    ];
+
+    let legacyClasses = [
+        ownClassName,
+        'k-avatar',
+        `k-avatar-${themeColor}`,
+        {
+            'k-avatar-circle': rounded === 'circle',
+            'k-avatar-rounded': rounded !== 'circle' && rounded !== null
+        },
+        styles.sizeClass( size, 'k-avatar' ),
+        styles.fillModeClass( fillMode, 'k-avatar' ),
+        styles.borderedClass( bordered, 'k-avatar' ),
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    if (legacy) {
+        return (
+            <span className={legacyClasses} {...ariaAttr} {...htmlAttributes}>
+                <span className={`k-avatar-${type}`}>
+                    {children}
+                </span>
+            </span>
+        );
+    }
+
+    return (
+        <span className={avatarClasses} {...ariaAttr} {...htmlAttributes}>
+            <span className={`k-avatar-${type}`}>
+                {children}
+            </span>
+        </span>
+    );
+}
+
+AvatarStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    className: '',
+    children: [],
+
+    type: '',
+
+    size: 'medium',
+    shape: 'square',
+    rounded: 'circle',
+    bordered: false,
+
+    fillMode: 'solid',
+    themeColor: 'primary'
+};
+
+AvatarStatic.propTypes = {
+    className: typeof '',
+    children: typeof [],
+
+    type: typeof '',
+
+    size: typeof [ null, 'small', 'medium', 'large', 'circle' ],
+    shape: typeof [ null, 'square', 'circle', 'rounded' ],
+    rounded: typeof [ null, '0', 'small', 'medium', 'large' ],
+    bordered: typeof false,
+
+    fillMode: typeof [ null, 'solid', 'outline' ],
+    themeColor: typeof [ null, 'primary' ],
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Avatar, AvatarStatic };

package/src/avatar/index.js

@@ -0,0 +1 @@
+export * from './avatar.jsx';

package/src/button/button.jsx

@@ -124,12 +124,12 @@ ButtonStatic.propTypes = {
 
     type: typeof [ 'button', 'submit', 'reset' ],
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', '0', 'small', 'medium', 'large', 'pill', 'circle' ],
-    shape: typeof [ 'none', 'rectangle', 'square' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, '0', 'small', 'medium', 'large', 'pill', 'circle' ],
+    shape: typeof [ null, 'rectangle', 'square' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline', 'link' ],
-    themeColor: typeof [ 'none', 'surface', 'base', 'primary' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline', 'link' ],
+    themeColor: typeof [ null, 'surface', 'base', 'primary' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/checkbox/checkbox.jsx

@@ -103,8 +103,8 @@ CheckboxStatic.propTypes = {
     checked: typeof false,
     indeterminate: typeof false,
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/colorpicker/color-preview.jsx

@@ -29,6 +29,10 @@ function ColorPreviewStatic(props) {
         }
     ];
 
+    let styles = {
+        'background-color': color
+    };
+
     let ariaAttr = aria
         ? {}
         : {};
@@ -64,7 +68,7 @@ function ColorPreviewStatic(props) {
     return (
         <span className={colorPreviewClasses} {...ariaAttr} {...htmlAttributes}>
             {iconName && <IconStatic name={iconName} className="k-color-preview-icon" />}
-            <span className="k-color-preview-mask"></span>
+            <span className="k-color-preview-mask" style={styles}></span>
         </span>
     );
 }

package/src/colorpicker/colorpicker.jsx

@@ -52,7 +52,8 @@ function ColorpickerStatic(props) {
 
     let colorpickerClasses = [
         ownClassName,
-        'k-colorpicker'
+        'k-colorpicker',
+        'k-icon-picker'
     ];
 
     let ariaAttr = aria
@@ -92,9 +93,9 @@ function ColorpickerStatic(props) {
     return (
         <PickerStatic className={colorpickerClasses} {...ariaAttr} {...htmlAttributes}>
             {prefix}
-            <InputInnerSpanStatic showValue={false} valueIcon={<ColorPreviewStatic className="k-icon k-value-icon" color={value} iconName={iconName} />} />
+            <InputInnerSpanStatic showValue={false} valueIcon={<ColorPreviewStatic className="k-value-icon" color={value} iconName={iconName} />} />
             {suffix}
-            <ButtonStatic className="k-input-button" icon="arrow-s" rounded="none" size={size} fillMode={fillMode}></ButtonStatic>
+            <ButtonStatic className="k-input-button" icon="arrow-s" shape={null} rounded={null} size={size} fillMode={fillMode}></ButtonStatic>
         </PickerStatic>
     );
 }
@@ -131,10 +132,10 @@ ColorpickerStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/combobox/combobox.jsx

@@ -110,7 +110,7 @@ function ComboboxStatic(props) {
             <InputValidationIconStatic {...props} />
             <InputLoadingIconStatic {...props} />
             <InputClearValueStatic {...props} />
-            <ButtonStatic className="k-input-button" icon="arrow-s" rounded="none" size={size} fillMode={fillMode}></ButtonStatic>
+            <ButtonStatic className="k-input-button" icon="arrow-s" shape={null} rounded={null} size={size} fillMode={fillMode}></ButtonStatic>
         </InputStatic>
     );
 }
@@ -149,10 +149,10 @@ ComboboxStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/dateinput/dateinput.jsx

@@ -111,7 +111,7 @@ function DateInputStatic(props) {
             <InputValidationIconStatic {...props} />
             <InputLoadingIconStatic {...props} />
             <InputClearValueStatic {...props} />
-            {showSpinButton === true && <SpinButtonStatic className="k-input-spinner" />}
+            {showSpinButton === true && <SpinButtonStatic className="k-input-spinner" size={size} fillMode={fillMode} />}
         </InputStatic>
     );
 }
@@ -147,10 +147,10 @@ DateInputStatic.propTypes = {
     showLoadingIcon: typeof true,
     showClearButton: typeof true,
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/datepicker/datepicker.jsx

@@ -110,7 +110,7 @@ function DatePickerStatic(props) {
             <InputValidationIconStatic {...props} />
             <InputLoadingIconStatic {...props} />
             <InputClearValueStatic {...props} />
-            <ButtonStatic className="k-input-button" icon="calendar" rounded="none" size={size} fillMode={fillMode}></ButtonStatic>
+            <ButtonStatic className="k-input-button" icon="calendar" shape={null} rounded={null} size={size} fillMode={fillMode}></ButtonStatic>
         </InputStatic>
     );
 }
@@ -149,10 +149,10 @@ DatePickerStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/datetimepicker/datetimepicker.jsx

@@ -110,7 +110,7 @@ function DateTimePickerStatic(props) {
             <InputValidationIconStatic {...props} />
             <InputLoadingIconStatic {...props} />
             <InputClearValueStatic {...props} />
-            <ButtonStatic className="k-input-button" icon="calendar" rounded="none" size={size} fillMode={fillMode}></ButtonStatic>
+            <ButtonStatic className="k-input-button" icon="calendar" shape={null} rounded={null} size={size} fillMode={fillMode}></ButtonStatic>
         </InputStatic>
     );
 }
@@ -149,10 +149,10 @@ DateTimePickerStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/dropdownlist/dropdownlist.jsx

@@ -71,7 +71,10 @@ function DropdownListStatic(props) {
 
     let dropdownListClasses = [
         ownClassName,
-        'k-dropdown'
+        'k-dropdown',
+        {
+            'k-icon-picker': showValue !== true && (valueIcon !== null || valueIconName !== '')
+        }
     ];
 
     let ariaAttr = aria
@@ -119,7 +122,7 @@ function DropdownListStatic(props) {
             <InputValidationIconStatic {...props} />
             <InputLoadingIconStatic {...props} />
             <InputClearValueStatic {...props} />
-            <ButtonStatic className="k-input-button" icon={arrowIconName} rounded="none" size={size} fillMode={fillMode}></ButtonStatic>
+            <ButtonStatic className="k-input-button" icon={arrowIconName} shape={null} rounded={null} size={size} fillMode={fillMode}></ButtonStatic>
         </PickerStatic>
     );
 }
@@ -168,10 +171,10 @@ DropdownListStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/index.js

@@ -26,6 +26,7 @@ export * from './input/index';
 // export * from './picker/index';
 // export * from './popup/index';
 // export * from './list/index';
+export * from './avatar/index';
 
 // Native forms
 export * from './button/index';

package/src/input/input.jsx

@@ -126,10 +126,10 @@ InputStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/input/picker.jsx

@@ -124,10 +124,10 @@ PickerStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/maskedtextbox/maskedtextbox.jsx

@@ -132,10 +132,10 @@ MaskedTextboxStatic.propTypes = {
     showLoadingIcon: typeof true,
     showClearButton: typeof true,
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/numerictextbox/numerictextbox.jsx

@@ -112,7 +112,7 @@ function NumericTextboxStatic(props) {
             <InputValidationIconStatic {...props} />
             <InputLoadingIconStatic {...props} />
             <InputClearValueStatic {...props} />
-            {showSpinButton === true && <SpinButtonStatic className="k-input-spinner" />}
+            {showSpinButton === true && <SpinButtonStatic className="k-input-spinner" size={size} fillMode={fillMode} />}
         </InputStatic>
     );
 }
@@ -148,10 +148,10 @@ NumericTextboxStatic.propTypes = {
     showLoadingIcon: typeof true,
     showClearButton: typeof true,
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/radio/radio.jsx

@@ -86,7 +86,7 @@ RadioStatic.propTypes = {
 
     checked: typeof false,
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/searchbox/searchbox.jsx

@@ -149,10 +149,10 @@ SearchboxInner.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/spinbutton/spinbutton.jsx

@@ -13,6 +13,9 @@ function SpinButtonStatic(props) {
     const {
         className: ownClassName,
 
+        size,
+        fillMode,
+
         aria,
         legacy,
 
@@ -43,8 +46,8 @@ function SpinButtonStatic(props) {
 
     return (
         <span className={spinButtonClasses} {...ariaAttr} {...htmlAttributes}>
-            <ButtonStatic size="none" rounded="none" className="k-spinner-increase" icon="arrow-n" />
-            <ButtonStatic size="none" rounded="none" className="k-spinner-decrease" icon="arrow-s" />
+            <ButtonStatic className="k-spinner-increase" icon="arrow-n" shape={null} rounded={null} size={size} fillMode={fillMode} />
+            <ButtonStatic className="k-spinner-decrease" icon="arrow-s" shape={null} rounded={null} size={size} fillMode={fillMode} />
         </span>
     );
 }
@@ -56,6 +59,9 @@ SpinButtonStatic.defaultProps = {
 SpinButtonStatic.propTypes = {
     className: typeof '',
 
+    size: typeof '',
+    fillMode: typeof '',
+
     aria: typeof false,
     legacy: typeof false,
 

package/src/switch/switch.jsx

@@ -114,9 +114,9 @@ SwitchStatic.propTypes = {
     onLabel: typeof '',
     offLabel: typeof '',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    trackRounded: typeof [ 'none', '0', 'small', 'medium', 'large', 'pill', 'circle' ],
-    thumbRounded: typeof [ 'none', '0', 'small', 'medium', 'large', 'pill', 'circle' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    trackRounded: typeof [ null, '0', 'small', 'medium', 'large', 'pill', 'circle' ],
+    thumbRounded: typeof [ null, '0', 'small', 'medium', 'large', 'pill', 'circle' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/textarea/textarea.jsx

@@ -116,10 +116,10 @@ TextareaStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/textbox/textbox.jsx

@@ -139,10 +139,10 @@ TextboxStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/src/timepicker/timepicker.jsx

@@ -110,7 +110,7 @@ function TimePickerStatic(props) {
             <InputValidationIconStatic {...props} />
             <InputLoadingIconStatic {...props} />
             <InputClearValueStatic {...props} />
-            <ButtonStatic className="k-input-button" icon="clock" rounded="none" size={size} fillMode={fillMode}></ButtonStatic>
+            <ButtonStatic className="k-input-button" icon="clock" shape={null} rounded={null} size={size} fillMode={fillMode}></ButtonStatic>
         </InputStatic>
     );
 }
@@ -149,10 +149,10 @@ TimePickerStatic.propTypes = {
     prefix: typeof '#fragment',
     suffix: typeof '#fragment',
 
-    size: typeof [ 'none', 'small', 'medium', 'large' ],
-    rounded: typeof [ 'none', 'small', 'medium', 'large', 'pill' ],
+    size: typeof [ null, 'small', 'medium', 'large' ],
+    rounded: typeof [ null, 'small', 'medium', 'large', 'pill' ],
 
-    fillMode: typeof [ 'none', 'solid', 'flat', 'outline' ],
+    fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
     hover: typeof false,
     focus: typeof false,

package/utils/styles.js

@@ -25,7 +25,7 @@ function lookup( map, key ) {
 }
 
 function sizeClass( size, prefix ) {
-    if ( size === 'none' ) {
+    if ( size === null ) {
         return '';
     }
 
@@ -33,7 +33,7 @@ function sizeClass( size, prefix ) {
 }
 
 function roundedClass( rounded ) {
-    if ( rounded === 'none' ) {
+    if ( rounded === null ) {
         return '';
     }
 
@@ -41,7 +41,7 @@ function roundedClass( rounded ) {
 }
 
 function shapeClass( shape, prefix ) {
-    if ( shape === 'none' ) {
+    if ( shape === null ) {
         return '';
     }
 
@@ -49,7 +49,7 @@ function shapeClass( shape, prefix ) {
 }
 
 function fillModeClass( fill, prefix ) {
-    if ( fill === 'none' ) {
+    if ( fill === null) {
         return '';
     }
 
@@ -57,13 +57,21 @@ function fillModeClass( fill, prefix ) {
 }
 
 function themeColorClass( fill, color, prefix ) {
-    if ( fill === 'none' || color === 'none' ) {
+    if ( fill === null || color === null) {
         return '';
     }
 
     return `${prefix}-${fill}-${color}`;
 }
 
+function borderedClass( bordered, prefix ) {
+    if ( !bordered ) {
+        return '';
+    }
+
+    return `${prefix}-bordered`;
+}
+
 function classNames( ...args ) {
 
     /* eslint-disable arrow-body-style, no-nested-ternary */
@@ -122,6 +130,7 @@ export {
     shapeClass,
     fillModeClass,
     themeColorClass,
+    borderedClass,
 
     classNames,
     cssStyle,