@wireapp/react-ui-kit 9.64.1 → 9.65.0

package/lib/Inputs/ButtonGroup/ButtonGroup.d.ts

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonVariant } from '../Button';
 interface ButtonGroupProps {
     children: ReactNode;
 }
@@ -6,6 +7,7 @@ declare const ButtonGroup: {
     ({ children }: ButtonGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
     Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
         icon?: ReactNode;
+        variant?: ButtonVariant;
     } & import("react").RefAttributes<HTMLButtonElement>>;
 };
 export { ButtonGroup };

package/lib/Inputs/ButtonGroup/ButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,oBAAoB,EAAc,SAAS,EAAC,MAAM,OAAO,CAAC;AA6DlE,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,QAAA,MAAM,WAAW;mBAAgB,gBAAgB;;eANxC,SAAS;;CAUjB,CAAC;AA2BF,OAAO,EAAC,WAAW,EAAC,CAAC"}
+{"version":3,"file":"ButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/Inputs/ButtonGroup/ButtonGroup.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,oBAAoB,EAAc,SAAS,EAAC,MAAM,OAAO,CAAC;AAKlE,OAAO,EAAsB,aAAa,EAAC,MAAM,WAAW,CAAC;AAkC7D,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB;AACD,QAAA,MAAM,WAAW;mBAAgB,gBAAgB;;eAPxC,SAAS;kBACN,aAAa;;CAUxB,CAAC;AA2BF,OAAO,EAAC,WAAW,EAAC,CAAC"}

package/lib/Inputs/ButtonGroup/ButtonGroup.js

@@ -21,24 +21,19 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
  *
  */
 const react_1 = require("react");
-const Identity_1 = require("../../Identity");
+const Button_1 = require("../Button");
+const Button_styles_1 = require("../Button/Button.styles");
 const buttonGroupStyle = () => ({
     display: 'flex',
     alignItems: 'center',
 });
-const buttonStyle = (_, { disabled = false }) => ({
+const groupedButtonStyle = (theme, props) => ({
     height: '32px',
     borderRadius: '12px',
     padding: '0 12px',
-    background: Identity_1.COLOR_V2.WHITE,
-    border: `1px solid ${Identity_1.COLOR_V2.GRAY_40}`,
     cursor: 'pointer',
     display: 'flex',
     alignItems: 'center',
-    backgroundColor: disabled ? Identity_1.COLOR_V2.GRAY_20 : Identity_1.COLOR_V2.WHITE,
-    svg: {
-        fill: disabled ? Identity_1.COLOR_V2.GRAY_70 : Identity_1.COLOR_V2.BLACK,
-    },
     '&:not(:last-child)': {
         borderTopRightRadius: '0',
         borderBottomRightRadius: '0',
@@ -50,29 +45,12 @@ const buttonStyle = (_, { disabled = false }) => ({
     '&:first-child:last-child': {
         borderRadius: '0',
     },
-    ...(!disabled && {
-        '&:hover, &:focus': {
-            backgroundColor: Identity_1.COLOR_V2.GRAY_20,
-        },
-        '&:hover': {
-            borderColor: Identity_1.COLOR_V2.GRAY_50,
-        },
-        '&:focus': {
-            borderColor: Identity_1.COLOR_V2.GRAY_60,
-        },
-        '&:active': {
-            backgroundColor: Identity_1.COLOR_V2.BLUE_LIGHT_50,
-            borderColor: Identity_1.COLOR_V2.BLUE_LIGHT_300,
-            svg: {
-                fill: Identity_1.COLOR_V2.BLUE,
-            },
-        },
-    }),
+    ...(0, Button_styles_1.buttonStyle)(theme, props),
 });
 const ButtonGroup = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { css: (theme) => buttonGroupStyle(theme), role: "group", "aria-label": "Button Group", children: children }));
 exports.ButtonGroup = ButtonGroup;
-const Button = (0, react_1.forwardRef)(({ children, icon, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)("button", { ref: ref, css: (theme) => buttonStyle(theme, props), ...props, children: [icon, children && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => ({
+const GroupedButton = (0, react_1.forwardRef)(({ children, icon, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { ref: ref, css: (theme) => groupedButtonStyle(theme, props), ...props, children: [icon, children && ((0, jsx_runtime_1.jsx)("span", { css: (theme) => ({
                     marginLeft: !!icon && '6px',
                     fontSize: theme.fontSizes.small,
                     fontWeight: 'bold',
@@ -80,5 +58,5 @@ const Button = (0, react_1.forwardRef)(({ children, icon, ...props }, ref) => {
                     letterSpacing: '0.25px',
                 }), children: children }))] }));
 });
-Button.displayName = 'Button';
-ButtonGroup.Button = Button;
+GroupedButton.displayName = 'Button';
+ButtonGroup.Button = GroupedButton;

package/package.json

@@ -79,6 +79,6 @@
     "test:watch": "jest --watch",
     "test:update": "jest --updateSnapshot"
   },
-  "version": "9.64.1",
-  "gitHead": "0d407542b36f5092749216ded20daf5a7ad18acd"
+  "version": "9.65.0",
+  "gitHead": "be4415963d1112809d024bf95d2ce15de9fd6c00"
 }