@codecademy/styleguide 79.2.2-alpha.554975.0 → 79.2.2-alpha.77bf63.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.2.2-alpha.554975.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.1...@codecademy/styleguide@79.2.2-alpha.554975.0) (2026-03-19)
+### [79.2.2-alpha.77bf63.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.2.1...@codecademy/styleguide@79.2.2-alpha.77bf63.0) (2026-03-25)
 
 **Note:** Version bump only for package @codecademy/styleguide
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.2-alpha.554975.0",
+  "version": "79.2.2-alpha.77bf63.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "847cb7617e7c3e70abec88941a50bf466226632c"
+  "gitHead": "2b9fc62e41c84dbe7c0f25fe7f5b9f22335cc223"
 }

package/src/lib/Atoms/FormInputs/SelectDropdown/SelectDropdown.mdx

@@ -136,10 +136,7 @@ Some of our forms require special props be passed directly onto the input compon
 - `hidden`: Props passed to the hidden input element (used for form submission)
 - `combobox`: Props passed to the visible react-select input element (useful for data-\* attributes, testing, etc.)
 
-<Callout
-  text="  These props are passed directly to the underlying elements, so they only
-  accept `data-*` and `aria-*` attributes to ensure validity."
-/>
+<Callout text="These props are passed directly to the underlying elements, so they only accept data-* and aria-* attributes to ensure validity." />
 
 <Canvas of={SelectDropdownStories.CustomInputProps} />
 

package/src/lib/Atoms/PopoverContainer/PopoverContainer.mdx

@@ -75,7 +75,7 @@ Addition pixel offset from center in the direction of the alignment (e.g. top-le
 
 ### Individual axis offsets `x` and `y`
 
-Absolute offset values irrespective of the relative position. (e.g. x={-4} will be 4 pixels to the left in every position unlike offset).
+Absolute offset values irrespective of the relative position. (e.g. `x={-4}` will be 4 pixels to the left in every position unlike offset).
 
 <Canvas of={PopoverContainerStories.XandY} />
 

package/src/lib/Atoms/PopoverContainer/PopoverContainer.stories.tsx

@@ -94,7 +94,7 @@ export const Alignment: React.FC<
                 justifyContent="center"
               >
                 {alignment.split('-').map((val) => (
-                  <Text as="p" variant="p-small">
+                  <Text as="p" key={val} variant="p-small">
                     {val}
                   </Text>
                 ))}

package/src/lib/Atoms/UtilityComponents/DelayedRenderWrapper/DelayedRenderWrapper.mdx

@@ -24,7 +24,7 @@ export const parameters = {
 
 Use `DelayedRenderWrapper` to wrap around a component that you want to delay rendering for a specified amount of time.
 
-The `delay` prop accepts a number in milliseconds. If a `delay` {'>'} 0 is provided, `DelayedRenderWrapper` will use a `setTimeout()` to determine when to render its children. If `delay` is 0 or not provided, it will render its children immediately.
+The `delay` prop accepts a number in milliseconds. If a `delay` value greater than 0 is provided, `DelayedRenderWrapper` will use a `setTimeout()` to determine when to render its children. If `delay` is 0 or not provided, it will render its children immediately.
 
 ## Playground
 

package/src/lib/Foundations/Layout.mdx

@@ -154,6 +154,7 @@ For spacing between components and sections use these as a guide. Each of these
           >
             {sizes.map((size) => (
               <Box
+                key={`box-${size}`}
                 width={`${size}px`}
                 height={`${size}px`}
                 display="inline-block"
@@ -161,7 +162,7 @@ For spacing between components and sections use these as a guide. Each of these
               />
             ))}
             {sizes.map((size) => (
-              <Box textAlign="center" fontSize={14}>
+              <Box key={`label-${size}`} textAlign="center" fontSize={14}>
                 {size}
               </Box>
             ))}

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

@@ -499,6 +499,7 @@ export const defaultColumns = [
 ];
 
 export const getPropRows = (key: keyof typeof ALL_PROPS) =>
+  // eslint-disable-next-line import/namespace -- dynamic keyof on namespace import
   Object.entries(ALL_PROPS[key]).map(([prop, config]) => ({
     id: prop,
     ...config,

package/src/lib/Layouts/LayoutGrid/examples.tsx

@@ -50,7 +50,13 @@ export const renderColumnChildren = (
       {...props}
       rowspan={span ? span[i] : undefined}
     >
-      <Example>{`${props?.size?.toString()}`}</Example>
+      <Example>
+        {props?.size !== undefined &&
+        props.size !== null &&
+        (typeof props.size === 'string' || typeof props.size === 'number')
+          ? String(props.size)
+          : ''}
+      </Example>
     </Column>
   ));
 };

package/src/lib/Meta/Best Practices.mdx

@@ -153,7 +153,7 @@ type BreakpointArray<T> = [
   T?, // sm
   T?, // md
   T?, // lg
-  T? // xl
+  T?, // xl
   T?, // c_xs
   T?, // c_sm
   T?, // c_md
@@ -170,16 +170,13 @@ type SystemProp<T> = T | BreakpointMap<T> | BreakpointArray<T>;
 import { Box } from '@codecademy/gamut';
 
 // Object Syntax
-<Box width={{ _: "100%", sm: "50%" }} />
+<Box width={{ _: '100%', sm: '50%' }} />
 
 // Array Syntax
-<Box width={["100%", ,"50%"]} />
+<Box width={['100%', , '50%']} />
 ```
 
-<Callout
-  text="If you wish to skip a breakpoint in using the
-    array shorthand you may specify undefined at the index."
-/>
+<Callout text="If you wish to skip a breakpoint when using the array shorthand you may specify undefined at the index." />
 
 ## Real-world use cases
 

package/src/lib/Molecules/Tips/TipsTable.tsx

@@ -77,7 +77,7 @@ const ComponentRow = ({ array }: { array: typeof colTitles }) => {
         const badgeVariant = status === 'New' ? 'accent' : 'tertiary';
 
         return (
-          <BorderRow size="xl">
+          <BorderRow key={title} size="xl">
             <FlexBox alignItems="center" flexWrap="wrap" pl={8}>
               <Text mr={8} variant="title-sm">
                 {!skipTitle && title} {component}
@@ -110,7 +110,7 @@ const FeatureRow = ({
         <Text fontWeight="bold">{title}</Text>
       </ListCol>
       {features.map((details) => (
-        <DetailRow size="xl">
+        <DetailRow key={details} size="xl">
           <Text>{details}</Text>
         </DetailRow>
       ))}

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

@@ -48,6 +48,7 @@ export const Alignments: Story = {
         return (
           <IconButton
             icon={SparkleIcon}
+            key={alignment}
             tip={alignment}
             tipProps={{ alignment }}
           />

package/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputsTable.tsx

@@ -12,7 +12,7 @@ const ListRowRenderer: React.FC<ListRowRendererProps> = ({ inputs }) => {
     <>
       {inputs.map(({ name, counterpart }) => {
         return (
-          <ListRow>
+          <ListRow key={name}>
             <ListCol size="lg" type="header">
               <Text as="code" ml={8}>
                 {name}

package/src/lib/Organisms/Lists & Tables/List/List.stories.tsx

@@ -65,7 +65,7 @@ const ListExample: React.FC = (args) => {
   return (
     <List {...args}>
       {rows.map(({ name, ship }) => (
-        <ListRow>
+        <ListRow key={name}>
           <ListCol size="md" type="header">
             {name}
           </ListCol>
@@ -99,7 +99,7 @@ export const Table: Story = {
 export const Plain: Story = {
   args: { spacing: 'condensed', variant: 'plain' },
   render: (args) => (
-    <Box width={1}>
+    <Box bg="red" width={1}>
       <ListExample {...args} />
     </Box>
   ),
@@ -157,7 +157,7 @@ const ListCardExample: React.FC = (args) => {
   return (
     <List {...args}>
       {rows.map(({ name, ship, role }) => (
-        <ListRow>
+        <ListRow key={name}>
           <ListCol fill>
             <Text truncate="ellipsis" truncateLines={1} variant="title-lg">
               {name}
@@ -218,7 +218,7 @@ const ColumnExample: React.FC<ListProps> = (args) => {
   return (
     <List {...args}>
       {sizes.map((size: 'content' | 'sm' | 'md' | 'lg' | 'xl') => (
-        <ListRow>
+        <ListRow key={size}>
           <ListCol size={size}>
             <Box bg="background-selected" flex={1} height={1} p={8}>
               {size}