@sproutsocial/seeds-react-menu 1.9.2 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/ListboxToggleButton.tsx

@@ -9,11 +9,49 @@ import { useMenuToggleContext } from "./MenuContext";
 export interface TypeListboxToggleButtonProps
   extends TypeMenuToggleButtonProps {
   invalid?: boolean;
+  size?: "small" | "default" | "large";
 }
 
 export const StyledListboxToggleButton = styled(
   MenuToggleButton
 )<TypeListboxToggleButtonProps>`
+  background-color: ${(props) => props.theme.colors.form.background.base};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  transition: border-color ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in},
+    box-shadow ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in};
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  &:active {
+    transform: none;
+  }
+
+  padding: ${(props) => {
+    switch (props.size) {
+      case "large":
+        return `${props.theme.space[400]} ${props.theme.space[400]} ${props.theme.space[400]} ${props.theme.space[400]}`;
+
+      case "small":
+        return `${props.theme.space[200]} ${props.theme.space[200]} ${props.theme.space[200]} ${props.theme.space[200]}`;
+
+      case "default":
+      default:
+        return `${props.theme.space[300]} ${props.theme.space[300]} ${props.theme.space[300]} ${props.theme.space[300]}`;
+    }
+  }};
+  font-size: ${(props) => {
+    switch (props.size) {
+      case "large":
+        return props.theme.typography[300].fontSize;
+
+      case "small":
+      case "default":
+      default:
+        return props.theme.typography[200].fontSize;
+    }
+  }};
+
   ${(props) =>
     props.invalid &&
     css`
@@ -49,11 +87,16 @@ const StyledInnerButton = styled.div`
 
 export const ListboxToggleButton = ({
   children,
+  size = "default",
   ...buttonProps
 }: TypeListboxToggleButtonProps) => {
   const { isOpen } = useMenuToggleContext();
   return (
-    <StyledListboxToggleButton appearance="secondary" {...buttonProps}>
+    <StyledListboxToggleButton
+      appearance="unstyled"
+      size={size}
+      {...buttonProps}
+    >
       <StyledInnerButton>
         {children}
         <StyledChevron $isOpen={isOpen} invalid={buttonProps.invalid}>

package/src/SingleSelectMenu/SingleSelectMenu.stories.tsx

@@ -274,3 +274,53 @@ export const SingleSelectMenuWithCustomEmpty: Story = {
     );
   },
 };
+
+export const SingleSelectMenuSmallSize: Story = {
+  name: "Small Size",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <StorybookMenuToggleButton buttonProps={{ size: "small" }} />
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          <MenuGroup id="books">
+            {TEST_BOOKS.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};
+
+export const SingleSelectMenuLargeSize: Story = {
+  name: "Large Size",
+  render: ({ inputType, ...args }) => {
+    return (
+      <SingleSelectMenu
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <StorybookMenuToggleButton buttonProps={{ size: "large" }} />
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          <MenuGroup id="books">
+            {TEST_BOOKS.map(({ id, title }) => (
+              <MenuItem key={id} id={id} inputType={inputType}>
+                {title}
+              </MenuItem>
+            ))}
+          </MenuGroup>
+        </MenuContent>
+      </SingleSelectMenu>
+    );
+  },
+};