@hubspot/cms-component-library 0.3.3 → 0.3.4

package/components/componentLibrary/Card/StyleFields.tsx

@@ -1,35 +1,23 @@
-import { ChoiceField, NumberField } from '@hubspot/cms-components/fields';
+import { ChoiceField } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
   variantLabel = 'Card Variant',
   variantName = 'variant',
   variantDefault = 'elevated',
-  borderRadiusLabel = 'Border Radius',
-  borderRadiusName = 'borderRadius',
-  borderRadiusDefault = 8,
 }: StyleFieldsProps) => {
   return (
-    <>
-      <ChoiceField
-        label={variantLabel}
-        name={variantName}
-        required={true}
-        choices={[
-          ['elevated', 'Elevated (with shadow)'],
-          ['outlined', 'Outlined (with border)'],
-          ['filled', 'Filled (solid background)'],
-        ]}
-        default={variantDefault}
-      />
-      <NumberField
-        label={borderRadiusLabel}
-        name={borderRadiusName}
-        suffix="px"
-        min={0}
-        default={borderRadiusDefault}
-      />
-    </>
+    <ChoiceField
+      label={variantLabel}
+      name={variantName}
+      required={true}
+      choices={[
+        ['elevated', 'Elevated (with shadow)'],
+        ['outlined', 'Outlined (with border)'],
+        ['filled', 'Filled (solid background)'],
+      ]}
+      default={variantDefault}
+    />
   );
 };
 

package/components/componentLibrary/Card/llm.txt

@@ -56,15 +56,6 @@ import Card from '@hubspot/cms-component-library/Card';
 </Card>
 ```
 
-### Card with Custom Border Radius
-
-```tsx
-<Card variant="outlined" borderRadius={16}>
-  <h3>Rounded Card</h3>
-  <p>This card has a larger border radius for a softer appearance.</p>
-</Card>
-```
-
 ### Semantic Article Card
 
 ```tsx
@@ -96,7 +87,7 @@ const features = [
 ### Card with Rich Content
 
 ```tsx
-<Card variant="outlined" borderRadius={12}>
+<Card variant="outlined">
   <h3>Product Features</h3>
   <ul>
     <li>Real-time collaboration</li>
@@ -122,15 +113,11 @@ Configurable props for customizing field labels, names, and defaults:
   variantLabel="Card variant"
   variantName="variant"
   variantDefault="elevated"
-  borderRadiusLabel="Border radius"
-  borderRadiusName="borderRadius"
-  borderRadiusDefault={8}
 />
 ```
 
 **Fields:**
 - `variant`: ChoiceField for selecting visual style (elevated, outlined, filled)
-- `borderRadius`: NumberField for border radius in pixels (min: 0)
 
 ### Module Usage Example
 
@@ -141,7 +128,6 @@ export default function FeatureCardModule({ fieldValues }) {
   return (
     <Card
       variant={fieldValues.variant}
-      borderRadius={fieldValues.borderRadius}
       as="article"
     >
       <h3>{fieldValues.title}</h3>
@@ -187,7 +173,7 @@ The Card component follows accessibility best practices:
 ## Best Practices
 
 - **Choose semantic elements**: Use `as="article"` for self-contained content, `as="section"` for thematic groupings, and `as="div"` (default) for generic containers
-- **Border radius consistency**: Maintain consistent border radius values across your design system (typically 4px, 8px, 12px, or 16px)
+- **Border radius via theme settings**: Border radius is controlled by card shape settings in theme settings/variants, not an element-level field. Use the `borderRadius` prop only for programmatic overrides.
 - **Override CSS variables**: Customize appearance using CSS variables rather than overriding class styles
 - **Grid layouts**: Use CSS Grid or Flexbox for card layouts rather than relying on card margins
 - **Content flexibility**: Cards are content-agnostic containers; structure internal content using appropriate semantic elements

package/components/componentLibrary/Card/types.ts

@@ -15,7 +15,4 @@ export type StyleFieldsProps = {
   variantLabel?: string;
   variantName?: string;
   variantDefault?: CardVariant;
-  borderRadiusLabel?: string;
-  borderRadiusName?: string;
-  borderRadiusDefault?: number;
 };

package/components/componentLibrary/Divider/index.tsx

@@ -41,15 +41,13 @@ const DividerComponent = ({
   length = 100,
   thickness = 1,
   color,
-  variant = 'primary', // !todo: not used atm but keeping for when we need to add variant system.
   className = '',
   style = {},
 }: DividerProps) => {
-  const variantClass = styles[`hscl-divider-${variant}`];
   const orientationClass =
     orientation === 'horizontal' ? styles.horizontal : styles.vertical;
 
-  const defaultClasses = cx(styles.divider, variantClass, orientationClass);
+  const defaultClasses = cx(styles.divider, orientationClass);
   const combinedClasses = cx(defaultClasses, className);
 
   const cssVariables: CSSVariables = {

package/components/componentLibrary/Divider/llm.txt

@@ -44,7 +44,6 @@ Divider/
   length?: number;                                             // Length as percentage (1-100) of available space (default: 100)
   thickness?: number;                                          // Border thickness in pixels (default: 1)
   color?: { rgba?: string; color?: string; opacity?: number }; // Line color (from ColorField or rgba value)
-  variant?: 'primary' | 'secondary' | 'tertiary';             // Visual style variant (default: 'primary')
   className?: string;                                          // Additional CSS classes
   style?: React.CSSProperties;                                 // Inline styles (including CSS variables)
 }

package/components/componentLibrary/Divider/stories/Divider.stories.tsx

@@ -30,7 +30,6 @@ export const Default: Story = {
     length: 100,
     thickness: 1,
     spacing: '16px',
-    variant: 'primary',
   },
   render: args => (
     <SBContainer

package/components/componentLibrary/Divider/types.ts

@@ -23,7 +23,6 @@ export type DividerProps = {
   length?: number;
   thickness?: number;
   color?: ColorValue;
-  variant?: 'primary' | 'secondary' | 'tertiary';
   className?: string;
   style?: CSSVariables;
 };

package/components/componentLibrary/Icon/StyleFields.tsx

@@ -11,10 +11,10 @@ const StyleFields = ({
   iconBackgroundColorDefault = { color: '#2C2C2C', opacity: 100 },
   iconShapeLabel = 'Icon shape',
   iconShapeName = 'iconShape',
-  iconShapeDefault = '0px',
+  iconShapeDefault = 'square',
   iconSizeLabel = 'Icon size',
   iconSizeName = 'iconSize',
-  iconSizeDefault = '16',
+  iconSizeDefault = 'small',
 }: StyleFieldsProps) => {
   return (
     <>
@@ -23,6 +23,7 @@ const StyleFields = ({
           label={iconColorLabel}
           name={iconColorName}
           default={iconColorDefault}
+          required
           showOpacity={false}
         />
       )}
@@ -31,6 +32,7 @@ const StyleFields = ({
           label={iconBackgroundColorLabel}
           name={iconBackgroundColorName}
           default={iconBackgroundColorDefault}
+          required
           showOpacity={false}
         />
       )}
@@ -41,9 +43,9 @@ const StyleFields = ({
           display="buttons"
           preset="icon_shape"
           choices={[
-            ['0px', 'Square'],
-            ['8px', 'Rounded'],
-            ['100%', 'Circle'],
+            ['square', 'Square'],
+            ['rounded', 'Rounded'],
+            ['circle', 'Circle'],
           ]}
           default={iconShapeDefault}
           required={true}
@@ -54,9 +56,9 @@ const StyleFields = ({
           label={iconSizeLabel}
           name={iconSizeName}
           choices={[
-            ['16', 'Small (16x16 px)'],
-            ['24', 'Medium (24x24 px)'],
-            ['32', 'Large (32x32 px)'],
+            ['small', 'Small (16x16 px)'],
+            ['medium', 'Medium (24x24 px)'],
+            ['large', 'Large (32x32 px)'],
           ]}
           default={iconSizeDefault}
           required={true}

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

@@ -2,10 +2,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  fill: var(--hscl-icon-fill);
+  fill: var(--hscl-icon-fill, transparent);
   stroke: var(--hscl-icon-stroke);
-  width: var(--hscl-icon-size);
-  height: var(--hscl-icon-size);
+  width: var(--hscl-icon-size, 16px);
+  height: var(--hscl-icon-size, 16px);
 }
 
 .iconBackground {

package/components/componentLibrary/Icon/index.tsx

@@ -6,10 +6,22 @@ import cx from '../utils/classname.js';
 import type { CSSVariables } from '../utils/types.js';
 import { IconProps } from './types.js';
 
+const ICON_SIZE_MAP: Record<string, number> = {
+  small: 16,
+  medium: 24,
+  large: 32,
+};
+
+const ICON_SHAPE_MAP: Record<string, string> = {
+  square: '0px',
+  rounded: '8px',
+  circle: '100%',
+};
+
 const IconComponent = ({
   fieldPath,
   showIcon = true,
-  size = 12,
+  size,
   className = '',
   style = {},
   purpose = 'DECORATIVE',
@@ -22,8 +34,16 @@ const IconComponent = ({
 }: IconProps) => {
   if (!showIcon) return null;
 
+  const resolvedSize =
+    typeof size === 'string' ? ICON_SIZE_MAP[size] : undefined;
+  const resolvedShape = iconBackgroundShape
+    ? ICON_SHAPE_MAP[iconBackgroundShape] ?? iconBackgroundShape
+    : undefined;
+
   const cssVariables: CSSVariables = {
-    '--hscl-icon-size': `${size}px`,
+    ...(resolvedSize !== undefined && {
+      '--hscl-icon-size': `${resolvedSize}px`,
+    }),
     ...(fill && { '--hscl-icon-fill': fill }),
   };
 
@@ -33,7 +53,7 @@ const IconComponent = ({
   const icon = (
     <CMSIcon
       fieldPath={fieldPath}
-      height={size}
+      height={resolvedSize}
       className={combinedClasses}
       style={{ ...cssVariables, ...style }}
       purpose={purpose}
@@ -50,8 +70,8 @@ const IconComponent = ({
     ...(iconBackgroundPadding && {
       '--hscl-iconBackground-padding': `${iconBackgroundPadding}px`,
     }),
-    ...(iconBackgroundShape && {
-      '--hscl-iconBackground-shape': iconBackgroundShape,
+    ...(resolvedShape && {
+      '--hscl-iconBackground-shape': resolvedShape,
     }),
   };
 

package/components/componentLibrary/Icon/llm.txt

@@ -36,7 +36,7 @@ Icon/
 ```tsx
 {
   fieldPath?: string;                              // Path to icon in HubSpot fields
-  size?: number;                                   // Icon size in pixels, sets both width and height (default: 12)
+  size?: number | 'small' | 'medium' | 'large';   // Icon size — natural language or explicit px value. Omit to use CSS default (16px)
   fill?: string;                                   // Icon fill color (overrides CSS variable)
   className?: string;                              // Additional CSS classes
   style?: React.CSSProperties;                     // Inline styles (including CSS variables)
@@ -46,7 +46,7 @@ Icon/
   showIconBackground?: boolean;                    // Renders a centered background div behind the icon (default: false)
   iconBackgroundColor?: string;                    // Background div color (used when showIconBackground is true)
   iconBackgroundPadding?: number;                  // Padding around the icon inside the background div in px (default: 12)
-  iconBackgroundShape?: string;                    // Border-radius of the background div, e.g. '0px', '8px', '100%' (default: 0px)
+  iconBackgroundShape?: 'square' | 'rounded' | 'circle' | string; // Background shape — natural language or raw CSS border-radius value
 }
 ```
 
@@ -103,7 +103,7 @@ import Icon from '@hubspot/cms-component-library/Icon';
   showIconBackground={true}
   iconBackgroundColor="#2C2C2C"
   iconBackgroundPadding={16}
-  iconBackgroundShape="100%"
+  iconBackgroundShape="circle"
 />
 ```
 
@@ -144,8 +144,8 @@ Configurable props for icon appearance:
 **Fields:**
 - `iconColor`: ColorField for the icon fill color
 - `iconBackgroundColor`: ColorField for the background div color
-- `iconShape`: ChoiceField for the background border-radius (`'0px'` Square, `'8px'` Rounded, `'100%'` Circle)
-- `iconSize`: ChoiceField for icon size (16px Small, 24px Medium, 32px Large)
+- `iconShape`: ChoiceField for the background border-radius (`'square'`, `'rounded'`, `'circle'`)
+- `iconSize`: ChoiceField for icon size (`'small'` 16px, `'medium'` 24px, `'large'` 32px)
 
 All fields support `label`, `name`, and `default` customization props, and can be hidden via `hideFields`.
 
@@ -158,7 +158,7 @@ export default function IconModule({ fieldValues }) {
   return (
     <Icon
       fieldPath="icon"
-      size={Number(fieldValues.style?.iconSize) || 24}
+      size={fieldValues.style?.iconSize}
       showIcon={fieldValues.showIcon}
       fill={fieldValues.style?.iconColor?.color}
       showIconBackground={fieldValues.style?.showIconBackground}
@@ -193,8 +193,8 @@ export const fields = (
 The Icon component uses CSS variables for theming and customization:
 
 **Base Styles:**
-- `--hscl-icon-fill`: Icon fill color (default: currentColor)
-- `--hscl-icon-size`: Icon width and height (set automatically from the `size` prop)
+- `--hscl-icon-fill`: Icon fill color (default: `transparent`)
+- `--hscl-icon-size`: Icon width and height (default: `16px`). Only set when `size` prop is provided — omitting `size` lets the CSS default apply.
 
 **Background Styles (applied when `showIconBackground` is true):**
 - `--hscl-iconBackground-backgroundColor`: Background div color
@@ -217,6 +217,6 @@ The Icon component follows accessibility best practices:
 - **Choose the right purpose**: Use `SEMANTIC` when the icon conveys important meaning, `DECORATIVE` when it's purely visual
 - **Always provide title with SEMANTIC**: When using `purpose="SEMANTIC"`, always include a meaningful `title` for screen readers
 - **Use CSS variables for theming**: Override `--hscl-icon-fill` for consistent color theming across your application
-- **Size appropriately**: Common sizes are 12px (small), 16px (default inline), 24px (medium), 32px (large), 48px (extra large)
+- **Use natural language sizes**: Pass `'small'` (16px), `'medium'` (24px), or `'large'` (32px) to `size`, or an explicit `number` in pixels. Omit `size` entirely to use the CSS default of `16px`.
 - **Field path**: The `fieldPath` prop should match the field name defined in ContentFields
-- **Background shape**: The `iconShape` StyleField value maps directly to `iconBackgroundShape` on the component — pass it through as-is
+- **Background shape**: Pass `iconShape` field values (`'square'`, `'rounded'`, `'circle'`) directly to `iconBackgroundShape` — the component maps them to CSS values internally. Raw CSS border-radius strings are also accepted.

package/components/componentLibrary/Icon/stories/Icon.stories.tsx

@@ -25,18 +25,40 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     fieldPath: 'icon',
-    size: 24,
+    size: 'medium',
     showIcon: true,
     purpose: 'DECORATIVE',
   },
 };
 
+export const NamedSizes: Story = {
+  name: 'Named Sizes',
+  render: () => (
+    <SBContainer flex direction="row" gap="large" alignItems="center">
+      <SBContainer addBackground flex alignItems="center">
+        <h4>small (16px)</h4>
+        <Icon fieldPath="icon" size="small" />
+      </SBContainer>
+
+      <SBContainer addBackground flex alignItems="center">
+        <h4>medium (24px)</h4>
+        <Icon fieldPath="icon" size="medium" />
+      </SBContainer>
+
+      <SBContainer addBackground flex alignItems="center">
+        <h4>large (32px)</h4>
+        <Icon fieldPath="icon" size="large" />
+      </SBContainer>
+    </SBContainer>
+  ),
+};
+
 export const IconSizes: Story = {
-  name: 'Icon Sizes',
+  name: 'Icon Sizes (Explicit px)',
   render: () => (
     <SBContainer flex direction="row" gap="large" alignItems="center">
       <SBContainer addBackground flex alignItems="center">
-        <h4>12px (default)</h4>
+        <h4>12px</h4>
         <Icon fieldPath="icon" size={12} />
       </SBContainer>
 
@@ -68,7 +90,7 @@ export const Colors: Story = {
   render: () => (
     <SBContainer flex direction="row" gap="large" alignItems="center">
       <SBContainer addBackground flex alignItems="center">
-        <h4>Default (currentColor)</h4>
+        <h4>Default (transparent)</h4>
         <Icon fieldPath="icon" size={32} />
       </SBContainer>
 
@@ -102,3 +124,43 @@ export const Colors: Story = {
     </SBContainer>
   ),
 };
+
+export const BackgroundShapes: Story = {
+  name: 'Background Shapes',
+  render: () => (
+    <SBContainer flex direction="row" gap="large" alignItems="center">
+      <SBContainer addBackground flex alignItems="center">
+        <h4>square</h4>
+        <Icon
+          fieldPath="icon"
+          size="medium"
+          showIconBackground
+          iconBackgroundColor="#2C2C2C"
+          iconBackgroundShape="square"
+        />
+      </SBContainer>
+
+      <SBContainer addBackground flex alignItems="center">
+        <h4>rounded</h4>
+        <Icon
+          fieldPath="icon"
+          size="medium"
+          showIconBackground
+          iconBackgroundColor="#2C2C2C"
+          iconBackgroundShape="rounded"
+        />
+      </SBContainer>
+
+      <SBContainer addBackground flex alignItems="center">
+        <h4>circle</h4>
+        <Icon
+          fieldPath="icon"
+          size="medium"
+          showIconBackground
+          iconBackgroundColor="#2C2C2C"
+          iconBackgroundShape="circle"
+        />
+      </SBContainer>
+    </SBContainer>
+  ),
+};

package/components/componentLibrary/Icon/types.ts

@@ -8,9 +8,12 @@ type ColorFieldValue = typeof ColorFieldDefaults;
 
 export type IconPurpose = 'SEMANTIC' | 'DECORATIVE';
 
+export type IconSize = 'small' | 'medium' | 'large';
+export type IconShape = 'square' | 'rounded' | 'circle';
+
 export type IconProps = {
   fieldPath?: string;
-  size?: number;
+  size?: number | IconSize;
   fill?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -20,7 +23,7 @@ export type IconProps = {
   showIconBackground?: boolean;
   iconBackgroundColor?: string;
   iconBackgroundPadding?: number;
-  iconBackgroundShape?: string;
+  iconBackgroundShape?: IconShape | string;
 };
 
 type IconToggleProps = {
@@ -60,8 +63,8 @@ export type StyleFieldsProps = {
   iconBackgroundColorDefault?: ColorFieldValue;
   iconShapeLabel?: string;
   iconShapeName?: string;
-  iconShapeDefault?: string;
+  iconShapeDefault?: IconShape;
   iconSizeLabel?: string;
   iconSizeName?: string;
-  iconSizeDefault?: string;
+  iconSizeDefault?: IconSize;
 };

package/components/componentLibrary/Text/ContentFields.tsx

@@ -7,17 +7,10 @@ import type { ContentFieldsProps } from './types.js';
 // To do: These are placeholders - we can refine and add more after some UX feedback and further discussion
 
 const headingEnabledFeatures: RichTextFieldType['enabledFeatures'] = [
-  'block',
   'alignment',
-  'indents',
-  'lists',
   'standard_emphasis',
-  'advanced_emphasis',
   'link',
   'personalize',
-  'nonbreaking_space',
-  'source_code',
-  'visual_blocks',
 ];
 
 const bodyContentEnabledFeatures: RichTextFieldType['enabledFeatures'] = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {