Merge branch 'master' into field-spacing-review

.changeset/calm-owls-fail.md

@@ -0,0 +1,15 @@
+---
+'braid-design-system': minor
+---
+
+---
+new:
+  - IconHash
+---
+
+**IconHash:** Add component
+
+**EXAMPLE USAGE:**
+```jsx
+<IconHash />
+```

.changeset/perfect-rockets-tan.md

@@ -0,0 +1,13 @@
+---
+'braid-design-system': patch
+---
+
+---
+updated:
+  - Badge
+---
+
+**Badge:** Ensure label follows correct tone
+
+Ensure that the foreground text of a `Badge` always follows the correct tone for the background colour.
+Fixes a bug where using a `Badge` in a `List` that overrides the default tone would result in the `Badge` text following the `List` tone instead of the `Badge` tone.

packages/braid-design-system/scripts/generateIcons.cts

@@ -177,7 +177,7 @@ const svgrConfig = {
 
         const docs: ComponentDocs = {
           category: 'Icon',
-                    Example: () =>
+          Example: () =>
             source(
               <Stack space="none" align="center">
                 <Heading component="div" level="1">

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComponentScreenshot } from 'site/types';
-import { Badge, Inline, Heading } from '../';
+import { Badge, Inline, Heading, List } from '../';
 
 export const screenshots: ComponentScreenshot = {
   screenshotWidths: [320],
@@ -108,5 +108,16 @@ export const screenshots: ComponentScreenshot = {
         </Badge>
       ),
     },
+    {
+      label: 'Test: Badge text should follow tone not default set by `List`',
+      Example: () => (
+        <List tone="secondary">
+          <Badge tone="critical">Critical</Badge>
+          <Badge tone="critical" weight="strong">
+            Critical
+          </Badge>
+        </List>
+      ),
+    },
   ],
 };

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

@@ -6,6 +6,7 @@ import buildDataAttributes, {
   type DataAttributeMap,
 } from '../private/buildDataAttributes';
 import { Bleed } from '../Bleed/Bleed';
+import { DefaultTextPropsProvider } from '../private/defaultTextProps';
 
 type ValueOrArray<T> = T | T[];
 
@@ -83,35 +84,39 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
     );
 
     const content = (
-      <Box
-        component="span"
-        display="flex"
-        cursor="default"
-        {...buildDataAttributes({ data, validateRestProps: restProps })}
-      >
+      // Ensures the foreground text tone follows the default
+      // for the selected background colour
+      <DefaultTextPropsProvider tone="neutral">
         <Box
           component="span"
-          id={id}
-          ref={ref}
-          tabIndex={tabIndex}
-          aria-describedby={ariaDescribedBy}
-          title={
-            title ??
-            (!ariaDescribedBy ? stringifyChildren(children) : undefined)
-          }
-          background={
-            weight === 'strong' ? tone : lightModeBackgroundForTone[tone]
-          }
-          paddingY={verticalPadding}
-          paddingX="xsmall"
-          borderRadius="standard"
-          overflow="hidden"
+          display="flex"
+          cursor="default"
+          {...buildDataAttributes({ data, validateRestProps: restProps })}
         >
-          <Text size="xsmall" weight="medium" maxLines={1}>
-            {children}
-          </Text>
+          <Box
+            component="span"
+            id={id}
+            ref={ref}
+            tabIndex={tabIndex}
+            aria-describedby={ariaDescribedBy}
+            title={
+              title ??
+              (!ariaDescribedBy ? stringifyChildren(children) : undefined)
+            }
+            background={
+              weight === 'strong' ? tone : lightModeBackgroundForTone[tone]
+            }
+            paddingY={verticalPadding}
+            paddingX="xsmall"
+            borderRadius="standard"
+            overflow="hidden"
+          >
+            <Text size="xsmall" weight="medium" maxLines={1}>
+              {children}
+            </Text>
+          </Box>
         </Box>
-      </Box>
+      </DefaultTextPropsProvider>
     );
 
     return bleedY ? (

packages/braid-design-system/src/lib/components/icons/IconHash/IconHash.docs.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ComponentDocs } from 'site/types';
+import { iconDocumentation } from '../iconCommon.docs';
+import source from '@braid-design-system/source.macro';
+import { IconHash, Heading, Stack } from '../../';
+
+const docs: ComponentDocs = {
+  category: 'Icon',
+  Example: () =>
+    source(
+      <Stack space="none" align="center">
+        <Heading component="div" level="1">
+          <IconHash />
+        </Heading>
+      </Stack>,
+    ),
+  alternatives: [],
+  additional: [iconDocumentation],
+};
+
+export default docs;

packages/braid-design-system/src/lib/components/icons/IconHash/IconHash.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '../../Box/Box';
+import useIcon, { type UseIconProps } from '../../../hooks/useIcon';
+import { IconHashSvg } from './IconHashSvg';
+
+export type IconHashProps = UseIconProps;
+
+export const IconHash = (props: IconHashProps) => {
+  const iconProps = useIcon(props);
+
+  return <Box component={IconHashSvg} {...iconProps} />;
+};

packages/braid-design-system/src/lib/components/icons/__snapshots__/icons.test.ts.snap

@@ -779,6 +779,29 @@ export const IconGridSvg = ({ title, titleId, ...props }: SVGProps) => (
 "
 `;
 
+exports[`IconHashSvg should match snapshot 1`] = `
+"import React from 'react';
+
+import type { SVGProps } from '../SVGTypes';
+
+export const IconHashSvg = ({ title, titleId, ...props }: SVGProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    focusable="false"
+    fill="currentColor"
+    width={16}
+    height={16}
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M20 14h-4.216l.445-4H20a1 1 0 1 0 0-2h-3.55l.544-4.89a1.001 1.001 0 0 0-.884-1.104 1.014 1.014 0 0 0-1.104.884L14.438 8h-3.987l.543-4.89a1.001 1.001 0 0 0-.884-1.104c-.536-.05-1.044.335-1.104.884L8.438 8H4a1 1 0 1 0 0 2h4.216l-.445 4H4a1 1 0 1 0 0 2h3.55l-.544 4.89a1.001 1.001 0 0 0 1.988.22L9.562 16h3.987l-.543 4.89a1.001 1.001 0 0 0 1.988.22l.568-5.11H20a1 1 0 1 0 0-2ZM9.784 14l.445-4h3.987l-.445 4H9.784Z" />
+  </svg>
+);
+"
+`;
+
 exports[`IconHeartActiveSvg should match snapshot 1`] = `
 "import React from 'react';
 

packages/braid-design-system/src/lib/components/icons/index.ts

@@ -27,6 +27,7 @@ export { IconFlag } from './IconFlag/IconFlag';
 export { IconGift } from './IconGift/IconGift';
 export { IconGlobe } from './IconGlobe/IconGlobe';
 export { IconGrid } from './IconGrid/IconGrid';
+export { IconHash } from './IconHash/IconHash';
 export { IconHeart } from './IconHeart/IconHeart';
 export { IconHelp } from './IconHelp/IconHelp';
 export { IconHistory } from './IconHistory/IconHistory';

packages/generate-component-docs/src/__snapshots__/contract.test.ts.snap

@@ -4371,6 +4371,37 @@ exports[`IconGrid 1`] = `
 }
 `;
 
+exports[`IconHash 1`] = `
+{
+  exportType: component,
+  props: {
+    alignY?: 
+        | "lowercase"
+        | "uppercase"
+    data?: DataAttributeMap
+    size?: 
+        | "fill"
+        | "large"
+        | "small"
+        | "standard"
+        | "xsmall"
+    title?: string
+    titleId?: string
+    tone?: 
+        | "brandAccent"
+        | "caution"
+        | "critical"
+        | "formAccent"
+        | "info"
+        | "link"
+        | "neutral"
+        | "positive"
+        | "promote"
+        | "secondary"
+},
+}
+`;
+
 exports[`IconHeart 1`] = `
 {
   exportType: component,