@hubspot/cms-component-library 0.1.0 → 0.2.0

package/components/componentLibrary/Link/types.ts

@@ -1,26 +1,35 @@
 import { LinkFieldDefaults } from '@hubspot/cms-components/fields';
 import { LinkFieldValue } from '../utils/linkField.js';
 
-type BaseLinkProps = {
+export type BaseLinkProps = {
   variant?: 'primary' | 'secondary' | 'tertiary';
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
 };
 
-type LinkWithField = BaseLinkProps & {
-  linkField: LinkFieldValue;
-  href?: never;
-  target?: never;
-  rel?: never;
-};
+// added this so that TS doesn't get mad about duplicate properties
+// since we want to enforce required props in some of these type definitions
+export type LinkHTMLProps = Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  'href' | 'target' | 'rel' | 'className' | 'style' | 'children'
+>;
 
-type LinkWithoutField = BaseLinkProps & {
-  linkField?: never;
-  href: string;
-  target?: '_self' | '_blank' | '_parent' | '_top';
-  rel?: string;
-};
+type LinkWithField = BaseLinkProps &
+  LinkHTMLProps & {
+    linkField: LinkFieldValue;
+    href?: never;
+    target?: never;
+    rel?: never;
+  };
+
+type LinkWithoutField = BaseLinkProps &
+  LinkHTMLProps & {
+    linkField?: never;
+    href: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+  };
 
 export type LinkProps = LinkWithField | LinkWithoutField;
 

package/components/componentLibrary/List/ContentFields.tsx

@@ -1,11 +1,11 @@
 import { ChoiceField } from '@hubspot/cms-components/fields';
 import type { ContentFieldsProps } from './types.js';
 
-export default function ContentFields({
+const ContentFields = ({
   listTypeName = 'listType',
   listTypeLabel = 'List type',
   listTypeDefault = 'unordered',
-}: ContentFieldsProps) {
+}: ContentFieldsProps) => {
   return (
     <ChoiceField
       label={listTypeLabel}
@@ -17,4 +17,6 @@ export default function ContentFields({
       ]}
     />
   );
-}
+};
+
+export default ContentFields;

package/components/componentLibrary/List/ListItem/ContentFields.tsx

@@ -1,23 +1,12 @@
 import { TextField } from '@hubspot/cms-components/fields';
 import type { ContentFieldsProps } from './types.js';
-import Icon from '../../Icon/index.js';
 
-export default function ContentFields({
+const ContentFields = ({
   textName = 'text',
   textLabel = 'Item text',
   textDefault = 'Add a list item here.',
-  iconName = 'icon',
-  iconLabel = 'Icon',
-  iconDefault = { name: 'check', unicode: 'f00c', type: 'SOLID' },
-}: ContentFieldsProps) {
-  return (
-    <>
-      <TextField label={textLabel} name={textName} default={textDefault} />
-      <Icon.ContentFields
-        iconName={iconName}
-        iconLabel={iconLabel}
-        iconDefault={iconDefault}
-      />
-    </>
-  );
-}
+}: ContentFieldsProps) => {
+  return <TextField label={textLabel} name={textName} default={textDefault} />;
+};
+
+export default ContentFields;

package/components/componentLibrary/List/ListItem/index.module.scss

@@ -1,16 +1,4 @@
 .listItem {
-  display: flex;
-  align-items: flex-start;
-  column-gap: 8px;
-  color: var(--hscl-list-item-text-color);
-}
-
-.listItemContent {
-  flex: 1;
-}
-
-.listItemDefault {
-  display: list-item;
-  color: var(--hscl-list-item-text-color);
+  color: var(--hscl-list-item-color);
 }
 

package/components/componentLibrary/List/ListItem/index.tsx

@@ -2,45 +2,18 @@ import styles from './index.module.scss';
 import ContentFields from './ContentFields.js';
 import cx from '../../utils/classname.js';
 import { ListItemProps } from './types.js';
-import Icon from '../../Icon/index.js';
 
 const ListItemComponent = ({
-  children = <span>Default list item text</span>,
-  index,
-  itemsFieldPath,
-  iconName = 'icon',
-  iconSize = 16,
-  iconFill,
-  showIcon = true,
-  iconPurpose = 'DECORATIVE',
-  iconTitle,
+  children,
   className = '',
   style = {},
   ...rest
 }: ListItemProps) => {
-  const itemClass = showIcon ? cx(styles.listItem) : cx(styles.listItemDefault);
-  const combinedClasses = cx(itemClass, className);
-
-  const iconFieldPath =
-    itemsFieldPath && index !== undefined
-      ? `${itemsFieldPath}[${index}].${iconName}`
-      : undefined;
+  const combinedClasses = cx(styles.listItem, className);
 
   return (
     <li className={combinedClasses} style={style} {...rest}>
-      {showIcon && iconFieldPath && (
-        <div>
-          <Icon
-            fieldPath={iconFieldPath}
-            height={iconSize}
-            fill={iconFill}
-            showIcon={showIcon}
-            purpose={iconPurpose}
-            title={iconTitle}
-          />
-        </div>
-      )}
-      <span className={styles.listItemContent}>{children}</span>
+      {children}
     </li>
   );
 };

package/components/componentLibrary/List/ListItem/types.ts

@@ -1,19 +1,7 @@
-import {
-  TextFieldDefaults,
-  IconFieldDefaults,
-} from '@hubspot/cms-components/fields';
-import type { IconPurpose } from '../../Icon/types.js';
+import { TextFieldDefaults } from '@hubspot/cms-components/fields';
 
 export type ListItemProps = {
   children?: React.ReactNode;
-  index?: number;
-  itemsFieldPath?: string;
-  iconName?: string;
-  iconSize?: number;
-  iconFill?: string;
-  showIcon?: boolean;
-  iconPurpose?: IconPurpose;
-  iconTitle?: string;
   className?: string;
   style?: React.CSSProperties;
 };
@@ -22,7 +10,4 @@ export type ContentFieldsProps = {
   textName?: string;
   textLabel?: string;
   textDefault?: typeof TextFieldDefaults;
-  iconName?: string;
-  iconLabel?: string;
-  iconDefault?: typeof IconFieldDefaults;
 };

package/components/componentLibrary/List/StyleFields.tsx

@@ -1,26 +1,23 @@
 import { ChoiceField } from '@hubspot/cms-components/fields';
 import type { StyleFieldsProps } from './types.js';
 
-export default function StyleFields({
+const StyleFields = ({
   variantName = 'variant',
   variantLabel = 'Variant',
   variantDefault = 'primary',
-  gapName = 'gap',
-  gapLabel = 'Gap',
-  gapDefault = '0px',
-}: StyleFieldsProps) {
+}: StyleFieldsProps) => {
   return (
-    <>
-      <ChoiceField
-        label={variantLabel}
-        name={variantName}
-        default={variantDefault}
-        choices={[
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
-        ]}
-      />
-    </>
+    <ChoiceField
+      label={variantLabel}
+      name={variantName}
+      default={variantDefault}
+      choices={[
+        ['primary', 'Primary'],
+        ['secondary', 'Secondary'],
+        ['tertiary', 'Tertiary'],
+      ]}
+    />
   );
-}
+};
+
+export default StyleFields;

package/components/componentLibrary/List/index.module.scss

@@ -9,3 +9,6 @@
   }
 }
 
+.noMarker {
+  list-style: none;
+}

package/components/componentLibrary/List/index.tsx

@@ -11,18 +11,21 @@ const ListComponent = ({
   listType = 'unordered',
   variant = 'primary',
   gap = '0px',
+  showMarker = true,
   className = '',
   style = {},
   children,
   ...rest
 }: ListProps) => {
   const ListTag = listType === 'ordered' ? 'ol' : 'ul';
-  const defaultClasses = cx(styles.list);
+  const defaultClasses = cx(styles.list, {
+    [styles.noMarker]: !showMarker,
+  });
   const combinedClasses = cx(defaultClasses, className);
 
   // !todo: placeholder values until we work out how variant system works.
   const cssVariables: CSSVariables = {
-    '--hscl-list-item-text-color': `var(--hscl-listItem-textColor-${variant})`,
+    '--hscl-list-item-color': `var(--hscl-listItem-color-${variant})`,
   };
 
   return (

package/components/componentLibrary/List/llm.txt

@@ -1,6 +1,6 @@
 # List Component
 
-A flexible list component that renders ordered (`<ol>`) or unordered (`<ul>`) lists with customizable spacing, variants, and optional icons for list items.
+A flexible list component that renders ordered (`<ol>`) or unordered (`<ul>`) lists with customizable spacing, variants, and marker visibility.
 
 ## Import path
 ```tsx
@@ -9,7 +9,7 @@ import List, { ListItem } from '@hubspot/cms-component-library/List';
 
 ## Purpose
 
-The List component provides a consistent way to render lists in HubSpot CMS projects. It combines the semantic correctness of native HTML list elements with the flexibility of the Flex component for layout control. The component supports both ordered (numbered) and unordered (bulleted) lists, with an accompanying ListItem component that can display text with optional icons.
+The List component provides a consistent way to render lists in HubSpot CMS projects. It combines the semantic correctness of native HTML list elements with the flexibility of the Flex component for layout control. The component supports both ordered (numbered) and unordered (bulleted) lists, with configurable marker visibility.
 
 ## Compositional Component Pattern
 
@@ -21,15 +21,15 @@ The List component follows a **parent/child compositional pattern**, consisting
 | `ListItem` | Child | `<li>` |
 
 **Why this pattern?**
-- **Separation of concerns**: List handles container semantics (ordered vs unordered, gap, variant), while ListItem handles individual item presentation (text, icons)
-- **Flexibility**: ListItem can be extended or customized independently
+- **Separation of concerns**: List handles container semantics (ordered vs unordered, gap, variant, marker visibility), while ListItem handles individual item presentation
+- **Flexibility**: Modules can pass any content as children to ListItem, including custom icons
 - **HubSpot CMS integration**: Each component has its own field definitions, allowing RepeatedGroup usage for dynamic lists
 - **Type safety**: Props are scoped to their respective components, preventing invalid configurations
 
 **Key relationships:**
 - ListItem should **always** be used inside a List component
-- List passes layout context (gap, variant styling) to children via CSS
-- ListItem handles its own icon resolution via `itemsFieldPath` and `index` props
+- List passes layout context (gap, variant styling, marker visibility) to children via CSS
+- ListItem renders children directly in the `<li>` element
 
 This pattern is distinct from the "Compound Component Pattern" (e.g., `Button.ContentFields`) which attaches field definitions—List uses *both* patterns together.
 
@@ -40,12 +40,12 @@ List/
 ├── index.tsx                     # Main List component with render logic
 ├── types.ts                      # TypeScript type definitions
 ├── ContentFields.tsx             # HubSpot field definitions for list type
-├── StyleFields.tsx               # HubSpot field definitions for variant
+├── StyleFields.tsx               # HubSpot field definitions for variant and marker
 ├── index.module.scss             # CSS module for list styling
 ├── ListItem/
 │   ├── index.tsx                 # ListItem component
 │   ├── types.ts                  # ListItem TypeScript types
-│   ├── ContentFields.tsx         # HubSpot field definitions for list items
+│   ├── ContentFields.tsx         # HubSpot field definitions for list item text
 │   └── index.module.scss         # CSS module for list item styling
 └── stories/
     ├── List.stories.tsx          # Storybook examples
@@ -65,6 +65,7 @@ List/
   listType?: 'ordered' | 'unordered';                     // List type - 'ordered' renders <ol>, 'unordered' renders <ul>
   variant?: 'primary' | 'secondary' | 'tertiary';         // Visual style variant
   gap?: string;                                           // Space between list items (any valid CSS length value, e.g., '16px', '1rem', '0')
+  showMarker?: boolean;                                   // Show list markers (bullets/numbers) - default: true
   className?: string;                                     // Additional CSS classes
   style?: CSSVariables;                                   // Inline styles (including CSS custom properties)
   children?: React.ReactNode;                             // ListItem components
@@ -73,20 +74,12 @@ List/
 
 ### ListItem (Child Component)
 
-**Purpose:** Individual list item component that renders an `<li>` element with optional icon support (falls back to regular bullets or numbers when icons are disabled).
+**Purpose:** Individual list item component that renders an `<li>` element. Children are rendered directly inside the `<li>`.
 
 **Props:**
 ```tsx
 {
-  children?: React.ReactNode;                 // List item content (text, elements, etc.)
-  index?: number;                             // Item index (for field path generation)
-  itemsFieldPath?: string;                    // Parent field path for icon lookup
-  iconName?: string;                          // Field name for icon (default: 'icon')
-  iconSize?: number;                          // Icon size in pixels (default: 16)
-  iconFill?: string;                          // Icon fill color
-  showIcon?: boolean;                         // Toggle icon visibility (default: true)
-  iconPurpose?: 'SEMANTIC' | 'DECORATIVE';    // Icon accessibility role (defaults to 'DECORATIVE')
-  iconTitle?: string;                         // Icon title for screen readers
+  children?: React.ReactNode;                 // List item content (text, elements, icons, etc.)
   className?: string;                         // Additional CSS classes
   style?: React.CSSProperties;                // Inline styles
 }
@@ -100,9 +93,9 @@ List/
 import List, { ListItem } from '@hubspot/cms-component-library/List';
 
 <List listType="unordered" variant="primary">
-  <ListItem showIcon={false}>First item</ListItem>
-  <ListItem showIcon={false}>Second item</ListItem>
-  <ListItem showIcon={false}>Third item</ListItem>
+  <ListItem>First item</ListItem>
+  <ListItem>Second item</ListItem>
+  <ListItem>Third item</ListItem>
 </List>
 ```
 
@@ -112,9 +105,21 @@ import List, { ListItem } from '@hubspot/cms-component-library/List';
 import List, { ListItem } from '@hubspot/cms-component-library/List';
 
 <List listType="ordered" variant="primary">
-  <ListItem showIcon={false}>Step one</ListItem>
-  <ListItem showIcon={false}>Step two</ListItem>
-  <ListItem showIcon={false}>Step three</ListItem>
+  <ListItem>Step one</ListItem>
+  <ListItem>Step two</ListItem>
+  <ListItem>Step three</ListItem>
+</List>
+```
+
+### List without Markers
+
+```tsx
+import List, { ListItem } from '@hubspot/cms-component-library/List';
+
+<List listType="unordered" variant="primary" showMarker={false}>
+  <ListItem>Item without bullet</ListItem>
+  <ListItem>Another item without bullet</ListItem>
+  <ListItem>Third item without bullet</ListItem>
 </List>
 ```
 
@@ -124,37 +129,28 @@ import List, { ListItem } from '@hubspot/cms-component-library/List';
 import List, { ListItem } from '@hubspot/cms-component-library/List';
 
 <List listType="unordered" variant="primary" gap="1rem">
-  <ListItem showIcon={false}>Spaced item one</ListItem>
-  <ListItem showIcon={false}>Spaced item two</ListItem>
-  <ListItem showIcon={false}>Spaced item three</ListItem>
+  <ListItem>Spaced item one</ListItem>
+  <ListItem>Spaced item two</ListItem>
+  <ListItem>Spaced item three</ListItem>
 </List>
 ```
 
-### List Items with Icons
+### List Items with Custom Content (Icons)
+
+When you need icons or custom content in list items, set `showMarker={false}` to hide bullets/numbers, then handle your own layout:
 
 ```tsx
 import List, { ListItem } from '@hubspot/cms-component-library/List';
+import Icon from '@hubspot/cms-component-library/Icon';
 
-<List listType="unordered" variant="primary">
-  <ListItem
-    showIcon={true}
-    iconName="icon"
-    iconSize={20}
-    itemsFieldPath="items"
-    index={0}
-    iconPurpose="DECORATIVE"
-  >
-    Item with icon
+<List listType="unordered" variant="primary" showMarker={false} gap="0.5rem">
+  <ListItem style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+    <Icon name="check" size={16} />
+    <span>Item with custom icon</span>
   </ListItem>
-  <ListItem
-    showIcon={true}
-    iconName="icon"
-    iconSize={20}
-    itemsFieldPath="items"
-    index={1}
-    iconPurpose="DECORATIVE"
-  >
-    Another item with icon
+  <ListItem style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+    <Icon name="check" size={16} />
+    <span>Another item with icon</span>
   </ListItem>
 </List>
 ```
@@ -171,7 +167,7 @@ import List, { ListItem } from '@hubspot/cms-component-library/List';
   className="custom-list-class"
   style={{ maxWidth: '500px' }}
 >
-  <ListItem showIcon={false}>Custom styled item</ListItem>
+  <ListItem>Custom styled item</ListItem>
 </List>
 ```
 
@@ -198,18 +194,22 @@ Configurable props for list type selection:
 
 #### List.StyleFields
 
-Configurable props for variant selection:
+Configurable props for variant and marker selection:
 
 ```tsx
 <List.StyleFields
   variantName="variant"
   variantLabel="Variant"
   variantDefault="primary"
+  showMarkerName="showMarker"
+  showMarkerLabel="Show list markers"
+  showMarkerDefault={true}
 />
 ```
 
 **Fields:**
 - `variant`: ChoiceField for selecting visual style (primary, secondary, tertiary)
+- `showMarker`: BooleanField for toggling marker visibility
 
 **Note:** Gap must be set directly via the `gap` prop on the List component, as there is no field definition for it in StyleFields.
 
@@ -222,15 +222,11 @@ Configurable props for list item content:
   textName="text"
   textLabel="Item text"
   textDefault="Add a list item here."
-  iconName="icon"
-  iconLabel="Icon"
-  iconDefault={{ name: 'check', unicode: 'f00c', type: 'SOLID' }} // FontAwesome icon set
 />
 ```
 
 **Fields:**
 - `text`: TextField for list item text content
-- `icon`: Icon field using Icon.ContentFields
 
 ### Module Usage Example
 
@@ -244,6 +240,7 @@ type FeatureListModuleProps = {
   style?: {
     variant?: 'primary' | 'secondary' | 'tertiary';
     gap?: GapValue;
+    showMarker?: boolean;
   };
   listItems?: Array<{
     text?: string;
@@ -257,22 +254,17 @@ export const Component = ({
 }: FeatureListModuleProps) => {
   const variant = style?.variant ?? 'primary';
   const gap = style?.gap ?? '0px';
+  const showMarker = style?.showMarker ?? true;
 
   return (
     <List
       listType={listType}
       variant={variant}
       gap={gap}
+      showMarker={showMarker}
     >
       {listItems.map(({ text }, index) => (
-        <ListItem
-          key={index}
-          index={index}
-          itemsFieldPath="listItems"
-          iconFill={`var(--hscl-listItem-iconColor-${variant})`}
-        >
-          {text}
-        </ListItem>
+        <ListItem key={index}>{text}</ListItem>
       ))}
     </List>
   );
@@ -299,7 +291,6 @@ import List, { ListItem } from '@hubspot/cms-component-library/List';
 
 const defaultItem = {
   text: 'Add a list item here.',
-  icon: { name: 'check', unicode: 'f00c', type: 'SOLID' }, // FontAwesome icon set
 };
 
 export const fields = (
@@ -342,11 +333,6 @@ The List component uses CSS variables for theming and customization:
 - `--hscl-listItem-textColor-secondary`: Secondary variant text color
 - `--hscl-listItem-textColor-tertiary`: Tertiary variant text color
 
-**List Item Icon:**
-- `--hscl-listItem-iconColor-primary`: Primary variant icon color
-- `--hscl-listItem-iconColor-secondary`: Secondary variant icon color
-- `--hscl-listItem-iconColor-tertiary`: Tertiary variant icon color
-
 ### Custom Styling Example
 
 ```tsx
@@ -359,7 +345,7 @@ import List, { ListItem } from '@hubspot/cms-component-library/List';
     '--hscl-list-item-text-color': '#333333',
   }}
 >
-  <ListItem showIcon={false}>Custom colored item</ListItem>
+  <ListItem>Custom colored item</ListItem>
 </List>
 ```
 
@@ -367,12 +353,12 @@ import List, { ListItem } from '@hubspot/cms-component-library/List';
 
 **List (`index.module.scss`):**
 - `.list`: Base list styles (removes default padding/margin, positions bullets inside)
+- `.withMarker`: Applies `display: list-item` to children (shows bullets/numbers)
+- `.noMarker`: Applies `list-style: none` (hides markers—modules handle their own internal layout)
 - Nested `.list`: Indented styling for nested lists
 
 **ListItem (`ListItem/index.module.scss`):**
-- `.listItem`: Flex display for items with icons
-- `.listItemDefault`: Standard list-item display for items without icons
-- `.listItemContent`: Flex content wrapper
+- `.listItem`: Base list item styles with text color
 
 ## Accessibility
 
@@ -380,45 +366,36 @@ The List component follows accessibility best practices:
 
 - **Semantic HTML**: Renders appropriate elements (`<ol>` for ordered, `<ul>` for unordered)
 - **List Semantics**: Proper `<li>` elements maintain screen reader list navigation
-- **Icon Accessibility**:
-  - `iconPurpose="SEMANTIC"`: Icon conveys meaning (includes accessible title)
-  - `iconPurpose="DECORATIVE"`: Icon is visual only (aria-hidden)
-  - `iconTitle` provides screen reader description for semantic icons
 - **Keyboard Navigation**: Native list keyboard navigation is preserved
 - **Content Structure**: Lists help screen reader users understand grouped content
 
 ## Best Practices
 
 - **Choose the right list type**: Use `ordered` for sequential steps or rankings, `unordered` for non-sequential items
-- **Icon field paths**: When using icons in dynamic lists, always provide `itemsFieldPath` and `index` to correctly resolve icon field paths
-- **showIcon prop**: Set `showIcon={false}` to use default bullet/number styling, `showIcon={true}` for custom icons
+- **Marker visibility**: Use `showMarker={true}` (default) for standard lists, `showMarker={false}` when providing custom markers or icons as children
 - **Consistent variants**: Use the same variant across related lists for visual consistency
 - **Gap selection**: Use any valid CSS length value (e.g., '0', '0.5rem', '1rem', '16px') for spacing between items
 - **Dynamic rendering**: Always provide unique `key` props when mapping arrays to ListItems
 - **CSS Variables**: Override design tokens using CSS variables rather than hardcoding values
-- **Icon colors**: Use `iconFill` prop with variant-based CSS variables for consistent theming (e.g., `iconFill={`var(--hscl-listItem-iconColor-${variant})`}`)
+- **Custom icons**: When using custom icons, set `showMarker={false}` and pass icons as part of ListItem children
+- **Custom content layout**: When using `showMarker={false}`, markers are hidden but no layout is imposed. Modules are responsible for their own internal layout—use `style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}` on ListItem or wrap content in a styled container
 
 ## Common Patterns
 
-### Feature List with Icons
+### Feature List with Custom Icons
 
 ```tsx
 import List, { ListItem } from '@hubspot/cms-component-library/List';
+import Icon from '@hubspot/cms-component-library/Icon';
+
+const itemStyle = { display: 'flex', gap: '8px', alignItems: 'flex-start' };
 
 const FeatureList = ({ features, variant = 'primary' }) => (
-  <List listType="unordered" variant={variant} gap="0.5rem">
+  <List listType="unordered" variant={variant} showMarker={false} gap="0.5rem">
     {features.map((feature, index) => (
-      <ListItem
-        key={index}
-        showIcon={true}
-        iconName="icon"
-        iconSize={20}
-        itemsFieldPath="features"
-        index={index}
-        iconPurpose="DECORATIVE"
-        iconFill={`var(--hscl-listItem-iconColor-${variant})`}
-      >
-        {feature.text}
+      <ListItem key={index} style={itemStyle}>
+        <Icon name="check" size={20} fill={`var(--hscl-listItem-iconColor-${variant})`} />
+        <span>{feature.text}</span>
       </ListItem>
     ))}
   </List>
@@ -433,14 +410,7 @@ import List, { ListItem } from '@hubspot/cms-component-library/List';
 const StepList = ({ steps, variant = 'primary' }) => (
   <List listType="ordered" variant={variant} gap="1rem">
     {steps.map((step, index) => (
-      <ListItem
-        key={index}
-        showIcon={false}
-        index={index}
-        itemsFieldPath="steps"
-      >
-        {step.text}
-      </ListItem>
+      <ListItem key={index}>{step.text}</ListItem>
     ))}
   </List>
 );
@@ -452,13 +422,13 @@ const StepList = ({ steps, variant = 'primary' }) => (
 import List, { ListItem } from '@hubspot/cms-component-library/List';
 
 <List listType="unordered" variant="primary">
-  <ListItem showIcon={false}>Simple item one</ListItem>
-  <ListItem showIcon={false}>Simple item two</ListItem>
-  <ListItem showIcon={false}>Simple item three</ListItem>
+  <ListItem>Simple item one</ListItem>
+  <ListItem>Simple item two</ListItem>
+  <ListItem>Simple item three</ListItem>
 </List>
 ```
 
 ## Related Components
 
 - **Flex**: Used internally for list layout control. The List component extends Flex capabilities.
-- **Icon**: Used internally for rendering icons in ListItem. Can be used standalone for custom implementations.
+- **Icon**: Can be used as children in ListItem for custom icon lists.