@kdcloudjs/kdesign 1.1.1 → 1.2.0

package/lib/button/button.js

@@ -56,7 +56,7 @@ var ButtonTypes = (0, _type.tuple)('second', 'primary', 'ghost', 'text');
 exports.ButtonTypes = ButtonTypes;
 var ButtonSizes = (0, _type.tuple)('large', 'middle', 'small');
 exports.ButtonSizes = ButtonSizes;
-var ButtonShapes = (0, _type.tuple)('circle', 'round');
+var ButtonShapes = (0, _type.tuple)('circle', 'round', 'none');
 exports.ButtonShapes = ButtonShapes;
 var ButtonIconPlaces = (0, _type.tuple)('left', 'right');
 exports.ButtonIconPlaces = ButtonIconPlaces;
@@ -142,7 +142,7 @@ var InternalButton = function InternalButton(props, ref) {
 
   var isTextBtn = type === 'text'; // 判断按钮是否文本类型。这些类型下有部分样式不适用
 
-  var btnClasses = (0, _classnames.default)(btnPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), _classNames));
+  var btnClasses = (0, _classnames.default)(btnPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(btnPrefixCls, "-")).call(_context, type), type), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(btnPrefixCls, "-size-")).call(_context2, size), size), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context3 = "".concat(btnPrefixCls, "-shape-")).call(_context3, shape), shape && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-no-border"), !bordered), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-background-ghost"), ghost && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-loading"), loading && !isTextBtn), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-block"), block && !shape), (0, _defineProperty2.default)(_classNames, "".concat(btnPrefixCls, "-icon-only"), !children && children !== 0 && icon), _classNames));
   var iconWrapperClassName = (0, _concat.default)(_context4 = "".concat(btnPrefixCls, "-iconWrapper-")).call(_context4, iconPlace === 'left' ? 'left' : 'right');
   var iconNode = icon && !loading ? /*#__PURE__*/_react.default.createElement("span", {
     className: iconWrapperClassName

package/lib/button/group.d.ts

@@ -0,0 +1,21 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { ButtonType } from './button';
+export declare const ButtonGroupTypes: ["basic", "similar"];
+export declare type ButtonGroupType = typeof ButtonGroupTypes[number];
+export interface OverlayType {
+    value?: string;
+    label?: React.ReactNode;
+}
+export interface ButtonGroupProps {
+    style?: CSSProperties;
+    className?: string;
+    children?: ReactNode;
+    onClick?: () => void;
+    overlay?: Array<OverlayType>;
+    icon?: [ReactNode, ReactNode];
+    type?: ButtonGroupType;
+    buttonType?: ButtonType;
+    disabled?: boolean;
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default ButtonGroup;

package/lib/button/group.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonGroupTypes = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _utils = require("../_utils");
+
+var _index = require("../index");
+
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+
+var _reactChildren = require("../_utils/react-children");
+
+var _type = require("../_utils/type");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ButtonGroupTypes = (0, _type.tuple)('basic', 'similar');
+exports.ButtonGroupTypes = ButtonGroupTypes;
+
+var InternalButtonGroup = function InternalButtonGroup(props, ref) {
+  var _context;
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var buttonGoupProps = (0, _utils.getCompProps)('ButtonGroup', userDefaultProps, props);
+  var style = buttonGoupProps.style,
+      className = buttonGoupProps.className,
+      children = buttonGoupProps.children,
+      customPrefixcls = buttonGoupProps.prefixCls,
+      onClick = buttonGoupProps.onClick,
+      onItemClick = buttonGoupProps.onItemClick,
+      overlay = buttonGoupProps.overlay,
+      icon = buttonGoupProps.icon,
+      type = buttonGoupProps.type,
+      buttonType = buttonGoupProps.buttonType,
+      disabled = buttonGoupProps.disabled,
+      onVisibleChange = buttonGoupProps.onVisibleChange;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      optionShow = _useState2[0],
+      setOptionShow = _useState2[1]; // 下拉列表是否展示
+
+
+  var refBtnGroup = _react.default.useRef(null) || ref;
+
+  var triggerRef = _react.default.useRef(null);
+
+  var isBsicType = type === 'basic';
+  var btnGroupPrefixCls = getPrefixCls(prefixCls, 'btn-group', customPrefixcls);
+  var btnGroupClasses = (0, _classnames.default)("".concat(btnGroupPrefixCls), className, (0, _defineProperty2.default)({}, (0, _concat.default)(_context = "".concat(btnGroupPrefixCls, "-")).call(_context, type), type));
+  var renderTriggerButton = (0, _react.useCallback)(function () {
+    var _toArray = (0, _reactChildren.toArray)(icon),
+        _toArray2 = (0, _slicedToArray2.default)(_toArray, 2),
+        _toArray2$ = _toArray2[0],
+        iconUp = _toArray2$ === void 0 ? /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "arrow-up"
+    }) : _toArray2$,
+        _toArray2$2 = _toArray2[1],
+        iconDown = _toArray2$2 === void 0 ? /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "arrow-down"
+    }) : _toArray2$2;
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: style,
+      className: btnGroupClasses,
+      ref: refBtnGroup
+    }, isBsicType && /*#__PURE__*/_react.default.createElement(_index.Button, {
+      type: buttonType,
+      disabled: disabled
+    }, children, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(btnGroupPrefixCls, "-basic-icon")
+    }, optionShow ? iconUp : iconDown)), !isBsicType && /*#__PURE__*/_react.default.createElement(_index.Button, {
+      type: buttonType,
+      disabled: disabled,
+      onClick: onClick
+    }, children), !isBsicType && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(btnGroupPrefixCls, "-trigger"),
+      ref: triggerRef
+    }, optionShow ? /*#__PURE__*/_react.default.createElement(_index.Button, {
+      icon: iconUp,
+      type: buttonType,
+      disabled: disabled
+    }) : /*#__PURE__*/_react.default.createElement(_index.Button, {
+      icon: iconDown,
+      type: buttonType,
+      disabled: disabled
+    })));
+  }, [icon, btnGroupPrefixCls, style, btnGroupClasses, refBtnGroup, isBsicType, buttonType, disabled, children, optionShow, onClick]);
+  var handleItemClick = (0, _react.useCallback)(function (data) {
+    onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(data);
+    setOptionShow(false);
+  }, [onItemClick]);
+  var renderContent = (0, _react.useCallback)(function () {
+    var _context2;
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(btnGroupPrefixCls, "-dropdown")
+    }, (0, _map.default)(_context2 = overlay || []).call(_context2, function (item) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: item.value,
+        className: "".concat(btnGroupPrefixCls, "-dropdown-item"),
+        onClick: function onClick() {
+          return handleItemClick === null || handleItemClick === void 0 ? void 0 : handleItemClick(item);
+        }
+      }, item.label);
+    }));
+  }, [btnGroupPrefixCls, overlay, handleItemClick]);
+
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    setOptionShow(visible);
+    onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
+  };
+
+  var popperProps = (0, _extends2.default)((0, _extends2.default)({
+    placement: 'bottomLeft',
+    trigger: 'click'
+  }, buttonGoupProps), {
+    prefixCls: btnGroupPrefixCls,
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange,
+    getTriggerElement: function getTriggerElement(locatorNode) {
+      return isBsicType ? locatorNode : triggerRef.current;
+    }
+  });
+  return (0, _usePopper.default)(renderTriggerButton(), renderContent(), popperProps);
+};
+
+var ButtonGroup = /*#__PURE__*/_react.default.forwardRef(InternalButtonGroup);
+
+ButtonGroup.displayName = 'ButtonGroup';
+var _default = ButtonGroup;
+exports.default = _default;

package/lib/button/index.d.ts

@@ -1,3 +1,7 @@
-import Button from './button';
+/// <reference types="react" />
+import Dropdown from './group';
+declare const Button: import("react").ForwardRefExoticComponent<import("./button").IButtonProps & import("react").RefAttributes<unknown>> & {
+    Dropdown: typeof Dropdown;
+};
 export { ButtonType, IButtonProps } from './button';
 export default Button;

package/lib/button/index.js

@@ -9,5 +9,9 @@ exports.default = void 0;
 
 var _button = _interopRequireDefault(require("./button"));
 
-var _default = _button.default;
+var _group = _interopRequireDefault(require("./group"));
+
+var Button = _button.default;
+Button.Dropdown = _group.default;
+var _default = Button;
 exports.default = _default;

package/lib/button/style/index.css

@@ -145,24 +145,24 @@
           animation: fadeEffect var(--kd-c-button-motion-duration-fade, var(--kd-g-duration-slowly, 0.4s)) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect var(--kd-c-button-motion-duration-wave, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
 }
 .kd-btn-second {
-  border-color: var(--kd-c-button-second-color-border, var(--kd-g-color-border-strong-3, rgba(217, 217, 217, 0.65)));
-  background-color: var(--kd-c-button-second-color-background, var(--kd-g-color-background-3, rgba(255, 255, 255, 0.65)));
-  color: var(--kd-c-button-second-color-text, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65)));
+  border-color: var(--kd-c-button-second-color-border, #D9D9D9);
+  background-color: var(--kd-c-button-second-color-background, transparent);
+  color: var(--kd-c-button-second-color-text, #212121);
 }
 .kd-btn-second:hover:not(.kd-btn-loading) {
   background-color: var(--kd-c-button-second-color-background-hover, var(--kd-g-color-white, #fff));
-  border-color: var(--kd-c-button-second-color-border-hover, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-button-second-color-text-hover, var(--kd-g-color-text-secondary, #666));
+  border-color: var(--kd-c-button-second-color-border-hover, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-button-second-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-btn-second:active:not(.kd-btn-loading) {
   background-color: var(--kd-c-button-second-color-background-active, var(--kd-g-color-white, #fff));
-  border-color: var(--kd-c-button-second-color-border-active, var(--kd-g-color-border-strong, #d9d9d9));
-  color: var(--kd-c-button-second-color-text-active, var(--kd-g-color-text-secondary, #666));
+  border-color: var(--kd-c-button-second-color-border-active, var(--kd-g-color-theme-7, #375cca));
+  color: var(--kd-c-button-second-color-text-active, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-btn-second:disabled {
-  border-color: var(--kd-c-button-second-color-border-disabled, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65))) !important;
-  background-color: var(--kd-c-button-second-color-background-disabled, var(--kd-g-color-background-3, rgba(255, 255, 255, 0.65))) !important;
-  color: var(--kd-c-button-second-color-text-disabled, var(--kd-g-color-text-secondary-3, rgba(102, 102, 102, 0.65))) !important;
+  border-color: var(--kd-c-button-second-color-border-disabled, #D9D9D9) !important;
+  background-color: var(--kd-c-button-second-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
+  color: var(--kd-c-button-second-color-text-disabled, #B2B2B2) !important;
 }
 .kd-btn-primary {
   border-color: var(--kd-c-button-primary-color-border, var(--kd-g-color-theme, #5582f3));
@@ -182,22 +182,24 @@
   border-color: var(--kd-c-button-primary-color-border-disabled, var(--kd-g-color-theme-3, #e3eeff)) !important;
 }
 .kd-btn-ghost {
-  border-color: var(--kd-c-button-ghost-color-border, var(--kd-g-color-border-strong, #d9d9d9));
+  border-color: var(--kd-c-button-ghost-color-border, var(--kd-g-color-theme-6, #5582f3));
   background-color: var(--kd-c-button-ghost-color-background, transparent);
-  color: var(--kd-c-button-ghost-color-text, var(--kd-g-color-text-secondary, #666));
+  color: var(--kd-c-button-ghost-color-text, #5582F3);
 }
 .kd-btn-ghost:hover:not(.kd-btn-loading) {
-  border-color: var(--kd-c-button-ghost-color-border-hover, var(--kd-g-color-theme, #5582f3));
-  color: var(--kd-c-button-ghost-color-text-hover, var(--kd-g-color-theme, #5582f3));
+  background-color: var(--kd-c-button-ghost-color-background-hover, var(--kd-g-color-theme-5, #87adff));
+  border-color: var(--kd-c-button-ghost-color-border-hover, transparent);
+  color: var(--kd-c-button-ghost-color-text-hover, #ffffff);
 }
 .kd-btn-ghost:active:not(.kd-btn-loading) {
-  border-color: var(--kd-c-button-ghost-color-border-hover, var(--kd-g-color-theme, #5582f3));
-  color: var(--kd-c-button-ghost-color-text-active, var(--kd-g-color-theme-7, #375cca));
+  background-color: var(--kd-c-button-ghost-color-background-active, var(--kd-g-color-theme-7, #375cca));
+  border-color: var(--kd-c-button-ghost-color-border-hover, transparent);
+  color: var(--kd-c-button-ghost-color-text-active, #ffffff);
 }
 .kd-btn-ghost:disabled {
   background-color: var(--kd-c-button-ghost-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
-  border-color: var(--kd-c-button-ghost-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  color: var(--kd-c-button-ghost-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  border-color: var(--kd-c-button-ghost-color-border-disabled, #D9D9D9) !important;
+  color: var(--kd-c-button-ghost-color-text-disabled, #B2B2B2) !important;
 }
 .kd-btn-iconWrapper-left {
   display: -webkit-box;
@@ -236,6 +238,13 @@
   font-size: var(--kd-c-button-font-size-small, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-button-spacing-padding-vertical-small, 3px) var(--kd-c-button-spacing-padding-horizontal-small, 8px);
 }
+.kd-btn-size-small.kd-btn-icon-only {
+  font-size: var(--kd-c-button-icon-font-size-small, 14px);
+  padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+}
+.kd-btn-size-small .kd-btn-group-basic-icon {
+  font-size: var(--kd-c-button-icon-font-size-small, 14px);
+}
 .kd-btn-size-middle {
   height: var(--kd-c-button-sizing-height-middle, 28px);
   min-width: var(--kd-c-button-sizing-min-width-middle, 60px);
@@ -243,6 +252,13 @@
   font-size: var(--kd-c-button-font-size-middle, var(--kd-g-font-size-small, 12px));
   padding: var(--kd-c-button-spacing-padding-vertical-middle, 5px) var(--kd-c-button-spacing-padding-horizontal-middle, 8px);
 }
+.kd-btn-size-middle.kd-btn-icon-only {
+  font-size: var(--kd-c-button-icon-font-size-middle, 16px);
+  padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+}
+.kd-btn-size-middle .kd-btn-group-basic-icon {
+  font-size: var(--kd-c-button-icon-font-size-middle, 16px);
+}
 .kd-btn-size-large {
   height: var(--kd-c-button-sizing-height-large, 32px);
   min-width: var(--kd-c-button-sizing-min-width-large, 80px);
@@ -250,6 +266,13 @@
   font-size: var(--kd-c-button-font-size-large, var(--kd-g-font-size-large, 16px));
   padding: var(--kd-c-button-spacing-padding-vertical-large, 6px) var(--kd-c-button-spacing-padding-horizontal-large, 8px);
 }
+.kd-btn-size-large.kd-btn-icon-only {
+  font-size: var(--kd-c-button-icon-font-size-large, 18px);
+  padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
+}
+.kd-btn-size-large .kd-btn-group-basic-icon {
+  font-size: var(--kd-c-button-icon-font-size-large, 18px);
+}
 .kd-btn-shape-circle {
   border-radius: 50%;
   min-width: auto;
@@ -275,10 +298,13 @@
 .kd-btn-shape-round.kd-btn-size-large {
   border-radius: var(--kd-c-button-sizing-height-large, 32px);
 }
+.kd-btn-shape-none {
+  border-radius: 0;
+}
 .kd-btn-text {
   height: auto;
   width: auto;
-  color: var(--kd-c-button-text-color-text, var(--kd-g-color-theme, #5582f3));
+  color: var(--kd-c-button-text-color-text, var(--kd-g-color-theme-6, #5582f3));
   padding: 0;
   min-width: auto;
 }
@@ -289,7 +315,7 @@
   color: var(--kd-c-button-text-color-text-active, var(--kd-g-color-theme-7, #375cca));
 }
 .kd-btn-text[disabled] {
-  color: var(--kd-c-button-text-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
+  color: var(--kd-c-button-text-color-text-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
 }
 .kd-btn-no-border {
   border: none;
@@ -316,5 +342,75 @@
   width: 100%;
 }
 .kd-btn .btn-space {
-  margin-left: 5px;
+  margin-left: 4px;
+}
+.kd-btn-group {
+  display: inline-block;
+}
+.kd-btn-group-basic .kd-btn {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.kd-btn-group-basic-icon {
+  margin-left: 4px;
+}
+.kd-btn-group-trigger .kd-btn-primary {
+  background: var(--kd-c-button-group-trigger-color-background, #4367c1);
+}
+.kd-btn-group-trigger .kd-btn-primary:hover {
+  background: var(--kd-c-button-group-trigger-color-background-hover, #4c74da);
+  border-color: var(--kd-c-button-group-trigger-color-background-hover, #4c74da);
+}
+.kd-btn-group-trigger .kd-btn-primary:active {
+  background: var(--kd-c-button-group-trigger-color-background-active, #3B5AA9);
+}
+.kd-btn-group-trigger .kd-btn-primary:disabled {
+  background: var(--kd-c-button-group-trigger-color-background-disabled, #95a4c8) !important;
+}
+.kd-btn-group-trigger .kd-btn {
+  margin-left: -1px;
+}
+.kd-btn-group .kd-btn-size-small,
+.kd-btn-group .kd-btn-size-middle,
+.kd-btn-group .kd-btn-size-large {
+  min-width: unset;
+}
+.kd-btn-group .kd-btn:first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.kd-btn-group .kd-btn:last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.kd-btn-group .kd-dropdown-menu {
+  padding: 0;
+}
+.kd-btn-group-dropdown {
+  -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
+  background: var(--kd-c-button-group-dropdown-color-background, #fff);
+  color: #333333;
+  min-width: var(--kd-c-button-group-dropdown-min-width, 80px);
+}
+.kd-btn-group-dropdown-item {
+  height: var(--kd-c-button--group-dropdown-item-height, 30px);
+  line-height: var(--kd-c-button--group-dropdown-item-height, 30px);
+  cursor: pointer;
+  padding: 0 var(--kd-c-button-group-dropdown-item-horizonta, 12px);
+}
+.kd-btn-group-dropdown-item:hover {
+  background: var(--kd-c-button-group-dropdown-item-color-background-hover, #F5F5F5);
+}
+.kd-btn-group-dropdown-item:not(:last-child) {
+  border-bottom: 1px solid var(--kd-c-button-group-dropdown-item-border-color, #E5E5E5);
+}
+.kd-btn-group.topLeft.hidden,
+.kd-btn-group.bottomLeft.hidden,
+.kd-btn-group.topRight.hidden,
+.kd-btn-group.bottomRight.hidden {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }