@progress/kendo-react-buttons 4.14.1 → 5.0.0-dev.202201182040

package/dist/es/ListButton/models/ListButtonProps.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { ButtonsPopupSettings } from './PopupSettings';
 import { SplitButtonClickEvent, SplitButtonItemClickEvent, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, DropDownButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent } from './events';
-import { ButtonLook } from '../../buttonLook';
 import { ButtonItemProps } from '../ButtonItem';
 export interface DropDownButtonProps {
     /**
@@ -64,10 +63,6 @@ export interface DropDownButtonProps {
         item: any;
         itemIndex: number;
     }>;
-    /**
-     * Changes the visual appearance by using alternative styling options ([see example]({% slug overview_dropdownbutton %}#toc-basic-usage)).
-     */
-    look?: ButtonLook;
     /**
      * Sets the `className` of the DropDownButton component.
      */
@@ -80,10 +75,6 @@ export interface DropDownButtonProps {
      * Sets the direction of the component.
      */
     dir?: string;
-    /**
-     * Adds visual weight to the button and makes it primary ([see example]({% slug overview_dropdownbutton %}#toc-basic-usage)).
-     */
-    primary?: boolean;
     /**
      * Fires when the component is focused ([see example]({% slug overview_dropdownbutton %}#toc-events)).
      */
@@ -104,6 +95,74 @@ export interface DropDownButtonProps {
      * Fires when the popup which contains the items is closed ([see example]({% slug overview_dropdownbutton %}#toc-events)).
      */
     onClose?: (event: DropDownButtonCloseEvent) => void;
+    /**
+     * Configures the `size` of the DropDownButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `shape` of the DropDownButton.
+     *
+     * The available options are:
+     * - rectangle
+     * - square
+     * - null&mdash;Does not set a shape `className`.
+     *
+     * @default `rectangle`
+     */
+    shape?: null | 'rectangle' | 'square';
+    /**
+     * Configures the `roundness` of the DropDownButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the DropDownButton.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    /**
+     * Configures the `themeColor` of the DropDownButton.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
 }
 export interface SplitButtonProps {
     /**
@@ -165,10 +224,6 @@ export interface SplitButtonProps {
         item: any;
         itemIndex: number;
     }>;
-    /**
-     * Changes the visual appearance by using alternative styling options ([see example]({% slug overview_splitbutton %}#toc-basic-usage)).
-     */
-    look?: ButtonLook;
     /**
      * Sets the `className` of the SplitButton component.
      */
@@ -205,4 +260,61 @@ export interface SplitButtonProps {
      * Fires when the popup which contains the items is closed ([see example]({% slug overview_splitbutton %}#toc-events)).
      */
     onClose?: (event: SplitButtonCloseEvent) => void;
+    /**
+     * Configures the `size` of the SplitButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the SplitButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the SplitButton.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    /**
+     * Configures the `themeColor` of the SplitButton.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
 }

package/dist/es/main.d.ts

@@ -1,6 +1,5 @@
 import Button, { ButtonProps } from './Button';
 import ButtonGroup, { ButtonGroupProps } from './ButtonGroup';
-import { ButtonLook } from './buttonLook';
 import SplitButton from './ListButton/SplitButton';
 import SplitButtonItem, { SplitButtonItemProps } from './ListButton/SplitButtonItem';
 import DropDownButton from './ListButton/DropDownButton';
@@ -16,7 +15,7 @@ import ToolbarSeparator from './toolbar/tools/ToolbarSeparator';
 import { ToolbarSpacer, ToolbarSpacerProps } from './toolbar/tools/ToolbarSpacer';
 import { Chip, ChipProps, ChipHandle } from './Chip/Chip';
 import { ChipList, ChipListProps, ChipListHandle } from './Chip/ChipList';
-import { ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipListChangeEvent, ChipListDataChangeEvent, ChipLook } from './models/index';
+import { ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipListChangeEvent, ChipListDataChangeEvent } from './models/index';
 import { FloatingActionButton } from './FloatingActionButton/FloatingActionButton';
 import { FloatingActionButtonHandle } from './FloatingActionButton/interfaces/FloatingActionButtonHandle';
 import { FloatingActionButtonProps } from './FloatingActionButton/interfaces/FloatingActionButtonProps';
@@ -28,5 +27,6 @@ import { FloatingActionButtonAlignOffset } from './FloatingActionButton/models/a
 import { FloatingActionButtonPositionMode } from './FloatingActionButton/models/position-mode';
 import { FloatingActionButtonShape } from './FloatingActionButton/models/shape';
 import { FloatingActionButtonSize } from './FloatingActionButton/models/size';
+import { FloatingActionButtonRounded } from './FloatingActionButton/models/rounded';
 import { FloatingActionButtonThemeColor } from './FloatingActionButton/models/theme-color';
-export { Toolbar, ToolbarProps, ToolbarItem, ToolbarItemProps, ToolbarSeparator, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerProps, Button, ButtonProps, ButtonLook, ButtonGroup, ButtonGroupProps, SplitButton, SplitButtonItem, SplitButtonItemProps, DropDownButton, DropDownButtonProps, DropDownButtonItem, DropDownButtonItemProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipLook, ChipList, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonShape, FloatingActionButtonThemeColor };
+export { Toolbar, ToolbarProps, ToolbarItem, ToolbarItemProps, ToolbarSeparator, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerProps, Button, ButtonProps, ButtonGroup, ButtonGroupProps, SplitButton, SplitButtonItem, SplitButtonItemProps, DropDownButton, DropDownButtonProps, DropDownButtonItem, DropDownButtonItemProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonShape, FloatingActionButtonRounded, FloatingActionButtonThemeColor };

package/dist/es/models/index.d.ts

@@ -1,22 +1,6 @@
 /// <reference types="react" />
 import { ChipHandle } from './../Chip/Chip';
 import { ChipListHandle } from './../Chip/ChipList';
-/**
- * Enables the modification of the Chip appearance.
- *
- * The available styling options are:
- * - `solid`(Default)
- * - `outline`
- * - `filled`(The `filled` option will be deprecated. To apply the identical styling, use `solid` instead).
- * - `outlined`(The `outlined` option will be deprecated. To apply the identical styling, use `outline` instead).
- *
- * @example
- * ```ts-no-run
- * <Chip look="solid" text="Chip component"></Chip>
- * ```
- *
- */
-export declare type ChipLook = 'solid' | 'outline' | 'filled' | 'outlined';
 /**
  * Represents the return type of the ChipRemoveEvent.
  */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-buttons',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642516028,
+    publishDate: 1642536693,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/util.js

@@ -7,10 +7,10 @@ var styles = {
     'outline': 'k-outline',
     'clear': 'k-button-clear',
     'primary': 'k-primary',
-    'state-selected': 'k-state-selected',
+    'state-selected': 'k-selected',
     'button-icon': 'k-button-icon',
     'button-icontext': 'k-button-icontext',
-    'state-disabled': 'k-state-disabled',
+    'state-disabled': 'k-disabled',
     'group-start': 'k-group-start',
     'group-end': 'k-group-end',
     'button-group': 'k-button-group',
@@ -18,7 +18,7 @@ var styles = {
     'ltr': 'k-ltr',
     'rtl': 'k-rtl'
 };
-var notDisabled = ':not(.k-state-disabled):not([disabled]):not([disabled="true"])';
+var notDisabled = ':not(.k-disabled):not([disabled]):not([disabled="true"])';
 /**
  * @hidden
  */

package/dist/npm/Button.d.ts

@@ -10,6 +10,74 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
      * @hidden
      */
     children?: React.ReactNode;
+    /**
+     * Configures the `size` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `shape` of the Button.
+     *
+     * The available options are:
+     * - rectangle
+     * - square
+     * - null—Does not set a shape `className`.
+     *
+     * @default `rectangle`
+     */
+    shape?: null | 'rectangle' | 'square';
+    /**
+     * Configures the `roundness` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    /**
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null—Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse';
 }
 /**
  * @hidden
@@ -23,22 +91,28 @@ export default class Button extends React.Component<ButtonProps, ButtonState> {
      */
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        look: PropTypes.Requireable<string>;
-        primary: PropTypes.Requireable<boolean>;
         selected: PropTypes.Requireable<boolean>;
         togglable: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<string>;
         iconClass: PropTypes.Requireable<string>;
         imageUrl: PropTypes.Requireable<string>;
         imageAlt: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        shape: PropTypes.Requireable<string>;
+        rounded: PropTypes.Requireable<string>;
+        fillMode: PropTypes.Requireable<string>;
+        themeColor: PropTypes.Requireable<string>;
     };
     /**
      * @hidden
      */
     static defaultProps: {
-        look: string;
-        primary: boolean;
         togglable: boolean;
+        size: string;
+        shape: string;
+        rounded: string;
+        fillMode: string;
+        themeColor: string;
     };
     /**
      * @hidden
@@ -55,7 +129,7 @@ export default class Button extends React.Component<ButtonProps, ButtonState> {
      * Otherwise, returns `false`.
      */
     readonly selected: boolean;
-    constructor(props: ButtonProps);
+    constructor(props: any);
     /**
      * @hidden
      */

package/dist/npm/Button.js

@@ -38,22 +38,20 @@ var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("./package-metadata");
-var util_1 = require("./util");
-var styles = util_1.default.styles;
 /**
  * @hidden
  */
 function iconElement(_a) {
     var imageUrl = _a.imageUrl, icon = _a.icon, iconClass = _a.iconClass, imageAlt = _a.imageAlt;
     if (imageUrl) {
-        return (React.createElement("img", { role: "presentation", className: 'k-image', alt: imageAlt, src: imageUrl }));
+        return (React.createElement("img", { role: "presentation", className: 'k-button-icon', alt: imageAlt, src: imageUrl }));
     }
     else if (icon) {
-        var iconClasses = kendo_react_common_1.classNames('k-icon', 'k-i-' + icon);
+        var iconClasses = kendo_react_common_1.classNames('k-button-icon k-icon', 'k-i-' + icon);
         return (React.createElement("span", { role: "presentation", className: iconClasses }));
     }
     else if (iconClass) {
-        return (React.createElement("span", { role: "presentation", className: iconClass }));
+        return (React.createElement("span", { role: "presentation", className: kendo_react_common_1.classNames('k-button-icon', iconClass) }));
     }
     return null;
 }
@@ -108,34 +106,28 @@ var Button = /** @class */ (function (_super) {
     Button.prototype.render = function () {
         var _this = this;
         var _a;
-        var _b = this.props, children = _b.children, look = _b.look, primary = _b.primary, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, htmlAttributes = __rest(_b, ["children", "look", "primary", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick"]);
+        var _b = this.props, children = _b.children, togglable = _b.togglable, icon = _b.icon, iconClass = _b.iconClass, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, className = _b.className, onClick = _b.onClick, _c = _b.size, size = _c === void 0 ? Button.defaultProps.size : _c, _d = _b.shape, shape = _d === void 0 ? Button.defaultProps.shape : _d, _e = _b.rounded, rounded = _e === void 0 ? Button.defaultProps.rounded : _e, _f = _b.fillMode, fillMode = _f === void 0 ? Button.defaultProps.fillMode : _f, _g = _b.themeColor, themeColor = _g === void 0 ? Button.defaultProps.themeColor : _g, htmlAttributes = __rest(_b, ["children", "togglable", "icon", "iconClass", "imageUrl", "imageAlt", "className", "onClick", "size", "shape", "rounded", "fillMode", "themeColor"]);
         var hasIcon = (icon !== undefined || iconClass !== undefined || imageUrl !== undefined);
         var hasChildren = children !== undefined;
-        var buttonClasses = kendo_react_common_1.classNames([styles.button], (_a = {},
-            _a[styles["" + look]] = look !== 'default',
-            _a[styles.primary] = primary,
-            _a[styles['state-disabled']] = this.props.disabled,
-            _a[styles['state-selected']] = this.state.selected,
-            _a[styles['button-icon']] = !hasChildren && hasIcon,
-            _a[styles['button-icontext']] = hasChildren && hasIcon,
-            _a), [styles["" + this.props.dir]], className);
-        var buttonProps = {
-            className: buttonClasses,
-            onClick: this.handleClick,
-            // Accessibility properties
-            role: togglable ? 'checkbox' : undefined,
-            'aria-disabled': this.props.disabled || undefined,
-            'aria-checked': togglable ? this.state.selected : undefined
-        };
         var iconEl = iconElement({
             icon: icon,
             iconClass: iconClass,
             imageUrl: imageUrl,
             imageAlt: imageAlt
         });
-        return (React.createElement("button", __assign({}, buttonProps, htmlAttributes, { ref: function (button) { return _this._element = button; } }),
+        return (React.createElement("button", __assign({ ref: function (button) { return _this._element = button; }, role: togglable ? 'checkbox' : undefined, "aria-disabled": this.props.disabled || undefined, "aria-checked": togglable ? this.state.selected : undefined }, htmlAttributes, { onClick: this.handleClick, className: kendo_react_common_1.classNames('k-button', (_a = {},
+                _a["k-button-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a["k-button-" + shape] = shape,
+                _a["k-button-" + fillMode] = fillMode,
+                _a["k-button-" + fillMode + "-" + themeColor] = Boolean(fillMode && themeColor),
+                _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                _a['k-icon-button'] = !hasChildren && hasIcon,
+                _a['k-disabled'] = this.props.disabled,
+                _a['k-selected'] = this.state.selected,
+                _a['k-rtl'] = this.props.dir === 'rtl',
+                _a), this.props.className) }),
             iconEl,
-            children));
+            children && (React.createElement("span", { className: "k-button-text" }, children))));
     };
     Button.prototype.toggleIfApplicable = function () {
         var _this = this;
@@ -150,22 +142,29 @@ var Button = /** @class */ (function (_super) {
      */
     Button.propTypes = {
         children: PropTypes.node,
-        look: PropTypes.oneOf(['default', 'flat', 'outline', 'clear']),
-        primary: PropTypes.bool,
         selected: PropTypes.bool,
         togglable: PropTypes.bool,
         icon: PropTypes.string,
         iconClass: PropTypes.string,
         imageUrl: PropTypes.string,
-        imageAlt: PropTypes.string
+        imageAlt: PropTypes.string,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+        shape: PropTypes.oneOf([null, 'rectangle', 'square']),
+        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+        fillMode: PropTypes.oneOf([null, 'flat', 'link', 'outline', 'solid']),
+        // eslint-disable-next-line max-len
+        themeColor: PropTypes.oneOf([null, 'base', 'dark', 'error', 'info', 'inverse', 'inverse', 'light', 'primary', 'secondary', 'success', 'tertiary', 'warning'])
     };
     /**
      * @hidden
      */
     Button.defaultProps = {
-        look: 'default',
-        primary: false,
-        togglable: false
+        togglable: false,
+        size: 'medium',
+        shape: 'rectangle',
+        rounded: 'medium',
+        fillMode: 'solid',
+        themeColor: 'base'
     };
     return Button;
 }(React.Component));

package/dist/npm/ButtonGroup.js

@@ -47,7 +47,7 @@ var ButtonGroup = /** @class */ (function (_super) {
         var _a;
         var buttons = this.mapButtons(this.props.children);
         var groupClasses = kendo_react_common_1.classNames([styles['button-group']], (_a = {},
-            _a[styles['state-disabled']] = this.props.disabled,
+            _a['k-state-disabled'] = this.props.disabled,
             _a[styles['button-group-stretched']] = !!this.props.width,
             _a), this.props.className);
         var groupProps = {

package/dist/npm/ButtonInterface.d.ts

@@ -1,20 +1,7 @@
-import { ButtonLook } from './buttonLook';
 /**
  * Inherits the native HTML Button. Represents the properties which can be set to a Button.
  */
 export interface ButtonInterface {
-    /**
-     * Changes the visual appearance by using alternative styling options ([more information and examples]({% slug appearance_button %})).
-     *
-     * The available values are:
-     * * [`ButtonLook`]({% slug api_buttons_buttonlook %}) = `flat` | `outline`
-     * * `clear`
-     */
-    look?: ButtonLook | 'clear';
-    /**
-     * Adds visual weight to the Button and makes it primary ([see example]({% slug primary_button %})).
-     */
-    primary?: boolean;
     /**
      * Specifies if the Button is disabled ([see example]({% slug disabled_button %})). Defaults to `false`.
      */

package/dist/npm/Chip/Chip.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent, ChipLook } from './../models/index';
+import { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index';
 /**
  * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
  */
@@ -32,10 +32,6 @@ export interface ChipProps {
      * Sets the `id` value of the Chip.
      */
     value?: any;
-    /**
-     * Sets the `type` of the Chip element - 'warning', 'error', 'success', 'info', by default - 'none'.
-     */
-    type?: string;
     /**
      * The Chip direction 'ltr' as default or 'rtl'.
      */
@@ -60,10 +56,6 @@ export interface ChipProps {
      * Determines if the Chip has custom selection `icon`.
      */
     selectedIcon?: string;
-    /**
-     * Determines if the Chip has `solid` or `outline` appearance. Defaults to `solid`.
-     */
-    look?: ChipLook;
     /**
      * Triggered on Chip removing.
      */
@@ -133,6 +125,56 @@ export interface ChipProps {
      * @hidden
      */
     role?: string;
+    /**
+     * Configures the `size` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the Chip.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline';
+    /**
+     * Configures the `themeColor` of the Chip.
+     *
+     * The available options are:
+     * - base
+     * - info
+     * - success
+     * - warning
+     * - error
+     * - null—Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error';
 }
 /**
  * Represents the target(element and props) of the ChipRemoveEvent.