Kl gmt 1625 gamut beta hiddentext

.github/workflows/publish-alpha.yml

@@ -27,6 +27,8 @@ jobs:
     runs-on: ubuntu-22.04
     timeout-minutes: 30
     steps:
+      - uses: actions/checkout@v4
+
       - uses: ./.github/actions/prerelease-publish
         with:
           node-auth-token: ${{ secrets.NODE_AUTH_TOKEN }}

.nx/version-plans/version-plan-1748553600000.md

@@ -0,0 +1,9 @@
+---
+gamut: major
+---
+
+Remove deprecated `HiddenText` component
+
+- **BREAKING:** `HiddenText` is no longer exported from `@codecademy/gamut`
+- Migrate to `<Text screenreader>` for visually hidden, screen-reader-accessible text
+- Removed Storybook docs for `HiddenText`; use the `Text` screenreader utility docs instead

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -62,7 +62,6 @@ exports[`Gamut Exported Keys 1`] = `
   "GridBox",
   "GridForm",
   "GridFormContent",
-  "HiddenText",
   "IconButton",
   "iFrameWrapper",
   "InfoTip",

packages/gamut/agent-tools/DESIGN.Codecademy.md

@@ -481,7 +481,7 @@ Components are organized into three tiers:
 
 ### Atoms — foundational, single-purpose
 
-Badge, Button (FillButton, StrokeButton, CTAButton, TextButton, IconButton), ButtonBase, Card, Checkbox, CodeBlock, ColorMode, Drawer, FlexBox, FormGroup, GridBox, HiddenText, Icon, Input, Label, Loader, Radio, Select, Spinner, Tag, TextArea, Toggle, Tooltip
+Badge, Button (FillButton, StrokeButton, CTAButton, TextButton, IconButton), ButtonBase, Card, Checkbox, CodeBlock, ColorMode, Drawer, FlexBox, FormGroup, GridBox, Icon, Input, Label, Loader, Radio, Select, Spinner, Tag, TextArea, Toggle, Tooltip
 
 ### Molecules — composed of atoms, handle a discrete task
 

packages/gamut/agent-tools/rules/accessibility.mdc

@@ -56,7 +56,7 @@ Match `htmlFor` on `<FormGroupLabel>` with the `id` on the control. Base `<FormG
 
 ## Screen-reader-only text
 
-Use `<Text screenreader>` for visually hidden but announced content. `<HiddenText>` is deprecated.
+Use `<Text screenreader>` for visually hidden but announced content.
 
 ## Color and contrast
 

packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx

@@ -5,9 +5,9 @@ import * as React from 'react';
 
 import { FormError, FormGroup, FormGroupLabel, FormGroupProps } from '..';
 import { Anchor } from '../Anchor';
-import { HiddenText } from '../HiddenText';
 import { Markdown } from '../Markdown';
 import { InfoTipSubComponentProps } from '../Tip/InfoTip/type-utils';
+import { Text } from '../Typography';
 import { ConnectedField, FieldProps, SubmitContextProps } from './types';
 import { getErrorMessage, useField } from './utils';
 
@@ -95,7 +95,7 @@ export function ConnectedFormGroup<T extends ConnectedField>({
 
   return (
     <FormGroup spacing={hideLabel ? 'tight' : spacing}>
-      {hideLabel ? <HiddenText>{renderedLabel}</HiddenText> : renderedLabel}
+      {hideLabel ? <Text screenreader>{renderedLabel}</Text> : renderedLabel}
       <Component
         {...(rest as any)}
         aria-describedby={errorId}

packages/gamut/src/ConnectedForm/SubmitButton.tsx

@@ -4,8 +4,8 @@ import { FieldValues, FormState } from 'react-hook-form';
 
 import { Box, FlexBox } from '../Box';
 import { ButtonProps, FillButton } from '../Button';
-import { HiddenText } from '../HiddenText';
 import { Spinner } from '../Loading/Spinner';
+import { Text } from '../Typography';
 import { useSubmitState } from './utils';
 
 export interface SubmitContextProps {
@@ -50,7 +50,9 @@ export const SubmitButton: React.FC<SubmitButtonProps> = ({
         {isLoading && (
           <FlexBox center inset={0} position="absolute">
             <Spinner size={16} />
-            <HiddenText aria-live="polite">Loading</HiddenText>
+            <Text aria-live="polite" screenreader>
+              Loading
+            </Text>
           </FlexBox>
         )}
       </Button>

packages/gamut/src/GridForm/GridFormInputGroup/index.tsx

@@ -5,9 +5,9 @@ import { UseFormReturn } from 'react-hook-form';
 
 import { Anchor } from '../../Anchor';
 import { FormError, FormGroup, FormGroupLabel } from '../../Form';
-import { HiddenText } from '../../HiddenText';
 import { Column } from '../../Layout';
 import { Markdown } from '../../Markdown';
+import { Text } from '../../Typography';
 import {
   GridFormField,
   GridFormHiddenField,
@@ -169,7 +169,7 @@ export const GridFormInputGroup: React.FC<GridFormInputGroupProps> = ({
   return (
     <Column rowspan={field?.rowspan ?? 1} size={field?.size}>
       <FormGroup spacing={isTightCheckbox ? 'tight' : 'padded'}>
-        {field.hideLabel ? <HiddenText>{label}</HiddenText> : label}
+        {field.hideLabel ? <Text screenreader>{label}</Text> : label}
         {getInput()}
         {errorMessage && (
           <FormError

packages/gamut/src/index.tsx

@@ -31,7 +31,6 @@ export type {
   SelectDropdownGroup,
 } from './Form/SelectDropdown';
 export * from './GridForm';
-export * from './HiddenText';
 export * from './Layout/Column';
 export * from './Layout/LayoutGrid';
 export * from './List';

packages/styleguide/src/lib/Organisms/GridForm/Buttons.stories.tsx

@@ -92,6 +92,8 @@ export const SubmitButtonInline: Story = {
         name: 'simple-text',
         type: 'text',
         size: 6,
+        // WILL REMOVE BEFORE MERGING
+        hideLabel: true,
       },
     ],
     submit: {

packages/styleguide/src/lib/Typography/About.mdx

@@ -7,7 +7,6 @@ import {
 } from '~styleguide/blocks';
 
 import { parameters as anchorParameters } from './Anchor/Anchor.mdx';
-import { parameters as hiddenTextParameters } from './HiddenText/HiddenText.mdx';
 import { parameters as textParameters } from './Text/Text.mdx';
 
 export const parameters = {
@@ -25,9 +24,5 @@ Foundations make up the smallest scale design values that comprise a design syst
 Sometimes referred to elsewhere as "tokens", they are the abstract units that comprise and stitch together our atoms, molecules, and organisms.
 
 <TableOfContents
-  links={addParentPath(parameters.title, [
-    anchorParameters,
-    hiddenTextParameters,
-    textParameters,
-  ])}
+  links={addParentPath(parameters.title, [anchorParameters, textParameters])}
 />