Merge pull request #712 from glints-dev/feature/next-popover

feat: next popover

Author: marthayaputra

package.json

@@ -6,7 +6,7 @@
   "module": "./es/index.js",
   "sideEffects": false,
   "engines": {
-    "node": "^14 || ^16"
+    "node": ">=14"
   },
   "scripts": {
     "build": "npm run build:icon && npm run build:next:icon && npm run build:lib && npm run build:es && npm run build:ts",
@@ -129,6 +129,7 @@
     "classnames": "^2.2.6",
     "downshift": "^6.1.3",
     "moment": "^2.24.0",
+    "polaris-glints": "^11.0.0",
     "react-id-generator": "^3.0.1",
     "styled-system": "^5.1.5"
   },
@@ -144,7 +145,8 @@
       ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js"
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!lodash-es)"
+      "node_modules/(?!lodash-es)",
+      "node_modules/(?!polaris-glints)"
     ],
     "modulePathIgnorePatterns": [
       "test/e2e/"
@@ -157,6 +159,9 @@
     "@glints/poppins": "^1.0.2"
   },
   "resolutions": {
-    "immer": "^9.0.6"
+    "immer": "^9.0.6",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "nanoid": "3.3.4"
   }
 }

src/@next/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
-import { ButtonGroup, ButtonGroupProps } from './ButtonGroupStyle';
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { PrimaryButton } from '../Button/PrimaryButtonStyle';
 import { Button } from '../Button/Button';
 import { OutlineButton } from '../Button/OutlineButtonStyle';
+import { ButtonGroup, ButtonGroupProps } from './ButtonGroup';
 
 (ButtonGroup as React.FunctionComponent<ButtonGroupProps>).displayName =
   'ButtonGroup';

src/@next/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyledButtonGroup } from './ButtonGroupStyle';
+
+export interface ButtonGroupProps
+  extends React.HtmlHTMLAttributes<HTMLDivElement> {
+  segmented?: boolean;
+  fullWidth?: boolean;
+  /** Set this true when buttons are wrapped by another element (e.g as an activator for Popover) */
+  isButtonWrapped?: boolean;
+}
+
+export const ButtonGroup = ({
+  segmented,
+  fullWidth,
+  isButtonWrapped,
+  ...props
+}: ButtonGroupProps) => {
+  return (
+    <StyledButtonGroup
+      data-segmented={segmented}
+      data-full-width={fullWidth}
+      data-button-wrapped={isButtonWrapped}
+      {...props}
+    />
+  );
+};

src/@next/ButtonGroup/ButtonGroupStyle.ts

@@ -1,49 +1,58 @@
-import React from 'react';
 import styled from 'styled-components';
 import { borderRadius4 } from '../utilities/borderRadius';
 import { Neutral } from '../utilities/colors';
 import { space8 } from '../utilities/spacing';
 
-export interface ButtonGroupProps
-  extends React.HtmlHTMLAttributes<HTMLDivElement> {
-  segmented?: boolean;
-  fullWidth?: boolean;
-}
-
-export const ButtonGroup = styled.div`
+export const StyledButtonGroup = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0px;
-  ${({ segmented }: ButtonGroupProps) =>
-    segmented
-      ? `> button {
-            border-radius: 0;
-            border-right: 0;
-            
-            :nth-child(1) {
-             border-radius: ${borderRadius4} 0px 0px ${borderRadius4};  
-            }
-
-            :nth-last-child(1) {
-             border-radius: 0px ${borderRadius4} ${borderRadius4} 0px;
-             border-right: 1px solid ${Neutral.B68}
-            }
-           }
-           > button:focus {
-            z-index: 1;
-            border: 1px solid ${Neutral.B68}
-           }
-
-           button[data-active='true'] {
-            border: 1px solid ${Neutral.B40}
-           }
-           `
-      : `gap: ${space8};`}
-  ${({ fullWidth }: ButtonGroupProps) =>
-    fullWidth
-      ? `> button {
-             flex: 1;
-             }`
-      : ``}
+  gap: ${space8};
+
+  &[data-segmented='true'] {
+    gap: 0;
+  }
+
+  &[data-segmented='true'] button[data-active='true'] {
+    border: 1px solid ${Neutral.B40};
+  }
+
+  &[data-segmented='true'] button {
+    border-radius: 0;
+    border-right: 0;
+
+    :nth-child(1) {
+      border-radius: ${borderRadius4} 0px 0px ${borderRadius4};
+    }
+
+    :nth-last-child(1) {
+      border-radius: 0px ${borderRadius4} ${borderRadius4} 0px;
+      border-right: 1px solid ${Neutral.B68};
+    }
+  }
+
+  &[data-segmented='true'] button:focus {
+    z-index: 1;
+    border: 1px solid ${Neutral.B68};
+  }
+
+  &[data-full-width='true'] button {
+    flex: 1;
+  }
+
+  &[data-segmented='true']&[data-button-wrapped='true'] > * {
+    button {
+      border-radius: 0;
+      border-right: 0;
+    }
+    :nth-child(1) button {
+      border-radius: ${borderRadius4} 0px 0px ${borderRadius4};
+    }
+
+    :nth-last-child(1) button {
+      border-radius: 0px ${borderRadius4} ${borderRadius4} 0px;
+      border-right: 1px solid ${Neutral.B68};
+    }
+  }
 `;

src/@next/ButtonGroup/index.ts

@@ -1,3 +1 @@
-import { ButtonGroup } from './ButtonGroupStyle';
-
-export { ButtonGroup };
+export { ButtonGroup } from './ButtonGroup';