Merge branch 'main' into kl-gm-963

LinKCoding · LinKCoding · commit 27f967c4d116 · 2025-07-16T15:54:29.000-04:00
diff --git a/packages/gamut-kit/CHANGELOG.md b/packages/gamut-kit/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [0.6.522](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.521...@codecademy/gamut-kit@0.6.522) (2025-07-16)
+
+**Note:** Version bump only for package @codecademy/gamut-kit
+
 ### [0.6.521](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-kit@0.6.520...@codecademy/gamut-kit@0.6.521) (2025-07-11)
 
 **Note:** Version bump only for package @codecademy/gamut-kit
diff --git a/packages/gamut-kit/package.json b/packages/gamut-kit/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-kit",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "0.6.521",
+  "version": "0.6.522",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
-    "@codecademy/gamut": "65.1.0",
+    "@codecademy/gamut": "66.0.0",
     "@codecademy/gamut-icons": "9.46.1",
     "@codecademy/gamut-illustrations": "0.54.5",
     "@codecademy/gamut-patterns": "0.10.11",
diff --git a/packages/gamut/CHANGELOG.md b/packages/gamut/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [66.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@65.1.0...@codecademy/gamut@66.0.0) (2025-07-16)
+
+### ⚠ BREAKING CHANGES
+
+- **List:** Add spacing system props to List & remove deprecated props
+
+### Features
+
+- **List:** Add spacing system props to List & remove deprecated props ([097e9eb](https://github.com/Codecademy/gamut/commit/097e9ebbc0b81f211642372fdbda38aeddfded78))
+
 ## [65.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut@65.0.1...@codecademy/gamut@65.1.0) (2025-07-11)
 
 ### Features
diff --git a/packages/gamut/package.json b/packages/gamut/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut",
   "description": "Styleguide & Component library for Codecademy",
-  "version": "65.1.0",
+  "version": "66.0.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "dependencies": {
     "@codecademy/gamut-icons": "9.46.1",
diff --git a/packages/gamut/src/DataList/DataGrid.tsx b/packages/gamut/src/DataList/DataGrid.tsx
@@ -1,3 +1,5 @@
+import { system } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
 import { ComponentProps, useMemo } from 'react';
 
 import { List } from '../List';
@@ -14,7 +16,10 @@ export interface DataGridProps<
   Cols extends ColumnConfig<Row>[]
 > extends MarshaledColProps,
     DataListControls<Row, IdKey, Cols>,
-    Omit<ComponentProps<typeof List>, 'header' | 'id'> {
+    Omit<
+      ComponentProps<typeof List>,
+      'header' | 'id' | 'rowBreakpoint' | keyof StyleProps<typeof system.space>
+    > {
   /** Whether the data inside is loading and should be indicated to the user somehow */
   loading?: boolean;
   /** Whether an additional header element should be added */
@@ -49,7 +54,7 @@ export function DataGrid<
     emptyMessage,
     hideSelectAll = false,
     scrollToTopOnUpdate = false,
-    ...rest
+    id,
   } = props;
 
   const empty = rows.length === 0;
@@ -96,7 +101,6 @@ export function DataGrid<
     <ListStateContext.Provider value={{ query }}>
       <ListControlContext.Provider value={listControls}>
         <List
-          {...rest}
           as="table"
           emptyMessage={emptyMessage ?? <EmptyRows />}
           header={
@@ -110,6 +114,8 @@ export function DataGrid<
             ) : null
           }
           height={height}
+          id={id}
+          loading={loading}
           minHeight={minHeight}
           scrollToTopOnUpdate={scrollToTopOnUpdate}
           scrollable={scrollable}
diff --git a/packages/gamut/src/List/List.tsx b/packages/gamut/src/List/List.tsx
@@ -26,10 +26,8 @@ export interface ListProps extends AllListProps<ComponentProps<typeof ListEl>> {
   /** A custom message to override the default empty message  */
   emptyMessage?: React.ReactNode;
   /**
-   * @deprecated Use overflow instead!
-   * Whether the List container should have overflow hidden.
+   * How the List container should handle overflow.
    */
-  overflowHidden?: boolean;
   overflow?: BoxProps['overflow'];
 }
 
@@ -49,9 +47,9 @@ export const List = forwardRef<HTMLUListElement, ListProps>(
       children,
       header,
       emptyMessage,
-      overflowHidden = false,
       overflow = 'auto',
       scrollToTopOnUpdate = false,
+      ...rest
     },
     ref
   ) => {
@@ -85,7 +83,12 @@ export const List = forwardRef<HTMLUListElement, ListProps>(
     });
 
     const listContent = (
-      <ListEl as={isTable ? 'tbody' : as} ref={ref} variant={value.variant}>
+      <ListEl
+        as={isTable ? 'tbody' : as}
+        ref={ref}
+        variant={value.variant}
+        {...rest}
+      >
         {children}
       </ListEl>
     );
@@ -126,7 +129,7 @@ export const List = forwardRef<HTMLUListElement, ListProps>(
         <ListWrapper
           id={id}
           maxHeight={height}
-          overflow={overflowHidden ? 'hidden' : overflow}
+          overflow={overflow}
           position="relative"
           ref={wrapperRef}
           scrollable={!isEmpty && showShadow}
diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx
@@ -47,12 +47,13 @@ const listVariants = variant({
 
 export interface ListProps
   extends StyleProps<typeof listVariants>,
-    StyleProps<typeof spacingVariants> {}
+    StyleProps<typeof spacingVariants>,
+    StyleProps<typeof system.space> {}
 
-export const ListEl = styled(
-  'ul',
-  styledOptions<'ul'>()
-)<ListProps>(listVariants);
+export const ListEl = styled('ul', styledOptions<'ul'>())<ListProps>(
+  listVariants,
+  system.space
+);
 
 const rowStates = states({
   isOl: {
diff --git a/packages/styleguide/CHANGELOG.md b/packages/styleguide/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [77.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@76.1.1...@codecademy/styleguide@77.0.0) (2025-07-16)
+
+### ⚠ BREAKING CHANGES
+
+- **List:** Add spacing system props to List & remove deprecated props
+
+### Features
+
+- **List:** Add spacing system props to List & remove deprecated props ([097e9eb](https://github.com/Codecademy/gamut/commit/097e9ebbc0b81f211642372fdbda38aeddfded78))
+
+### [76.1.1](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@76.1.0...@codecademy/styleguide@76.1.1) (2025-07-15)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ## [76.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@76.0.1...@codecademy/styleguide@76.1.0) (2025-07-11)
 
 ### Features
diff --git a/packages/styleguide/package.json b/packages/styleguide/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "76.1.0",
+  "version": "77.0.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx
@@ -305,6 +305,12 @@ An entire row can be made interactive to expand the row content. Check over the
 
 <Canvas of={ListStories.ExpandedRowGuide} />
 
+## System props
+
+List has access to the [space system props](https://gamut.codecademy.com/?path=/docs/foundations-system-props--docs#space) for controlling the spacing around the List component. These props can be used to control the margin and padding of the List.
+
+<Canvas of={ListStories.SpaceSystemProps} />
+
 ## Playground
 
 <Canvas sourceState="shown" of={ListStories.Default} />
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
@@ -728,3 +728,14 @@ const ExpandedTemplateRowClick: React.FC<ListProps> = ({ as, variant }) => (
 export const ExpandedRowGuide: Story = {
   render: (args) => <ExpandedTemplateRowClick {...args} />,
 };
+
+export const SpaceSystemProps: Story = {
+  args: {
+    p: 16,
+  },
+  render: (args) => (
+    <Background bg="beige">
+      <ListExample {...args} />
+    </Background>
+  ),
+};
diff --git a/packages/styleguide/src/lib/UX Writing/Component guidelines/Buttons.mdx b/packages/styleguide/src/lib/UX Writing/Component guidelines/Buttons.mdx
@@ -17,36 +17,28 @@ export const parameters = {
 
 <AboutHeader {...parameters} />
 
-Buttons enable our learners to "speak" to us. They click to tell us what they want (i.e. to "Start my free trial" or to "Resume learning") and we respond with the anticipated next step.
+Buttons enable our learners to "speak" to us. They select buttons to tell us what they want (for example, to **Try pro for free** or to **Resume learning**), and we respond with the anticipated next step.
 
 ## Best practices
 
-When approaching writing buttons — whether they're text buttons, fill buttons, or call-to-action buttons — here are a few things to keep in mind:
-
-- **Be specific.** People should know exactly what they're getting when they click on a button. If a button leaves you questioning what will happen when you click on it, adjust the copy to make it more clear. Specificity also plays a big role in ensuring accessibility for learners navigating our content with screen readers.
-- **Use action-oriented language.** Start with an action-oriented verb rather than simply listing where the button will take you (i.e. Use "Take the quiz" instead of "Language quiz").
-- **Emphasize the value people get, rather than how they get it.** When relevant, focus on the benefit/what people are receiving instead of the way they are receiving it. For instance, instead of "Download for free" try "Get the free guide."
+When approaching writing buttons — whether they're text buttons, fill buttons, or call-to-action buttons — here are some things to keep in mind:
+
+- **Be specific.** People should know exactly what they're getting or what happens next when they select a button. If a button leaves you unsure, adjust the copy to make it more clear. Specificity also plays a big role in ensuring accessibility for learners navigating our content with screen readers.
+- **Use action-oriented language.** Start with an action-oriented verb rather than simply listing where the button will take you.\
+  Example: use **Take the quiz** instead of "Language quiz"
+- **Emphasize the value people get**, rather than how they get it.\
+  Example: **Try Pro for free** instead of "Opt in"
+- **Use the established system patterns** for navigational and purely functional buttons.\
+  Examples: **Next**, **Back**, **Close**
+- **Use the same word to refer to the same thing** to foster trust and prioritize clarity.\
+  Examples: **Go to payment**, **Complete payment**, **Cancel payment**
+- **Avoid using pronouns**, on the actual button because in the micro-interaction, the speaker can be either Codecademy or the learner.\
+  Example: **Go to dashboard,** not "Go to your dashboard" or "Go to my dashboard"
 - **When in doubt, A/B test!** Buttons — specifically call-to-action (CTA) button copy can have a major impact on conversion. If you're undecided about which CTA is best, test — especially for high-impact projects.
 
-### Fill buttons
-
-- **Length:** Keep to a maximum of 3 words (unless more words are necessary for clarity).
-- **Capitalization:** Use sentence case, capitalizing only proper nouns.
-
-### Text buttons
-
-- **Length:** Keep to a maximum of 3 words (unless more words are necessary for clarity).
-- **Capitalization:** Use sentence case, capitalizing only proper nouns.
-- **Arrow usage:** Include → after the text when clicking brings users to a new surface. There should always be a space between the text and the arrow.
-
-### CTA buttons
-
-- **Length:** Keep to a maximum of 3 words (unless more words are necessary for clarity).
-- **Capitalization:** Use sentence case, capitalizing only proper nouns.
-
-## Checklist
+## Checklist for writing button labels
 
-- For buttons, is your copy 3 words or less?
-- For buttons, have you used action-oriented language?
-- Have you used sentence case, only capitalizing proper nouns?
 - Does the copy make it clear where the button will take learners?
+- Does the button lead with an actionable verb?
+- Is the microcopy 3 words or less (especially for the primary button)?
+- Have you used sentence case, only capitalizing [proper nouns in the **Codecademy glossary**](https://skillsoftdev.atlassian.net/wiki/spaces/UXW/database/4447175693?savedViewId=9b4c57a9-0cfb-42b0-97c5-08a87e8a2c84)?

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@codecademy/gamut",`
`3`	`3`	`"description": "Styleguide & Component library for Codecademy",`
`4`		`- "version": "65.1.0",`
	`4`	`+ "version": "66.0.0",`
`5`	`5`	`"author": "Codecademy Engineering <[email protected]>",`
`6`	`6`	`"dependencies": {`
`7`	`7`	`"@codecademy/gamut-icons": "9.46.1",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@codecademy/styleguide",`
`3`	`3`	`"description": "Styleguide & Component library for codecademy.com",`
`4`		`- "version": "76.1.0",`
	`4`	`+ "version": "77.0.0",`
`5`	`5`	`"author": "Codecademy Engineering",`
`6`	`6`	`"license": "MIT",`
`7`	`7`	`"publishConfig": {`