MenuRenderer, OverflowMenu: add small size (#1675)

Co-authored-by: Michael Taranto <[email protected]>
Co-authored-by: Michael Taranto <[email protected]>

.changeset/wicked-dancers-end.md

@@ -0,0 +1,19 @@
+---
+'braid-design-system': minor
+---
+
+---
+updated:
+  - MenuRenderer
+  - OverflowMenu
+---
+
+**MenuRenderer, OverflowMenu:** Add `small` size.
+
+Introduce a new `small` size for `MenuRenderer` and `OverflowMenu`.
+This is available via the `size` prop, which supports the existing `standard` (default) and `small`.
+
+**EXAMPLE USAGE:**
+```jsx
+<MenuRenderer size="small" ... />
+```

packages/braid-design-system/src/lib/components/Badge/Badge.tsx

@@ -10,6 +10,7 @@ import { DefaultTextPropsProvider } from '../private/defaultTextProps';
 import { TextContext } from '../Text/TextContext';
 import HeadingContext from '../Heading/HeadingContext';
 import * as styles from './Badge.css';
+import { useDefaultBadgeProps } from './defaultBadgeProps';
 
 type ValueOrArray<T> = T | T[];
 
@@ -61,7 +62,7 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
     {
       tone = 'info',
       weight = 'regular',
-      bleedY = false,
+      bleedY: bleedYProp,
       title,
       children,
       id,
@@ -88,6 +89,8 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
     const headingContext = useContext(HeadingContext);
     const isInline = Boolean(textContext || headingContext);
 
+    const { bleedY } = useDefaultBadgeProps({ bleedY: bleedYProp });
+
     assert(
       !isInline || (isInline && bleedY === false),
       'A `Badge` cannot use `bleedY` when rendered inside a `Text` or `Heading` component.',

packages/braid-design-system/src/lib/components/Badge/defaultBadgeProps.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import type { BadgeProps } from './Badge';
+
+interface DefaultBadgeProps {
+  bleedY: BadgeProps['bleedY'];
+}
+
+const DefaultBadgePropsContext = createContext<DefaultBadgeProps>({
+  bleedY: undefined,
+});
+
+interface DefaultBadgePropsProviderProps extends DefaultBadgeProps {
+  children: ReactNode;
+}
+
+export const DefaultBadgePropsProvider = ({
+  bleedY,
+  children,
+}: DefaultBadgePropsProviderProps) => {
+  const defaultBadgeProps = useMemo(
+    () => ({
+      bleedY,
+    }),
+    [bleedY],
+  );
+
+  return (
+    <DefaultBadgePropsContext.Provider value={defaultBadgeProps}>
+      {children}
+    </DefaultBadgePropsContext.Provider>
+  );
+};
+
+export const useDefaultBadgeProps = ({
+  bleedY: bleedYProp,
+}: DefaultBadgeProps) => {
+  const { bleedY } = useContext(DefaultBadgePropsContext);
+
+  return {
+    bleedY: bleedYProp ?? bleedY ?? false,
+  };
+};