@arbor-education/design-system.components 4.7.0-alpha.0 → 4.7.0

package/src/components/fileUpload/FileUpload.tsx

@@ -4,15 +4,25 @@ import { Card } from 'Components/card/Card';
 import type { IconName } from 'Components/icon/allowedIcons';
 import { Icon } from 'Components/icon/Icon';
 import { Separator } from 'Components/separator/Separator';
-import type { ReactNode } from 'react';
+import { useState, type AnchorHTMLAttributes, type ReactElement, type ReactNode } from 'react';
 import Dropzone from 'react-dropzone';
 import { Progress } from 'Components/progress/Progress';
+import type { WidgetRenderLinkArgs } from 'Components/widget/types';
+import { FileUploadLinkModal, type FileUploadLink } from './FileUploadLinkModal.js';
+
+export type { FileUploadLink };
+
+type LinkAnchorProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'children'>;
 
 type UploadedFile = {
   fileName: string;
   icon?: IconName;
-  fileType: string;
-  fileSize: string;
+  fileType?: string;
+  fileSize?: string;
+  href?: string;
+  linkProps?: LinkAnchorProps;
+  renderLink?: (args: WidgetRenderLinkArgs) => ReactElement;
+  onEdit?: (link: FileUploadLink) => void;
   onDownload?: () => void;
   onDelete: () => void;
   progressPercentage?: number;
@@ -24,6 +34,21 @@ export type FileUploadProps = {
   uploadedFiles: UploadedFile[];
   uploadFiles: (files: File[]) => void;
   dropzoneContent?: ReactNode;
+  onAddLink?: (link: FileUploadLink) => void;
+};
+
+type LinkPopupState = { mode: 'add' } | { mode: 'edit'; index: number } | null;
+
+const renderFileLink = ({ href = '', linkProps, renderLink }: UploadedFile, children: ReactNode) => {
+  const className = 'ds-file-upload__file-link';
+  if (renderLink) {
+    return renderLink({ href, className, children, linkProps });
+  }
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer" className={className} {...linkProps}>
+      {children}
+    </a>
+  );
 };
 
 export const FileUpload = (props: FileUploadProps) => {
@@ -31,14 +56,39 @@ export const FileUpload = (props: FileUploadProps) => {
     className,
     uploadedFiles,
     uploadFiles,
-    dropzoneContent = (
+    onAddLink,
+  } = props;
+
+  const [linkPopup, setLinkPopup] = useState<LinkPopupState>(null);
+
+  const dropzoneContent = props.dropzoneContent ?? (
+    <>
       <p>
-        Drag and drop, or
-        {' '}
-        <Button variant="text-link">click to upload</Button>
+        {onAddLink
+          ? (
+              <>
+                Drag and drop,
+                {' '}
+                <Button
+                  variant="text-link"
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setLinkPopup({ mode: 'add' });
+                  }}
+                >
+                  add a link
+                </Button>
+                {' '}
+                or
+              </>
+            )
+          : 'Drag and drop or'}
       </p>
-    ),
-  } = props;
+      <Button variant="secondary">Browse files</Button>
+    </>
+  );
+
+  const editedFile = linkPopup?.mode === 'edit' ? uploadedFiles[linkPopup.index] : undefined;
 
   return (
     <div
@@ -58,7 +108,7 @@ export const FileUpload = (props: FileUploadProps) => {
               {...getRootProps()}
               className="ds-file-upload__dropzone-input"
             >
-              <input {...getInputProps()} />
+              <input {...getInputProps({ 'aria-label': 'Upload files' })} />
               <div className="ds-file-upload__dropzone-content">
                 <span className="ds-file-upload__icon-wrapper">
                   <Icon
@@ -75,19 +125,45 @@ export const FileUpload = (props: FileUploadProps) => {
           </Card>
         )}
       </Dropzone>
+      {linkPopup?.mode === 'add' && onAddLink && (
+        <FileUploadLinkModal
+          title="Add URL attachment"
+          submitLabel="Add"
+          onSubmit={(link) => {
+            onAddLink(link);
+            setLinkPopup(null);
+          }}
+          onCancel={() => setLinkPopup(null)}
+        />
+      )}
+      {editedFile?.href && editedFile.onEdit && (
+        <FileUploadLinkModal
+          title="Update URL attachment"
+          submitLabel="Update"
+          initialLink={{ url: editedFile.href, name: editedFile.fileName }}
+          onSubmit={(link) => {
+            editedFile.onEdit?.(link);
+            setLinkPopup(null);
+          }}
+          onCancel={() => setLinkPopup(null)}
+        />
+      )}
       {uploadedFiles.length > 0 && (
         <Card className="ds-file-upload__file-list">
           {uploadedFiles.map((file, index) => {
             const {
               fileName,
-              icon = 'file',
               fileSize,
               fileType,
+              href,
+              onEdit,
               onDelete,
               onDownload,
               hasUploadFailed,
               progressPercentage,
             } = file;
+            const icon = file.icon ?? (href ? 'link' : 'file');
+            const nameNode = <span className="ds-file-upload__file-name">{fileName}</span>;
             return (
               <div key={fileName} className="ds-file-upload__file-outer">
                 <span className="ds-file-upload__file">
@@ -95,7 +171,7 @@ export const FileUpload = (props: FileUploadProps) => {
                     <Icon size={24} name={icon} color="var(--color-brand-600)" />
                   </span>
                   <span className="ds-file-upload__file-details">
-                    <span className="ds-file-upload__file-name">{fileName}</span>
+                    {href ? renderFileLink(file, nameNode) : nameNode}
                     {
                       hasUploadFailed
                         ? (
@@ -105,9 +181,27 @@ export const FileUpload = (props: FileUploadProps) => {
                               Upload failed
                             </span>
                           )
-                        : <span className="ds-file-upload__file-meta">{`${fileType}, ${fileSize}`}</span>
+                        : <span className="ds-file-upload__file-meta">{href ?? `${fileType}, ${fileSize}`}</span>
                     }
                   </span>
+                  {href && (
+                    <Button
+                      variant="secondary"
+                      isRound
+                      onClick={() => navigator.clipboard.writeText(href)}
+                    >
+                      <Icon name="copy" screenReaderText="Copy link" />
+                    </Button>
+                  )}
+                  {href && onEdit && (
+                    <Button
+                      variant="secondary"
+                      isRound
+                      onClick={() => setLinkPopup({ mode: 'edit', index })}
+                    >
+                      <Icon name="pencil" screenReaderText="Edit link" />
+                    </Button>
+                  )}
                   {onDownload && (
                     <Button
                       variant="secondary"
@@ -123,7 +217,7 @@ export const FileUpload = (props: FileUploadProps) => {
                       isRound
                       onClick={onDelete}
                     >
-                      <Icon name="trash" screenReaderText="Delete file" />
+                      <Icon name="trash" screenReaderText={href ? 'Delete link' : 'Delete file'} />
                     </Button>
                   )}
                 </span>
@@ -132,6 +226,7 @@ export const FileUpload = (props: FileUploadProps) => {
                     <Progress
                       value={progressPercentage}
                       className="ds-file-upload__progress-bar"
+                      aria-label="Upload progress bar"
                       indicatorClassName={classNames('ds-file-upload__progress-bar-indicator', {
                         'ds-file-upload__progress-bar-indicator--failed': hasUploadFailed,
                       })}

package/src/components/fileUpload/FileUploadLinkModal.tsx

@@ -0,0 +1,109 @@
+import { Button } from 'Components/button/Button';
+import { FormField } from 'Components/formField/FormField';
+import { Modal } from 'Components/modal/Modal';
+import { useId, useState, type FormEvent } from 'react';
+
+export type FileUploadLink = {
+  url: string;
+  name: string;
+};
+
+type FileUploadLinkModalProps = {
+  title: string;
+  submitLabel: string;
+  initialLink?: FileUploadLink;
+  onSubmit: (link: FileUploadLink) => void;
+  onCancel: () => void;
+};
+
+type LinkErrors = Partial<Record<keyof FileUploadLink, string>>;
+
+const isHttpUrl = (value: string) => {
+  try {
+    const { protocol } = new URL(value);
+    return protocol === 'http:' || protocol === 'https:';
+  }
+  catch {
+    return false;
+  }
+};
+
+const validate = ({ url, name }: FileUploadLink): LinkErrors => {
+  const errors: LinkErrors = {};
+  if (!name) {
+    errors.name = 'Name is required.';
+  }
+  if (!url) {
+    errors.url = 'URL is required.';
+  }
+  else if (!isHttpUrl(url)) {
+    errors.url = 'Enter a valid URL starting with http:// or https://.';
+  }
+  return errors;
+};
+
+export const FileUploadLinkModal = (props: FileUploadLinkModalProps) => {
+  const { title, submitLabel, initialLink, onSubmit, onCancel } = props;
+  const formId = useId();
+  const nameId = useId();
+  const urlId = useId();
+  const [url, setUrl] = useState(initialLink?.url ?? '');
+  const [name, setName] = useState(initialLink?.name ?? '');
+  const [errors, setErrors] = useState<LinkErrors>({});
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const link = { url: url.trim(), name: name.trim() };
+    const validationErrors = validate(link);
+    setErrors(validationErrors);
+    if (Object.keys(validationErrors).length === 0) {
+      onSubmit(link);
+    }
+  };
+
+  return (
+    <Modal open title={title} closeHandler={onCancel}>
+      <Modal.Body>
+        <form
+          id={formId}
+          className="ds-file-upload__link-form"
+          onSubmit={handleSubmit}
+          noValidate
+        >
+          <FormField
+            inputType="text"
+            id={nameId}
+            label="Name of link"
+            errorText={errors.name}
+            inputProps={{
+              value: name,
+              onChange: (event) => {
+                setName(event.target.value);
+                setErrors(previous => ({ ...previous, name: undefined }));
+              },
+            }}
+          />
+          <FormField
+            inputType="text"
+            id={urlId}
+            label="Paste your link URL here"
+            errorText={errors.url}
+            inputProps={{
+              type: 'url',
+              value: url,
+              placeholder: 'https://',
+              onChange: (event) => {
+                setUrl(event.target.value);
+                setErrors(previous => ({ ...previous, url: undefined }));
+              },
+            }}
+          />
+        </form>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button type="button" variant="secondary" onClick={onCancel}>Cancel</Button>
+        <Button type="submit" form={formId}>{submitLabel}</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};

package/src/components/fileUpload/fileUpload.scss

@@ -12,6 +12,7 @@
 
   &__file-details {
     flex-grow: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
   }
@@ -22,10 +23,32 @@
   }
 
   &__file-meta {
-    color: var(--color-grey-500);
+    color: var(--color-grey-600);
     font-size: var(--font-size-2-13);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
+  &__file-link {
+    color: inherit;
+    text-decoration: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover .ds-file-upload__file-name {
+      text-decoration: underline;
+    }
+  }
+
+  &__link-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium);
+  }
+
+
   &__icon-wrapper {
     background-color: var(--color-brand-050);
     border-radius: var(--border-radius-small);

package/src/components/formField/inputs/text/TextInput.tsx

@@ -12,6 +12,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, re
     hasError,
     className = '',
     disabled = false,
+    type = 'text',
     ...rest
   } = props;
 
@@ -30,6 +31,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, re
       ref={ref}
       className={inputClasses}
       disabled={disabled}
+      type={type}
       {...rest}
     />
   );

package/src/components/kpiCard/KPICard.stories.tsx

@@ -248,7 +248,7 @@ const WithProgressTemplate = () => (
   <div style={{ maxWidth: '320px' }}>
     <KPICard label="Attendance rate" value={94.2} isPercentage>
       <div style={{ marginTop: 'var(--spacing-small)' }}>
-        <Progress value={94.2} max={100} />
+        <Progress value={94.2} max={100} aria-label="Attendance rate progress" />
       </div>
     </KPICard>
   </div>
@@ -368,7 +368,7 @@ import { KPICard, Progress } from '@arbor-education/design-system.components';
 function WithProgressBarExample() {
   return (
     <KPICard label="Attendance rate" value={94.2} isPercentage>
-      <Progress value={94.2} max={100} />
+      <Progress value={94.2} max={100} aria-label="Attendance rate progress" />
     </KPICard>
   );
 }

package/src/components/sideNavigation/SideNavigation.stories.tsx

@@ -28,8 +28,10 @@ const DESCRIPTION_INTRO = [
   'SideNavigation supports two mutually exclusive APIs:',
   '',
   '1. **Data-driven** — pass an `items` array of `SideNavigation.Node` objects and let the component render the tree.',
-  '2. **Composable** — build the tree yourself from `SideNavigation.Title`, `SideNavigation.Group`, and',
-  '   `SideNavigation.Item` as JSX children.',
+  '2. **Composable** — build the tree yourself from `SideNavigation.Group` and `SideNavigation.Item` as JSX children.',
+  '',
+  'Set the visible heading with the `title` prop, which works with either API. `SideNavigation.Title` is a list',
+  'item for use *inside* `<SideNavigation>` in the composable API; do not render it outside the component.',
   '',
   '> **`items` and `children` are mutually exclusive.** If both are passed, `items` silently wins and `children`',
   '> is dropped entirely — no warning, no error.',
@@ -101,6 +103,8 @@ const DEVELOPER_NOTES = [
   '',
   '- The root renders a `<nav aria-label>` (default `"Side navigation"`) — override with a meaningful value',
   '  when a page has more than one nav landmark',
+  '- When `title` is set, the `<nav>` is named by the visible heading via `aria-labelledby`, so `ariaLabel` is',
+  '  ignored; the heading is an `<h2>` outside the list, not a child of the `<ul>`',
   '- Groups render `aria-expanded` + `aria-controls` on the toggle button, with a genuinely `aria-hidden`',
   '  child list when collapsed',
   '- The favourite button exposes `aria-pressed` and uses `favouriteTooltip` as its `aria-label` — the tooltip',

package/src/components/sideNavigation/SideNavigation.test.tsx

@@ -106,4 +106,25 @@ describe('SideNavigation', () => {
 
     expect(screen.getByText('Daily Attendance').closest('a')).toHaveAttribute('data-custom-link', 'true');
   });
+
+  test('renders the title as a heading outside the list and names the nav with it', () => {
+    render(
+      <SideNavigation
+        title="Attendance"
+        items={[{ type: 'item', id: 'daily', label: 'Daily Attendance', href: '/daily' }]}
+      />,
+    );
+
+    const nav = screen.getByRole('navigation', { name: 'Attendance' });
+    const heading = screen.getByRole('heading', { name: 'Attendance', level: 2 });
+    expect(nav).toContainElement(heading);
+    expect(heading.closest('ul')).toBeNull();
+    expect(heading).toHaveClass('ds-side-navigation__title');
+  });
+
+  test('keeps ariaLabel when no title is passed', () => {
+    render(<SideNavigation ariaLabel="Attendance navigation" items={[]} />);
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+    expect(screen.getByRole('navigation', { name: 'Attendance navigation' })).toBeInTheDocument();
+  });
 });

package/src/components/sideNavigation/SideNavigation.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
-import { useMemo } from 'react';
+import { useId, useMemo } from 'react';
 import { Tooltip as TooltipPrimitive } from 'radix-ui';
 import { SideNavigationProvider } from './SideNavigationContext.js';
 import { SideNavigationGroup } from './SideNavigationGroup.js';
@@ -19,6 +19,11 @@ import type {
 
 export type SideNavigationProps = {
   ariaLabel?: string;
+  /**
+   * Visible heading rendered above the list. It sits outside the `<ul>`, so it is valid in both
+   * APIs. When set, it names the `<nav>` via `aria-labelledby`, which takes precedence over `ariaLabel`.
+   */
+  title?: string;
   items?: SideNavigationNode[];
   renderLink?: (args: SideNavigationRenderLinkArgs) => React.ReactElement;
 } & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
@@ -52,6 +57,7 @@ function renderNodes(nodes: SideNavigationNode[]): React.ReactNode {
 const SideNavigationImpl = (props: SideNavigationProps) => {
   const {
     ariaLabel = 'Side navigation',
+    title,
     items,
     renderLink,
     className,
@@ -59,12 +65,23 @@ const SideNavigationImpl = (props: SideNavigationProps) => {
     ...rest
   } = props;
 
+  const titleId = useId();
   const contextValue = useMemo(() => ({ renderLink }), [renderLink]);
 
   return (
     <TooltipPrimitive.Provider delayDuration={400}>
       <SideNavigationProvider value={contextValue}>
-        <nav aria-label={ariaLabel} className={classNames('ds-side-navigation', className)} {...rest}>
+        <nav
+          aria-label={title ? undefined : ariaLabel}
+          aria-labelledby={title ? titleId : undefined}
+          className={classNames('ds-side-navigation', className)}
+          {...rest}
+        >
+          {title && (
+            <h2 id={titleId} className="ds-side-navigation__title">
+              {title}
+            </h2>
+          )}
           <ul className="ds-side-navigation__list">
             {items ? renderNodes(items) : children}
           </ul>

package/src/components/sideNavigation/SideNavigationTitle.tsx

@@ -6,8 +6,10 @@ export type SideNavigationTitleProps = HTMLAttributes<HTMLHeadingElement>;
 export const SideNavigationTitle = (props: SideNavigationTitleProps) => {
   const { className, children, ...rest } = props;
   return (
-    <h2 className={classNames('ds-side-navigation__title', className)} {...rest}>
-      {children}
-    </h2>
+    <li>
+      <h2 className={classNames('ds-side-navigation__title', className)} {...rest}>
+        {children}
+      </h2>
+    </li>
   );
 };

package/src/components/sidebar/Sidebar.stories.tsx

@@ -146,10 +146,7 @@ const DEVELOPER_NOTES = [
   '    </Sidebar.Item>',
   '  </Sidebar>',
   '  {panelOpen && (',
-  '    <div style={{ display: \'flex\', flexDirection: \'column\' }}>',
-  '      <SideNavigation.Title>Attendance</SideNavigation.Title>',
-  '      <SideNavigation id="side-panel" items={navItems} />',
-  '    </div>',
+  '    <SideNavigation id="side-panel" title="Attendance" items={navItems} />',
   '  )}',
   '</div>',
   '```',
@@ -398,12 +395,7 @@ const WithPanelTemplate = () => {
           <Icon name="date" size={24} />
         </SidebarItem>
       </Sidebar>
-      {open && (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <SideNavigation.Title>Attendance</SideNavigation.Title>
-          <SideNavigation id="story-panel" items={basePanelNavItems} />
-        </div>
-      )}
+      {open && <SideNavigation id="story-panel" title="Attendance" items={basePanelNavItems} />}
     </div>
   );
 };
@@ -563,12 +555,7 @@ function WithPanelExample() {
 
       {/* SideNavigation is a separate companion component — not a sub-component of Sidebar. */}
       {/* It is styled as a panel by default, so no extra wrapper class is needed. */}
-      {open && (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <SideNavigation.Title>Attendance</SideNavigation.Title>
-          <SideNavigation id="side-panel" items={navItems} />
-        </div>
-      )}
+      {open && <SideNavigation id="side-panel" title="Attendance" items={navItems} />}
     </div>
   );
 }

package/src/components/table/columnFilters/TimeFilter/TimeFilter.test.tsx

@@ -33,7 +33,7 @@ describe('TimeFilter', () => {
     expect(screen.getByRole('button', { name: /After/i })).toBeInTheDocument();
     const timeInput = container.querySelector('input[type="time"]');
     expect(timeInput).toHaveValue('14:30');
-    expect(screen.getByRole('button', { name: 'Clear this filter' })).toHaveTextContent('Reset time');
+    expect(screen.getByRole('button', { name: 'Reset time filter' })).toHaveTextContent('Reset time');
   });
 
   test('calls onModelChange when filter type changes', async () => {
@@ -61,7 +61,7 @@ describe('TimeFilter', () => {
       <TimeFilter model={{ filterType: FILTER_TYPES.AFTER as FilterType, pivot: '14:30' }} onModelChange={onModelChange} />,
     );
     expect(screen.getByRole('button', { name: /After/i })).toBeInTheDocument();
-    const resetButton = screen.getByRole('button', { name: 'Clear this filter' });
+    const resetButton = screen.getByRole('button', { name: 'Reset time filter' });
     await userEvent.click(resetButton);
     expect(onModelChange).toHaveBeenLastCalledWith({ filterType: FILTER_TYPES.BEFORE as FilterType, pivot: '' });
     expect(screen.getByRole('button', { name: /Before/i })).toBeInTheDocument();

package/src/components/table/columnFilters/TimeFilter/TimeFilter.tsx

@@ -112,12 +112,15 @@ export const TimeFilter = (props: TimeFilterProps) => {
           />
           <input
             className="ds-column-filter-time__input"
+            aria-label="Time"
             onChange={handlePivotChange}
             type="time"
             value={pivot}
           />
         </div>
-        <FilterResetButton onClick={handleResetClick}>Reset time</FilterResetButton>
+        <FilterResetButton onClick={handleResetClick} ariaLabel="Reset time filter">
+          Reset time
+        </FilterResetButton>
       </div>
     </PopupParentContext.Provider>
   );

package/src/components/table/columnFilters/filterResetButton/FilterResetButton.tsx

@@ -2,15 +2,16 @@ import { Button } from 'Components/button/Button';
 
 type FilterResetButtonProps = {
   onClick: () => void;
+  ariaLabel?: string;
   children?: React.ReactNode;
 };
 
 export function FilterResetButton(props: FilterResetButtonProps) {
-  const { onClick, children = 'Reset' } = props;
+  const { onClick, ariaLabel, children = 'Reset' } = props;
   return (
     <Button
       className="ds-column-filter__reset-button"
-      aria-label="Clear this filter"
+      aria-label={ariaLabel}
       onClick={onClick}
       variant="secondary"
       size="S"

package/src/components/table/pagination/PageSizeSelector.tsx

@@ -59,7 +59,7 @@ export const PageSizeSelector = (props: PageSizeSelectorProps) => {
   return (
     <Dropdown>
       <Dropdown.Trigger>
-        <Button variant="dropdown" aria-label="Select page size">
+        <Button variant="dropdown" aria-label={`Page size ${selectedPageSize}`}>
           {selectedPageSize}
           <Icon name="chevron-down" />
         </Button>

package/src/components/table/pagination/Pagination.test.tsx

@@ -712,7 +712,7 @@ describe('Table Pagination', () => {
         mockGridApi as GridApi,
       );
 
-      const trigger = screen.getByLabelText('Select page size');
+      const trigger = screen.getByLabelText('Page size 100');
       await userEvent.click(trigger);
 
       // Click on a numeric option - it should be normalized to a number
@@ -789,7 +789,7 @@ describe('Table Pagination', () => {
         expect(screen.getByText('Go to next page')).toBeInTheDocument();
         expect(screen.getByText('Go to last page')).toBeInTheDocument();
 
-        expect(screen.getByLabelText('Select page size')).toBeInTheDocument();
+        expect(screen.getByLabelText(/^Page size /)).toBeInTheDocument();
       });
     });
 
@@ -831,7 +831,7 @@ describe('Table Pagination', () => {
         />,
       );
 
-      const trigger = screen.getByLabelText('Select page size');
+      const trigger = screen.getByLabelText('Page size 5');
       expect(trigger.textContent).toContain('5');
       await userEvent.click(trigger);
       expect(await screen.findByText('15')).toBeInTheDocument();

package/.changeset/twenty-groups-wonder.md

@@ -1,5 +0,0 @@
----
-"@arbor-education/design-system.components": patch
----
-
-MIS-75857 Add aria-label to match the text on a pill

package/.changeset/yellow-falcons-search.md

@@ -1,5 +0,0 @@
----
-"@arbor-education/design-system.components": patch
----
-
-MIS-70965 ⬆️ update AG-Grid to v35