Improvements to VuiOptionsList, VuiFlexItem, VuiButtonTertiary, and VuiAccountMenu

src/docs/pages/accountMenu/AccountMenu.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { VuiAccountMenu, VuiButtonSecondary, VuiIcon, VuiOptionsList } from "../../../lib";
 import { BiSolidUser } from "react-icons/bi";
 
@@ -7,8 +8,12 @@ const options = [
 ];
 
 export const AccountMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
     <VuiAccountMenu
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
       button={
         <VuiButtonSecondary
           color="accent"

src/lib/components/accountMenu/AccountMenu.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { VuiPopover } from "../popover/Popover";
 
 type AccountMenuInfo = Array<{
@@ -7,14 +6,14 @@ type AccountMenuInfo = Array<{
 }>;
 
 type Props = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
   button: React.ReactElement;
   info?: AccountMenuInfo;
   children?: React.ReactNode;
 };
 
-export const VuiAccountMenu = ({ button, info, children }: Props) => {
-  const [isOpen, setIsOpen] = useState(false);
-
+export const VuiAccountMenu = ({ isOpen, setIsOpen, button, info, children }: Props) => {
   return (
     <VuiPopover
       isOpen={isOpen}

src/lib/components/button/buttonTertiary.scss

@@ -1,6 +1,9 @@
 @use "sass:map";
 
 .vuiButtonTertiary {
+  padding-left: $sizeXs;
+  padding-right: $sizeXs;
+
   &:hover {
     text-decoration: underline;
   }

src/lib/components/flex/FlexItem.tsx

@@ -2,21 +2,27 @@ import classNames from "classnames";
 import { ReactNode } from "react";
 
 const GROW = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
+const SHRINK = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] as const;
 
 type Props = {
   children?: ReactNode;
   grow?: (typeof GROW)[number] | boolean;
+  shrink?: (typeof SHRINK)[number] | boolean;
   className?: string;
   truncate?: boolean;
 };
 
-export const VuiFlexItem = ({ children, grow, className, truncate, ...rest }: Props) => {
+export const VuiFlexItem = ({ children, grow, shrink, className, truncate, ...rest }: Props) => {
   const isGrowNone = grow === false;
+  const isShrinkNone = shrink === false;
+
   const classes = classNames(
     "vuiFlexItem",
     {
       [`vuiFlexItem--flexGrow${grow}`]: typeof grow === "number",
       "vuiFlexItem--flexGrowNone": isGrowNone,
+      [`vuiFlexItem--flexShrink${shrink}`]: typeof shrink === "number",
+      "vuiFlexItem--flexShrinkNone": isShrinkNone,
       "vuiFlexItem--truncate": truncate
     },
     className

src/lib/components/flex/_flexItem.scss

@@ -4,6 +4,10 @@
   flex-basis: 0%;
 }
 
+.vuiFlexItem--truncate {
+  min-width: 40px;
+}
+
 @for $i from 0 through 10 {
   .vuiFlexItem--flexGrow#{$i} {
     flex-grow: $i;
@@ -15,6 +19,13 @@
   flex-grow: 0;
 }
 
-.vuiFlexItem--truncate {
-  min-width: 40px;
+@for $i from 0 through 10 {
+  .vuiFlexItem--flexShrink#{$i} {
+    flex-shrink: $i;
+  }
+}
+
+.vuiFlexItem--flexShrinkNone {
+  flex-basis: auto;
+  flex-shrink: 0;
 }

src/lib/components/index.ts

@@ -27,6 +27,7 @@ import { VuiMenuItem } from "./menu/MenuItem";
 import { VuiModal } from "./modal/Modal";
 import { VuiOptionsList } from "./optionsList/OptionsList";
 import { VuiOptionsListItem } from "./optionsList/OptionsListItem";
+import { OptionListItem } from "./optionsList/types";
 import { VuiPopover } from "./popover/Popover";
 import { VuiPortal } from "./portal/Portal";
 import { VuiPrompt } from "./prompt/Prompt";
@@ -49,7 +50,7 @@ import { TEXT_COLOR, TITLE_SIZE } from "./typography/types";
 import { VuiTitle } from "./typography/Title";
 import { VuiToggle } from "./toggle/Toggle";
 
-export type { AppContentPadding, ButtonColor, CalloutColor, TabSize };
+export type { AppContentPadding, ButtonColor, CalloutColor, OptionListItem, TabSize };
 
 export {
   BADGE_COLOR,

src/lib/components/optionsList/OptionsList.tsx

@@ -1,15 +1,9 @@
 import classNames from "classnames";
-import { VuiText } from "../typography/Text";
-import { VuiTextColor } from "../typography/TextColor";
-import { TextColor } from "../typography/types";
 import { VuiOptionsListItem } from "./OptionsListItem";
+import { OptionListItem } from "./types";
 
 type Props = {
-  options: {
-    value: string;
-    label: string;
-    color?: TextColor;
-  }[];
+  options: OptionListItem[];
   onSelectOption: (value: string) => void;
   selectedOption?: string;
   isSelectable?: boolean;
@@ -30,20 +24,17 @@ export const VuiOptionsList = ({
 
   return (
     <div className={classes} {...rest}>
-      {options.map(({ value, label, color = "normal" }) => (
+      {options.map(({ value, label, href, onClick, color }) => (
         <VuiOptionsListItem
           key={value}
           value={value}
-          onClick={onSelectOption}
+          label={label}
+          color={color}
+          href={href}
+          onClick={onClick ?? onSelectOption}
           isSelectable={isSelectable}
           isSelected={value === selectedOption}
-        >
-          <VuiText>
-            <VuiTextColor color={color}>
-              <p>{label}</p>
-            </VuiTextColor>
-          </VuiText>
-        </VuiOptionsListItem>
+        />
       ))}
     </div>
   );

src/lib/components/optionsList/OptionsListItem.tsx

@@ -1,31 +1,58 @@
 import React from "react";
+import { Link } from "react-router-dom";
+import { BiCheck } from "react-icons/bi";
 import { VuiFlexContainer } from "../flex/FlexContainer";
 import { VuiFlexItem } from "../flex/FlexItem";
 import { VuiIcon } from "../icon/Icon";
-import { BiCheck } from "react-icons/bi";
+import { VuiText } from "../typography/Text";
+import { VuiTextColor } from "../typography/TextColor";
+import { OptionListItem } from "./types";
 
-type Props = {
-  value: string;
-  children: React.ReactNode;
+type Props = OptionListItem & {
   isSelectable?: boolean;
   isSelected?: boolean;
-  onClick: (value: string) => void;
 };
 
-export const VuiOptionsListItem = ({ value, children, isSelectable, isSelected, onClick, ...rest }: Props) => {
-  return (
-    <button className="vuiOptionsListItem" onClick={() => onClick(value)} {...rest}>
-      <VuiFlexContainer alignItems="center" spacing="xs">
-        {isSelectable && (
-          <VuiFlexItem grow={false}>
-            <VuiIcon className={isSelected ? "" : "vuiOptionsListItem__selected--unselected"} color="accent" size="s">
-              <BiCheck />
-            </VuiIcon>
-          </VuiFlexItem>
-        )}
+export const VuiOptionsListItem = ({
+  value,
+  label,
+  color = "normal",
+  href,
+  onClick,
+  isSelectable,
+  isSelected,
+  ...rest
+}: Props) => {
+  const content = (
+    <VuiFlexContainer alignItems="center" spacing="xs">
+      {isSelectable && (
+        <VuiFlexItem grow={false}>
+          <VuiIcon className={isSelected ? "" : "vuiOptionsListItem__selected--unselected"} color="accent" size="s">
+            <BiCheck />
+          </VuiIcon>
+        </VuiFlexItem>
+      )}
+      <VuiFlexItem grow={false}>
+        <VuiText>
+          <VuiTextColor color={color}>
+            <p>{label}</p>
+          </VuiTextColor>
+        </VuiText>
+      </VuiFlexItem>
+    </VuiFlexContainer>
+  );
+
+  if (href) {
+    return (
+      <Link className="vuiOptionsListItem" to={href} onClick={() => onClick?.(value)} {...rest}>
+        {content}
+      </Link>
+    );
+  }
 
-        <VuiFlexItem grow={false}>{children}</VuiFlexItem>
-      </VuiFlexContainer>
+  return (
+    <button className="vuiOptionsListItem" onClick={() => onClick?.(value)} {...rest}>
+      {content}
     </button>
   );
 };

src/lib/components/optionsList/types.ts

@@ -0,0 +1,9 @@
+import { TextColor } from "../typography/types";
+
+export type OptionListItem = {
+  value: string;
+  label: string;
+  href?: string;
+  onClick?: (value: string) => void;
+  color?: TextColor;
+};