fix(bulma-ui): deprecate CSS-less color values, warn in dev, fix has-text fall-through

bulma-ui/src/__tests__/stories-conformance.test.ts

@@ -20,8 +20,6 @@ const LEGACY_EXEMPT = new Set<string>([
   'elements/Icon.stories.tsx',
   'elements/IconText.stories.tsx',
   'elements/Image.stories.tsx',
-  'elements/Notification.stories.tsx',
-  'elements/Progress.stories.tsx',
   'elements/SubTitle.stories.tsx',
   'elements/Table.stories.tsx',
   'elements/Tag.stories.tsx',

bulma-ui/src/components/Card.tsx

@@ -24,7 +24,12 @@ export interface CardProps
   className?: string;
   /** Text color for the card. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-  /** Bulma color modifier for the card. */
+  /**
+   * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+   * Not a filled card variant (no `.card.is-<color>` CSS exists). Prefer
+   * `textColor`, which takes precedence when both are set; use `bgColor` for
+   * a colored surface.
+   */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
   /** Background color for the card. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -101,6 +106,7 @@ const CardComponent: React.FC<CardProps> = ({
   className,
   children,
   textColor,
+  color,
   bgColor,
   hasShadow = true,
   header,
@@ -113,7 +119,7 @@ const CardComponent: React.FC<CardProps> = ({
 }) => {
   const { classPrefix } = useConfig();
   const { bulmaHelperClasses, rest } = useBulmaClasses({
-    color: textColor,
+    color: textColor ?? color,
     backgroundColor: bgColor,
     ...props,
   });

bulma-ui/src/components/Pagination.stories.tsx

@@ -55,27 +55,6 @@ export const Sizes: Story = {
   ),
 };
 
-export const Colors: Story = {
-  render: () => (
-    <>
-      <Pagination color="primary" style={{ marginBottom: 8 }}>
-        <Pagination.List>
-          <Pagination.Link>1</Pagination.Link>
-          <Pagination.Link active>2</Pagination.Link>
-          <Pagination.Link>3</Pagination.Link>
-        </Pagination.List>
-      </Pagination>
-      <Pagination color="danger">
-        <Pagination.List>
-          <Pagination.Link>1</Pagination.Link>
-          <Pagination.Link active>2</Pagination.Link>
-          <Pagination.Link>3</Pagination.Link>
-        </Pagination.List>
-      </Pagination>
-    </>
-  ),
-};
-
 export const Alignment: Story = {
   render: () => (
     <>

bulma-ui/src/components/Pagination.tsx

@@ -6,6 +6,7 @@ import {
   BulmaClassesProps,
   validColors,
 } from '../helpers/useBulmaClasses';
+import { warnDeprecatedColorProp } from '../helpers/colorDeprecations';
 
 /**
  * Props for the Pagination component.
@@ -14,7 +15,15 @@ export interface PaginationProps
   extends
     React.HTMLAttributes<HTMLElement>,
     Omit<BulmaClassesProps, 'color' | 'backgroundColor'> {
-  /** Color modifier for the pagination. */
+  /**
+   * Color modifier for the pagination (renders `is-<color>`).
+   *
+   * Bulma ships no pagination color CSS, so this prop has never had a visual
+   * effect for any value. Passing it logs a console warning in development.
+   * Use `textColor` / `bgColor` instead.
+   * @deprecated No `.pagination.is-<color>` CSS exists; the prop renders
+   * unstyled and will be removed in the next major version.
+   */
   color?:
     | 'primary'
     | 'link'
@@ -149,6 +158,12 @@ const PaginationComponent: React.FC<PaginationProps> = ({
   children,
   ...props
 }) => {
+  warnDeprecatedColorProp(
+    'Pagination',
+    color,
+    'Use the textColor / bgColor helper props instead.'
+  );
+
   const { bulmaHelperClasses, rest } = useBulmaClasses({
     color: textColor,
     backgroundColor: bgColor,

bulma-ui/src/components/Tabs.stories.tsx

@@ -31,21 +31,6 @@ const meta: Meta<typeof Tabs> = {
       control: 'select',
       options: ['small', 'medium', 'large'],
     },
-    color: {
-      control: 'select',
-      options: [
-        'primary',
-        'link',
-        'info',
-        'success',
-        'warning',
-        'danger',
-        'black',
-        'dark',
-        'light',
-        'white',
-      ],
-    },
   },
 };
 

bulma-ui/src/components/Tabs.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useState, useCallback } from 'react';
 import { classNames, usePrefixedClassNames } from '../helpers/classNames';
 import { withSubComponents } from '../helpers/withSubComponents';
 import { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';
+import { warnDeprecatedColorProp } from '../helpers/colorDeprecations';
 import { Icon } from '../elements/Icon';
 
 // ---------------------------------------------------------------------------
@@ -42,7 +43,14 @@ export interface TabsProps
   toggle?: boolean;
   /** Tabs use the rounded toggle style (only with `toggle`). */
   rounded?: boolean;
-  /** Bulma color for tab underlines and active state. */
+  /**
+   * Bulma color for tab underlines and active state (renders `is-<color>`).
+   *
+   * Bulma ships no tabs color CSS, so this prop has never had a visual effect
+   * for any value. Passing it logs a console warning in development.
+   * @deprecated No `.tabs.is-<color>` CSS exists; the prop renders unstyled
+   * and will be removed in the next major version.
+   */
   color?:
     | 'primary'
     | 'link'
@@ -111,6 +119,12 @@ const TabsComponent: React.FC<TabsProps> = ({
   children,
   ...props
 }) => {
+  warnDeprecatedColorProp(
+    'Tabs',
+    color,
+    'Remove the prop; no replacement exists.'
+  );
+
   const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
 
   // Controlled vs uncontrolled state

bulma-ui/src/components/__tests__/Card.test.tsx

@@ -1166,3 +1166,21 @@ describe('Card - Advanced Integration Tests', () => {
     expect(card).toHaveClass('has-text-centered');
   });
 });
+
+describe('Card color text alias', () => {
+  it('renders has-text-primary when only color is set', () => {
+    const { container } = render(<Card color="primary">Content</Card>);
+    expect(container.querySelector('.card')).toHaveClass('has-text-primary');
+  });
+
+  it('gives textColor precedence when both are set', () => {
+    const { container } = render(
+      <Card textColor="danger" color="primary">
+        Content
+      </Card>
+    );
+    const card = container.querySelector('.card');
+    expect(card).toHaveClass('has-text-danger');
+    expect(card).not.toHaveClass('has-text-primary');
+  });
+});

bulma-ui/src/components/__tests__/Pagination.test.tsx

@@ -7,6 +7,18 @@ import Pagination, {
   PaginationNext,
 } from '../Pagination';
 import { ConfigProvider } from '../../helpers/Config';
+import { resetColorDeprecationWarnings } from '../../helpers/colorDeprecations';
+
+let warnSpy: jest.SpyInstance;
+
+beforeEach(() => {
+  resetColorDeprecationWarnings();
+  warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  warnSpy.mockRestore();
+});
 
 describe('Pagination', () => {
   it('renders nav with pagination class', () => {
@@ -335,3 +347,19 @@ describe('Compound components', () => {
     expect(container.querySelector('.pagination-ellipsis')).toBeInTheDocument();
   });
 });
+
+describe('Pagination deprecated color prop', () => {
+  it('warns once in development when color is passed', () => {
+    const { rerender } = render(<Pagination color="primary" />);
+    rerender(<Pagination color="danger" />);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Pagination "color" prop is deprecated')
+    );
+  });
+
+  it('does not warn when color is omitted', () => {
+    render(<Pagination />);
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});

bulma-ui/src/components/__tests__/Tabs.test.tsx

@@ -8,6 +8,18 @@ import Tabs, {
   TabContentItem,
 } from '../Tabs';
 import { ConfigProvider } from '../../helpers/Config';
+import { resetColorDeprecationWarnings } from '../../helpers/colorDeprecations';
+
+let warnSpy: jest.SpyInstance;
+
+beforeEach(() => {
+  resetColorDeprecationWarnings();
+  warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+});
+
+afterEach(() => {
+  warnSpy.mockRestore();
+});
 
 describe('Tabs', () => {
   describe('rendering', () => {
@@ -846,3 +858,37 @@ describe('Compound components', () => {
     ).toHaveTextContent('Overview panel');
   });
 });
+
+describe('Tabs deprecated color prop', () => {
+  it('warns once in development when color is passed', () => {
+    const { rerender } = render(
+      <Tabs color="primary">
+        <TabList>
+          <TabItem>One</TabItem>
+        </TabList>
+      </Tabs>
+    );
+    rerender(
+      <Tabs color="danger">
+        <TabList>
+          <TabItem>One</TabItem>
+        </TabList>
+      </Tabs>
+    );
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Tabs "color" prop is deprecated')
+    );
+  });
+
+  it('does not warn when color is omitted', () => {
+    render(
+      <Tabs>
+        <TabList>
+          <TabItem>One</TabItem>
+        </TabList>
+      </Tabs>
+    );
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});

bulma-ui/src/elements/Block.tsx

@@ -17,7 +17,12 @@ export interface BlockProps
   className?: string;
   /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-  /** Bulma color modifier for the block. */
+  /**
+   * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+   * Not a filled variant (no `.block.is-<color>` CSS exists). Prefer
+   * `textColor`, which takes precedence when both are set; use `bgColor` for
+   * a colored surface.
+   */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
   /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -36,6 +41,7 @@ export interface BlockProps
 export const Block: React.FC<BlockProps> = ({
   className,
   textColor,
+  color,
   bgColor,
   children,
   ...props
@@ -44,7 +50,7 @@ export const Block: React.FC<BlockProps> = ({
    * Generates Bulma helper classes and separates out remaining props.
    */
   const { bulmaHelperClasses, rest } = useBulmaClasses({
-    color: textColor,
+    color: textColor ?? color,
     backgroundColor: bgColor,
     ...props,
   });

bulma-ui/src/elements/Box.tsx

@@ -18,7 +18,12 @@ export interface BoxProps
   className?: string;
   /** Text color helper. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-  /** Bulma color modifier for the box. */
+  /**
+   * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+   * Not a filled box variant (no `.box.is-<color>` CSS exists). Prefer
+   * `textColor`, which takes precedence when both are set; use `bgColor` for
+   * a colored surface.
+   */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
   /** Background color helper. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -39,6 +44,7 @@ export interface BoxProps
 export const Box: React.FC<BoxProps> = ({
   className,
   textColor,
+  color,
   bgColor,
   hasShadow = true,
   children,
@@ -48,7 +54,7 @@ export const Box: React.FC<BoxProps> = ({
    * Generates Bulma helper classes and separates out remaining props.
    */
   const { bulmaHelperClasses, rest } = useBulmaClasses({
-    color: textColor,
+    color: textColor ?? color,
     backgroundColor: bgColor,
     ...props,
   });

bulma-ui/src/elements/Buttons.tsx

@@ -18,7 +18,12 @@ interface ButtonsProps
   className?: string;
   /** Text color helper for the button group. */
   textColor?: (typeof validColors)[number] | 'inherit' | 'current';
-  /** Bulma color modifier for the button group. */
+  /**
+   * Text color alias: renders `has-text-<color>`, exactly like `textColor`.
+   * Not a filled variant (no `.buttons.is-<color>` CSS exists; color the
+   * individual `Button`s instead). Prefer `textColor`, which takes precedence
+   * when both are set; use `bgColor` for a colored surface.
+   */
   color?: 'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger';
   /** Background color helper for the button group. */
   bgColor?: (typeof validColors)[number] | 'inherit' | 'current';
@@ -43,6 +48,7 @@ interface ButtonsProps
 const ButtonsComponent: React.FC<ButtonsProps> = ({
   className,
   textColor,
+  color,
   bgColor,
   isCentered,
   isRight,
@@ -60,7 +66,7 @@ const ButtonsComponent: React.FC<ButtonsProps> = ({
    * Generates Bulma helper classes and separates out remaining props.
    */
   const { bulmaHelperClasses, rest } = useBulmaClasses({
-    color: textColor,
+    color: textColor ?? color,
     backgroundColor: bgColor,
     ...props,
   });