feat(popover-container): align component with fusion designs

src/components/button/__next__/button.style.ts

@@ -11,6 +11,17 @@ import {
   VariantType,
 } from "./button.config";
 
+// styling overrides to ensure buttons within menu items
+// fit the menu item style requirements
+const menuItemOverrides = css`
+  [data-component="menu-item"] & {
+    background-color: transparent;
+    padding: 6px var(--global-space-none);
+    border-radius: var(--global-radius-none);
+    border: none;
+  }
+`;
+
 const getCSSForGradientStyle = ({
   allowMotion = true,
   disabled,
@@ -239,8 +250,6 @@ export const StyledButton = styled.button<
     $variantType: VariantType;
   }
 >`
-  ${space}
-
   align-items: center;
   box-sizing: border-box;
   display: inline-flex;
@@ -357,6 +366,10 @@ export const StyledButton = styled.button<
       z-index: 1;
     }
   }
+
+  ${menuItemOverrides}
+
+  ${space}
 `;
 
 export default StyledButton;

src/components/password/password.component.tsx

@@ -61,7 +61,6 @@ export const Password = ({
               }
               aria-controls={internalInputId.current}
               onClick={() => setPasswordShown(!passwordShown)}
-              pr={1}
               variantType="subtle"
               iconType={visibleInput ? "hide" : "view"}
               iconPosition="before"

src/components/popover-container/components.test-pw.tsx

@@ -15,7 +15,6 @@ export const PopoverContainerOverlappingAdaptiveSidebar = () => (
       <PopoverContainer
         title="notifications"
         containerAriaLabel="notifications"
-        openButtonAriaLabel="open"
         open
       >
         Notifications content
@@ -34,7 +33,6 @@ export const PopoverContainerWithSelect = () => {
     <Box height="100">
       <PopoverContainer
         containerAriaLabel="popover-container"
-        openButtonAriaLabel="open"
         title="select example"
       >
         <Select

src/components/popover-container/popover-container-interaction.stories.tsx

@@ -7,7 +7,7 @@ import DefaultDecorator from "../../../.storybook/utils/default-decorator";
 
 import PopoverContainer from "./popover-container.component";
 import Box from "../box";
-import Button from "../button";
+import Button from "../button/__next__";
 import Link from "../link";
 import Divider from "../divider";
 import useMediaQuery from "../../hooks/useMediaQuery";
@@ -52,7 +52,7 @@ export const KeyboardInteraction: Story = {
         <PopoverContainer
           title="Border Radius"
           position="center"
-          borderRadius="borderRadius000 borderRadius000 borderRadius400 borderRadius400"
+          roundness="curved"
           open
         >
           Content
@@ -152,7 +152,7 @@ const CreatePopoverInMenu = () => {
             position={isSmall || !isMid ? "center" : "right"}
             offset={0}
             p={0}
-            borderRadius="borderRadius000 borderRadius000 borderRadius200 borderRadius200"
+            roundness="curved"
             onOpen={() => setOpen(true)}
             onClose={() => setOpen(false)}
             open={open}

src/components/popover-container/popover-container-test.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import Button from "../button";
+import Button from "../button/__next__";
 import Box from "../box";
 import PopoverContainer, {
   PopoverContainerProps,
@@ -10,7 +10,6 @@ import { Menu, MenuItem, MenuSegmentTitle } from "../menu";
 import Heading from "../heading";
 import Typography from "../typography";
 import Search from "../search";
-import IconButton from "../icon-button";
 import Icon from "../icon";
 import RadioButton, { RadioButtonGroup } from "../radio-button";
 
@@ -24,10 +23,8 @@ export default {
   parameters: {
     info: { disable: true },
     chromatic: {
-      disableSnapshot: false,
-      delay: 2000,
+      disableSnapshot: true,
     },
-    themeProvider: { chromatic: { theme: "sage" } },
   },
 };
 
@@ -47,7 +44,7 @@ Default.story = {
 };
 
 export const WithSelect = () => {
-  const [open, setOpen] = useState(defaultOpenState);
+  const [open, setOpen] = useState(false);
   return (
     <div style={{ height: 100 }}>
       <PopoverContainer
@@ -68,12 +65,7 @@ export const WithSelect = () => {
   );
 };
 
-WithSelect.story = {
-  name: "with select",
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-};
+WithSelect.storyName = "with select";
 
 export const WithMultiSelect = () => {
   const [value, setValue] = useState<string[]>([]);
@@ -98,14 +90,7 @@ export const WithMultiSelect = () => {
   );
 };
 
-WithMultiSelect.story = {
-  name: "with multiSelect",
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};
+WithMultiSelect.storyName = "with multiSelect";
 
 export const InAScrollableBlock = () => {
   return (
@@ -146,8 +131,8 @@ export const InAScrollableBlock = () => {
     </Box>
   );
 };
-InAScrollableBlock.story = {
-  name: "in a scrollable block",
+InAScrollableBlock.storyName = "in a scrollable block";
+InAScrollableBlock.parameters = {
   parameters: {
     chromatic: {
       disableSnapshot: true,
@@ -156,7 +141,7 @@ InAScrollableBlock.story = {
 };
 
 export const InsideMenu = () => {
-  const [open, setOpen] = useState(defaultOpenState);
+  const [open, setOpen] = useState(false);
   return (
     <Menu menuType="black">
       <MenuItem flex="0 0 auto">
@@ -167,9 +152,9 @@ export const InsideMenu = () => {
           onClose={() => setOpen(false)}
           open={open}
           renderOpenComponent={({ ref, onClick }) => (
-            <IconButton aria-label="Notifications" ref={ref} onClick={onClick}>
+            <Button aria-label="Notifications" ref={ref} onClick={onClick}>
               <Icon type="alert" />
-            </IconButton>
+            </Button>
           )}
           p={0}
         >
@@ -194,14 +179,7 @@ export const InsideMenu = () => {
     </Menu>
   );
 };
-InsideMenu.story = {
-  name: "inside menu",
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};
+InsideMenu.storyName = "inside menu";
 
 export const InsideMenuWithOpenButton = () => {
   const [open, setOpen] = useState(false);
@@ -255,17 +233,10 @@ export const InsideMenuWithOpenButton = () => {
     </Menu>
   );
 };
-InsideMenuWithOpenButton.story = {
-  name: "inside menu with open button",
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};
+InsideMenuWithOpenButton.storyName = "inside menu with open button";
 
 export const InsideMenuWithPrimaryOpenButton = () => {
-  const [open, setOpen] = useState(defaultOpenState);
+  const [open, setOpen] = useState(false);
   return (
     <Menu menuType="black">
       <MenuItem href="#">Menu Item One</MenuItem>
@@ -325,14 +296,8 @@ export const InsideMenuWithPrimaryOpenButton = () => {
     </Menu>
   );
 };
-InsideMenuWithPrimaryOpenButton.story = {
-  name: "inside menu with primary open button",
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};
+InsideMenuWithPrimaryOpenButton.storyName =
+  "inside menu with primary open button";
 
 export const WithFullWidthButton = () => {
   const [open, setOpen] = useState(defaultOpenState);
@@ -359,6 +324,14 @@ export const WithFullWidthButton = () => {
     </PopoverContainer>
   );
 };
+WithFullWidthButton.storyName = "with full width button";
+WithFullWidthButton.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    delay: 2000,
+  },
+  themeProvider: { chromatic: { theme: "sage" } },
+};
 
 export const WithRadioButtons = () => {
   const [open1, setOpen1] = useState(false);
@@ -388,19 +361,12 @@ export const WithRadioButtons = () => {
     </Box>
   );
 };
-WithRadioButtons.story = {
-  name: "with radio buttons",
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};
+WithRadioButtons.storyName = "with radio buttons";
 
 export const WithinGlobalHeader = ({
   shouldCoverButton,
 }: PopoverContainerProps) => {
-  const [popoverOpen, setPopoverOpen] = useState(defaultOpenState);
+  const [popoverOpen, setPopoverOpen] = useState(false);
 
   return (
     <>
@@ -438,11 +404,6 @@ WithinGlobalHeader.story = {
   args: {
     shouldCoverButton: true,
   },
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
 };
 
 export const OnCloseTest = () => {
@@ -457,12 +418,3 @@ export const OnCloseTest = () => {
 };
 
 OnCloseTest.storyName = "On Close Test";
-OnCloseTest.story = {
-  name: "on-close-test",
-  args: {},
-  parameters: {
-    chromatic: {
-      disableSnapshot: true,
-    },
-  },
-};