@codecademy/styleguide 78.5.6-alpha.a75de2.0 → 78.5.6-alpha.afe04a.0

package/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.mdx

@@ -6,17 +6,17 @@ import { breakpoint } from '../../shared/elements';
 import * as ResponsivePropertiesStories from './ResponsiveProperties.stories';
 
 export const parameters = {
-  title: 'Responsive Properties',
+  title: 'Responsive properties',
   subtitle:
     'All system props accept a syntax to generate responsive styles on a per prop basis',
   source: {
     repo: 'variance',
     githubLink:
-      'https://github.com/Codecademy/gamut/blob/cass-gm-842/packages/variance/src/utils/responsive.ts',
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variables/responsive.ts',
   },
 };
 
-<Meta title="Foundations/System/Responsive Properties" />
+<Meta of={ResponsivePropertiesStories} />
 
 <AboutHeader {...parameters} />
 

package/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.stories.tsx

@@ -2,6 +2,7 @@ import { Box, FlexBox } from '@codecademy/gamut';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof FlexBox> = {
+  title: 'Foundations/System/Responsive properties',
   component: FlexBox,
   args: {
     center: true,

package/src/lib/Foundations/shared/elements.tsx

@@ -2,22 +2,32 @@ import { Anchor, Box } from '@codecademy/gamut';
 import {
   Background,
   coreSwatches,
+  css,
   lxStudioColors,
   theme,
   trueColors,
 } from '@codecademy/gamut-styles';
 // eslint-disable-next-line gamut/import-paths
 import * as ALL_PROPS from '@codecademy/gamut-styles/src/variance/config';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
 import kebabCase from 'lodash/kebabCase';
 
 import { Code, ColorScale, LinkTo, TokenTable } from '~styleguide/blocks';
 
 import { applyCorrectNotation } from './applyCorrectNotation';
 
+const AnchorCode = styled(Code)(
+  css({
+    textDecoration: 'underline',
+    mx: 4,
+  })
+);
+
 export const PROP_COLUMN = {
   key: 'key',
   name: 'Prop',
-  size: 'md',
+  size: 'lg',
   render: ({ id }: any) => <Code>{id}</Code>,
 };
 
@@ -403,26 +413,61 @@ export const DarkModeTable = () => (
 );
 /* eslint-disable gamut/import-paths */
 
+const PropertiesRenderer = ({
+  property,
+  properties,
+  resolveProperty,
+}: {
+  property: string | { physical: string; logical: string };
+  properties?: string[] | { physical: string[]; logical: string[] };
+  resolveProperty?: (useLogicalProperties: boolean) => 'logical' | 'physical';
+}) => {
+  const currentTheme = useTheme() as { useLogicalProperties?: boolean };
+  const useLogicalProperties = currentTheme?.useLogicalProperties ?? true;
+
+  const mode = resolveProperty
+    ? resolveProperty(useLogicalProperties)
+    : 'physical';
+
+  const resolvedProperty =
+    typeof property === 'string' ? property : property[mode];
+
+  let resolvedProperties: string[];
+  if (!properties) {
+    resolvedProperties = [resolvedProperty];
+  } else if (Array.isArray(properties)) {
+    resolvedProperties = properties;
+  } else {
+    resolvedProperties = properties[mode];
+  }
+
+  return (
+    <>
+      {resolvedProperties.map((prop) => (
+        <Anchor
+          href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${kebabCase(
+            prop
+          )}`}
+          key={prop}
+          rel=""
+          target="_blank"
+        >
+          <AnchorCode>{kebabCase(prop)}</AnchorCode>
+        </Anchor>
+      ))}
+    </>
+  );
+};
+
 const PROPERTIES_COLUMN = {
   key: 'properties',
   name: 'Properties',
   size: 'xl',
-  render: ({
-    property,
-    properties = [property],
-  }: {
-    property: string;
-    properties: string[];
-  }) =>
-    properties.map((property) => (
-      <Anchor
-        href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${property}`}
-        rel=""
-        target="_blank"
-      >
-        <Code key={property}>{kebabCase(property)}</Code>
-      </Anchor>
-    )),
+  render: (props: {
+    property: string | { physical: string; logical: string };
+    properties?: string[] | { physical: string[]; logical: string[] };
+    resolveProperty?: (useLogicalProperties: boolean) => 'logical' | 'physical';
+  }) => <PropertiesRenderer {...props} />,
 };
 
 const SCALE_COLUMN = {
@@ -430,7 +475,7 @@ const SCALE_COLUMN = {
   name: 'Scale',
   size: 'lg',
   render: ({ scale }: { scale: string }) => (
-    <LinkTo id={`foundations-theme--${kebabCase(scale)}`}>{scale}</LinkTo>
+    <LinkTo id="Foundations/Theme/Core Theme">{scale}</LinkTo>
   ),
 };
 
@@ -438,7 +483,12 @@ const TRANSFORM_COLUMN = {
   key: 'transform',
   name: 'Transform',
   size: 'fill',
-  render: ({ transform }: any) => transform && <Code>{transform?.name}</Code>,
+  render: ({ transform, resolveProperty }: any) => (
+    <>
+      {transform && <Code>{transform?.name}</Code>}
+      {resolveProperty && <Code>{resolveProperty?.name}</Code>}
+    </>
+  ),
 };
 
 export const defaultColumns = [

package/src/lib/Meta/About.mdx

@@ -13,6 +13,7 @@ import { parameters as deepControlsParameters } from './Deep Controls Add-On.mdx
 import { parameters as eslintRulesParameters } from './ESLint rules.mdx';
 import { parameters as faqsParameters } from './FAQs.mdx';
 import { parameters as installationParameters } from './Installation.mdx';
+import { parameters as logicalPhysicalParameters } from './Logical and physical CSS properties.mdx';
 import { parameters as storiesParameters } from './Stories.mdx';
 import { parameters as usageGuideParameters } from './Usage Guide.mdx';
 
@@ -34,9 +35,10 @@ export const parameters = {
     deepControlsParameters,
     eslintRulesParameters,
     faqsParameters,
+    installationParameters,
+    logicalPhysicalParameters,
     storiesParameters,
     brandParameters,
-    installationParameters,
     usageGuideParameters,
   ])}
 />

package/src/lib/Meta/Logical and physical CSS properties.mdx

@@ -0,0 +1,123 @@
+import { Meta } from '@storybook/blocks';
+
+import {
+  AboutHeader,
+  Callout,
+  Code,
+  ImageWrapper,
+  TokenTable,
+} from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Meta/Logical and physical CSS properties',
+  title: 'Logical and physical CSS properties',
+  subtitle:
+    'Understanding CSS logical and physical properties and how Gamut supports both modes.',
+  status: 'static',
+};
+
+<Meta title="Meta/Logical and physical CSS properties" />
+
+<AboutHeader {...parameters} />
+
+## What are CSS logical properties?
+
+CSS logical properties are a modern approach to styling that adapts to the writing mode and text direction of your content, rather than being tied to physical screen directions. More information can be found on[MDN: CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
+
+### Physical Properties (Traditional)
+
+Physical properties reference the physical dimensions of the viewport. For example:
+
+- `margin-left`, `margin-right`, `margin-top`, `margin-bottom`
+- `padding-left`, `padding-right`, `padding-top`, `padding-bottom`
+
+These work well for left-to-right (LTR) languages but require manual overrides for right-to-left (RTL) languages like Arabic or Hebrew.
+
+### Logical Properties (Modern)
+
+Logical properties reference the flow of content:
+
+- **Inline axis** (text direction): `margin-inline-start`, `margin-inline-end`
+- **Block axis** (reading direction): `margin-block-start`, `margin-block-end`
+
+## Using `useLogicalProperties` in Gamut
+
+Gamut supports both physical and logical CSS properties through the `useLogicalProperties` prop on `GamutProvider`. This allows you to choose which mode your application uses. By default, `useLogicalProperties` is set to `true`, meaning Gamut will use logical CSS properties. If you want to use physical CSS properties, you have to set `useLogicalProperties` to `false`.
+
+### Affected Props
+
+Here are some examples of how physical and logical properties are affected by the `useLogicalProperties` prop:
+
+<TokenTable
+  idKey="prop"
+  columns={[
+    {
+      key: 'prop',
+      name: 'Prop',
+      size: 'sm',
+      render: ({ prop }) => <Code>{prop}</Code>,
+    },
+    {
+      key: 'physical',
+      name: 'Physical',
+      size: 'xl',
+      render: ({ physical }) =>
+        physical.map((p) => (
+          <>
+            <Code key={p}>{p}</Code>{' '}
+          </>
+        )),
+    },
+    {
+      key: 'logical',
+      name: 'Logical',
+      size: 'xl',
+      render: ({ logical }) =>
+        logical.map((l) => (
+          <>
+            <Code key={l}>{l}</Code>{' '}
+          </>
+        )),
+    },
+  ]}
+  rows={[
+    {
+      prop: 'mx',
+      physical: ['margin-left', 'margin-right'],
+      logical: ['margin-inline-start', 'margin-inline-end'],
+    },
+    { prop: 'mt', physical: ['margin-top'], logical: ['margin-block-start'] },
+    {
+      prop: 'py',
+      physical: ['padding-top', 'padding-bottom'],
+      logical: ['padding-block-start', 'padding-block-end'],
+    },
+    {
+      prop: 'pb',
+      physical: ['padding-bottom'],
+      logical: ['padding-block-end'],
+    },
+  ]}
+/>
+
+<Callout
+  text={
+    <>
+      Props like <code>m</code> and <code>p</code> (which set all four sides at
+      once) are not affected by this setting, as the CSS <code>margin</code> and{' '}
+      <code>padding</code> shorthands work identically in both modes.
+    </>
+  }
+/>
+
+## Previewing in Storybook
+
+You can toggle between logical and physical properties in Storybook using the **LogicalProps** toolbar button:
+
+<ImageWrapper
+  src="./meta/toolbar.png"
+  alt="The Storybook toolbar with the LogicalProps toggle highlighted."
+  height="auto"
+/>
+
+This allows you to preview how components render with either property mode without changing any code.

package/src/lib/Meta/Usage Guide.mdx

@@ -39,7 +39,8 @@ On each page is a toolbar located on the top:
 1. Grid (the 2x2 collection of squares) - applies a grid to the preview
 2. Color mode selector (the circle icon) - toggles between light and dark mode for rendered code examples
 3. Theme switcher (the paintbrush icon) - switches between different design system themes (Core, Admin, LX Studio, Percipio)
-4. Outline (dotted square) - applies outlines to elements in the rendered code examples
+4. LogicalProps (the two arrows icon) - toggles between physical and logical CSS properties
+5. Outline (dotted square) - applies outlines to elements in the rendered code examples
 
 ### Theme Switcher
 
@@ -58,6 +59,10 @@ Available themes:
 
 The theme switcher works in combination with the color mode selector, so you can test both light and dark variants of each theme.
 
+### LogicalProps
+
+The LogicalProps button (two arrows icon) provides a menu to select between Logical and Physical CSS properties.
+
 ### Showing code
 
 On the bottom right of each canvas (a rendered code example) is a button to show its code:

package/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx

@@ -28,7 +28,8 @@ export const parameters = {
 A tip is triggered by clicking on an information icon button and can be closed by clicking outside, pressing <KeyboardKey>Esc</KeyboardKey>, or clicking the info button again.
 
 Use an infotip to provide additional info about a nearby element or content.
-The info button has low and high emphasis variants and the `Tip` has 4 alignment variants.
+
+Infotip consists of an icon button and the .tip-bg subcomponent. The info button has low and high emphasis variants and the `.tip` has 4 alignment variants.
 
 ## Variants
 
@@ -56,19 +57,17 @@ This `floating` variant should only be used as needed.
 
 ### InfoTips with links or buttons
 
-Links or buttons within InfoTips should be used sparingly and only when the information is critical to the user's understanding of the content. When an InfoTip opens, focus automatically moves to the tip content, allowing keyboard users to immediately interact with any links or buttons inside.
+Links or buttons within InfoTips should be used sparingly and only when the information is critical to the user's understanding of the content. If an infotip _absolutely requires_ a link or button, it needs to provide a programmatic focus by way of the `onClick` prop. The `onClick` prop accepts a function that can accept an `{isTipHidden}` argument and using that you can set programmatic focus as needed.
 
 <Canvas of={InfoTipStories.WithLinksOrButtons} />
 
-### Automatic Focus Management
+### Floating placement
 
-InfoTips automatically manage focus for optimal keyboard accessibility:
+When using `placement="floating"`, InfoTips implements focus management for easier navigation:
 
-- **Opening**: Focus automatically moves to the tip content when opened
-- ** <KeyboardKey>Tab</KeyboardKey> (Floating)**: Navigate forward through focusable elements (links, buttons) inside the tip. When reaching the last element, wraps back to the InfoTip button
-- **<KeyboardKey>Shift </KeyboardKey> + <KeyboardKey>Tab</KeyboardKey> (Floating)**: Navigate backward naturally - from the button, exits to the previous page element
-- **<KeyboardKey>Tab</KeyboardKey> or <KeyboardKey>Shift</KeyboardKey> +<KeyboardKey>Tab</KeyboardKey> (Inline)**: Follows normal document flow
-- **<KeyboardKey>Escape</KeyboardKey>**: Closes the tip and returns focus to the InfoTip button
+- **<KeyboardKey>Tab</KeyboardKey>**: Navigate forward through focusable elements (links, buttons) inside the tip. When reaching the last element, wraps back to the InfoTip button for convenience
+- **<KeyboardKey>Shift</KeyboardKey>+<KeyboardKey>Tab</KeyboardKey>**: Navigate backward naturally through the page
+- **<KeyboardKey>Esc</KeyboardKey>**: Closes the tip and returns focus to the InfoTip button
 
 <Canvas of={InfoTipStories.KeyboardNavigation} />
 
@@ -83,21 +82,6 @@ InfoTips have intelligent Escape key handling that works correctly both inside a
 
 <Canvas of={InfoTipStories.InfoTipInsideModal} />
 
-## Custom Accessible Labeling
-
-Provide either `ariaLabel` or `ariaLabelledby` to ensure screen reader users understand the purpose of the InfoTip button.
-
-The InfoTip button's accessible label can be customized using either prop:
-
-- **`ariaLabel`**: Directly sets the accessible label text. Useful when you want to provide a custom label without referencing another element.
-- **`ariaLabelledby`**: References the ID of another element to use as the label. Useful when you want the InfoTip button to be labeled by visible text elsewhere on the page. This is useful for when the `InfoTip` is beside text that contextualizes it.
-
-### Custom Role Description
-
-The `InfoTipButton` uses [`aria-roledescription`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) to provide additional context to screen reader users about the button's specific purpose. This defaults to `"More information button"` but can be customized via the `ariaRoleDescription` prop for translation or other accessibility needs.
-
-<Canvas of={InfoTipStories.AriaLabel} />
-
 ## InfoTips and zIndex
 
 You can change the zIndex of your `InfoTip` with the zIndex property.

package/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx

@@ -4,20 +4,17 @@ import {
   FillButton,
   FlexBox,
   GridBox,
-  IconButton,
   InfoTip,
   Modal,
   Text,
 } from '@codecademy/gamut';
-import { SparkleIcon } from '@codecademy/gamut-icons';
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 const meta: Meta<typeof InfoTip> = {
   component: InfoTip,
   args: {
     alignment: 'top-left',
-    ariaLabel: 'More information',
     info: `I am additional information about a nearby element or content.`,
   },
 };
@@ -31,10 +28,7 @@ export const Emphasis: Story = {
   },
   render: (args) => (
     <FlexBox center m={24} py={64}>
-      <Text id="emphasis-text" mr={4}>
-        Some text that needs info
-      </Text>
-      <InfoTip {...args} ariaLabelledby="emphasis-text" />
+      <Text mr={4}>Some text that needs info</Text> <InfoTip {...args} />
     </FlexBox>
   ),
 };
@@ -44,15 +38,10 @@ export const Alignments: Story = {
     <GridBox gap={24} gridTemplateColumns="1fr 1fr" ml={8} py={64}>
       {(['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const).map(
         (alignment) => {
-          const labelId = `alignment-${alignment}`;
           return (
             <Box key={alignment}>
-              <Text id={labelId}>{alignment}</Text>
-              <InfoTip
-                {...args}
-                alignment={alignment}
-                ariaLabelledby={labelId}
-              />
+              <Text>{alignment}</Text>
+              <InfoTip {...args} alignment={alignment} />
             </Box>
           );
         }
@@ -67,51 +56,10 @@ export const Placement: Story = {
   },
   render: (args) => (
     <FlexBox center>
-      <Text id="placement-text" mr={4}>
+      <Text mr={4}>
         This text is in a small space and needs floating placement
       </Text>{' '}
-      <InfoTip {...args} ariaLabelledby="placement-text" />
-    </FlexBox>
-  ),
-};
-
-export const AriaLabel: Story = {
-  render: (args) => (
-    <FlexBox center column gap={24} my={48} width={1}>
-      <FlexBox alignItems="center" gap={8}>
-        <Text fontSize={16} fontWeight="bold">
-          Using ariaLabel (no visible label text):
-        </Text>
-      </FlexBox>
-      <FlexBox alignItems="center" gap={8}>
-        <IconButton
-          icon={SparkleIcon}
-          tip="This tool needs to be explained in the InfoTip"
-          tipProps={{ placement: 'floating' }}
-          onClick={() => null}
-        />
-        <InfoTip
-          {...args}
-          ariaLabel="Learn more about this tool"
-          info="This is some helpful info about the tool represented by the IconButton"
-        />
-      </FlexBox>
-
-      <FlexBox alignItems="center" gap={8}>
-        <Text fontSize={16} fontWeight="bold">
-          Using ariaLabelledby (references visible text):
-        </Text>
-      </FlexBox>
-      <FlexBox alignItems="center" gap={8}>
-        <Text id="custom-info-id">
-          I am some helpful yet concise text that needs more explanation
-        </Text>
-        <InfoTip
-          alignment="bottom-left"
-          ariaLabelledby="custom-info-id"
-          info="I am clarifying information related to the concise text."
-        />
-      </FlexBox>
+      <InfoTip {...args} />
     </FlexBox>
   ),
 };
@@ -121,16 +69,19 @@ export const WithLinksOrButtons: Story = {
     placement: 'floating',
   },
   render: function WithLinksOrButtons(args) {
+    const ref = useRef<HTMLDivElement>(null);
+
+    const onClick = ({ isTipHidden }: { isTipHidden: boolean }) => {
+      if (!isTipHidden) ref.current?.focus();
+    };
+
     return (
       <FlexBox center py={64}>
-        <Text id="links-text" mr={4}>
-          This text is in a small space and needs info
-        </Text>{' '}
+        <Text mr={4}>This text is in a small space and needs info </Text>{' '}
         <InfoTip
           {...args}
-          ariaLabelledby="links-text"
           info={
-            <Text tabIndex={-1}>
+            <Text ref={ref} tabIndex={-1}>
               Hey! Here is a{' '}
               <Anchor href="https://giphy.com/search/nichijou">
                 cool link
@@ -142,6 +93,7 @@ export const WithLinksOrButtons: Story = {
               that is also super important.
             </Text>
           }
+          onClick={onClick}
         />
       </FlexBox>
     );
@@ -150,35 +102,42 @@ export const WithLinksOrButtons: Story = {
 
 export const KeyboardNavigation: Story = {
   render: function KeyboardNavigation() {
+    const floatingRef = useRef<HTMLDivElement>(null);
+    const inlineRef = useRef<HTMLDivElement>(null);
+
     const examples = [
       {
         title: 'Floating Placement',
         placement: 'floating' as const,
+        ref: floatingRef,
         links: ['Link 1', 'Link 2', 'Link 3'],
       },
       {
         title: 'Inline Placement',
         placement: 'inline' as const,
         alignment: 'bottom-right' as const,
+        ref: inlineRef,
         links: ['Link A', 'Link B'],
       },
     ];
 
     return (
-      <FlexBox center flexDirection="column" gap={24} py={64}>
+      <FlexBox center column gap={24} py={64}>
         <GridBox gap={16} gridTemplateColumns="1fr 1fr">
-          {examples.map(({ title, placement, alignment, links }) => {
-            const labelId = `keyboard-nav-${placement}`;
+          {examples.map(({ title, placement, alignment, ref, links }) => {
+            const onClick = ({ isTipHidden }: { isTipHidden: boolean }) => {
+              if (!isTipHidden) ref.current?.focus();
+            };
+
             return (
               <FlexBox gap={8} key={placement}>
-                <Text fontSize={16} fontWeight="bold" id={labelId}>
+                <Text fontSize={16} fontWeight="bold">
                   {title}
                 </Text>
                 <InfoTip
                   alignment={alignment}
-                  ariaLabelledby={labelId}
                   info={
-                    <Text>
+                    <Text ref={ref} tabIndex={-1}>
                       {links.map((label, idx) => (
                         <>
                           {idx > 0 && ', '}
@@ -191,6 +150,7 @@ export const KeyboardNavigation: Story = {
                     </Text>
                   }
                   placement={placement}
+                  onClick={onClick}
                 />
               </FlexBox>
             );
@@ -202,10 +162,6 @@ export const KeyboardNavigation: Story = {
             Keyboard Navigation:
           </Text>
           <Box as="ul" fontSize={14} pl={16}>
-            <li>
-              <strong>Opening:</strong> Focus automatically moves to the tip
-              content when opened
-            </li>
             <li>
               <strong>Floating - Tab:</strong> Navigates forward through links,
               then wraps to button (contained)
@@ -268,10 +224,8 @@ export const InfoTipInsideModal: Story = {
             <Text>This modal contains an InfoTip below:</Text>
 
             <FlexBox alignItems="center" gap={8}>
-              <Text id="modal-infotip-text">
-                Some text that needs explanation
-              </Text>
-              <InfoTip {...args} ariaLabelledby="modal-infotip-text" />
+              <Text>Some text that needs explanation</Text>
+              <InfoTip {...args} />
             </FlexBox>
 
             <Text color="text-disabled" fontSize={14}>
@@ -299,14 +253,11 @@ export const ZIndex: Story = {
       <Box bg="paleBlue" zIndex={3}>
         I will not be behind the infotip, sad + unreadable
       </Box>
-      <InfoTip
-        ariaLabel="z-index example without override"
-        info="I am inline, cool"
-      />
+      <InfoTip info="I am inline, cool" />
       <Box bg="paleBlue" zIndex={3}>
         I will be behind the infotip, nice + great
       </Box>
-      <InfoTip {...args} ariaLabel="z-index example with override" />
+      <InfoTip {...args} />
     </FlexBox>
   ),
 };
@@ -314,10 +265,7 @@ export const ZIndex: Story = {
 export const Default: Story = {
   render: (args) => (
     <FlexBox center m={24} py={64}>
-      <Text id="default-text" mr={4}>
-        Some text that needs info
-      </Text>
-      <InfoTip {...args} ariaLabelledby="default-text" />
+      <Text mr={4}>Some text that needs info</Text> <InfoTip {...args} />
     </FlexBox>
   ),
 };

package/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.mdx

@@ -61,26 +61,6 @@ A `ConnectedFormGroup` can be in one of three states: `default`, `error`, or `di
 
 <Canvas of={ConnectedFormGroupStories.States} />
 
-## InfoTip
-
-A `ConnectedFormGroup` can include an `infotip` prop to provide additional context.
-
-### Automatic labelling
-
-InfoTip buttons are automatically labelled by string field labels for accessibility.
-
-<Canvas of={ConnectedFormGroupStories.InfoTipAutoLabelling} />
-
-### ReactNode labels
-
-For ReactNode labels (e.g., styled text or icons), you have three options:
-
-- `labelledByFieldLabel: true` - opt into automatic labelling by the field label
-- `ariaLabel` - provide a custom accessible name
-- `ariaLabelledby` - reference another element on the page, such as a section heading
-
-<Canvas of={ConnectedFormGroupStories.InfoTipWithReactNodeLabel} />
-
 ## Playground
 
 To see how a `ConnectedFormGroup` can be used in a `ConnectedForm`, check out the <LinkTo id="Organisms/ConnectedForm/ConnectedForm">ConnectedForm</LinkTo> page.