@fpkit/acss 3.4.0 → 3.6.0

package/src/components/col/col.test.tsx

@@ -111,6 +111,51 @@ describe("Col Component", () => {
     });
   });
 
+  describe("Flex Column", () => {
+    it("applies col-flex utility class when span is 'flex'", () => {
+      const { container } = render(<Col span="flex">Content</Col>);
+      const col = container.firstChild as HTMLElement;
+      expect(col).toHaveClass("col-flex");
+    });
+
+    it("does not apply numeric col class when span is 'flex'", () => {
+      const { container } = render(<Col span="flex">Content</Col>);
+      const col = container.firstChild as HTMLElement;
+      expect(col.className).not.toMatch(/col-\d+/);
+    });
+
+    it("auto overrides flex when both provided", () => {
+      const { container } = render(<Col auto span="flex">Content</Col>);
+      const col = container.firstChild as HTMLElement;
+      expect(col).toHaveClass("col-auto");
+      expect(col).not.toHaveClass("col-flex");
+    });
+
+    it("flex column works with offset", () => {
+      const { container } = render(<Col span="flex" offset={2}>Content</Col>);
+      const col = container.firstChild as HTMLElement;
+      expect(col).toHaveClass("col-flex");
+      expect(col).toHaveClass("col-offset-2");
+    });
+
+    it("flex column works with order", () => {
+      const { container } = render(<Col span="flex" order="first">Content</Col>);
+      const col = container.firstChild as HTMLElement;
+      expect(col).toHaveClass("col-flex");
+      expect(col).toHaveClass("col-order-first");
+    });
+
+    it("flex column works with combined props", () => {
+      const { container } = render(
+        <Col span="flex" offset={1} order={2}>Content</Col>
+      );
+      const col = container.firstChild as HTMLElement;
+      expect(col).toHaveClass("col-flex");
+      expect(col).toHaveClass("col-offset-1");
+      expect(col).toHaveClass("col-order-2");
+    });
+  });
+
   describe("Offset Utilities", () => {
     it("applies col-offset-0 utility class", () => {
       const { container } = render(<Col offset={0}>Content</Col>);

package/src/components/col/col.tsx

@@ -70,9 +70,11 @@ export const Col = React.forwardRef<HTMLElement, ColProps>(
     // Build utility classes array - NO base class
     const utilityClasses: string[] = [];
 
-    // Auto takes precedence over span
+    // Auto takes precedence over span (including "flex")
     if (auto) {
       utilityClasses.push("col-auto");
+    } else if (span === "flex") {
+      utilityClasses.push("col-flex");
     } else if (span) {
       utilityClasses.push(`col-${span}`);
     }

package/src/components/col/col.types.ts

@@ -27,10 +27,22 @@ export interface ColProps
   extends Partial<ComponentProps>,
     Omit<React.HTMLAttributes<HTMLElement>, "className"> {
   /**
-   * Column span (1-12)
-   * Maps to .col-{span} utility class
-   * Ignored if auto is true
+   * Column span (1-12 or "flex")
+   *
+   * - Numeric values (1-12): Maps to .col-{span} utility class (fixed width)
+   * - "flex": Maps to .col-flex utility class (grows to fill space)
+   *
+   * Ignored if auto is true (auto takes precedence)
+   *
    * @default undefined
+   *
+   * @example
+   * // Fixed width column
+   * <Col span={6}>50% width on desktop</Col>
+   *
+   * @example
+   * // Flex column fills remaining space
+   * <Col span="flex">Grows to fill available space</Col>
    */
   span?: ColumnSpan;
 
@@ -53,8 +65,10 @@ export interface ColProps
   /**
    * Auto-width column
    * When true, uses .col-auto (content-based width)
-   * Takes precedence over span prop
+   * Takes precedence over span prop (including "flex")
    * @default false
+   *
+   * @see span - For flex-grow behavior, use span="flex" instead of auto
    */
   auto?: boolean;
 

package/src/components/row/row.tsx

@@ -75,6 +75,15 @@ export const Row = React.forwardRef<HTMLElement, RowProps>(
     },
     ref
   ) => {
+    // Deprecation warning in development
+    if (process.env.NODE_ENV === "development" && alwaysProportional) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "[fpkit] Row: alwaysProportional is deprecated and will be removed in v5.0.0. " +
+          'Use responsive column utilities instead: className="col-sm-6 col-md-4"'
+      );
+    }
+
     // Build utility classes array - ALWAYS include base class
     const utilityClasses: string[] = ["col-row"];
 

package/src/components/row/row.types.ts

@@ -56,22 +56,39 @@ export interface RowProps
   wrap?: FlexWrap;
 
   /**
-   * When true, columns maintain their proportional layout on tablets and larger
-   * instead of stacking to 100% width on all mobile devices (< 768px).
+   * @deprecated This prop will be removed in v5.0.0
    *
-   * Wrapping behavior with this prop:
-   * - Mobile phones (< 480px): Columns still stack at 100% width
-   * - Tablets & larger (≥ 480px): Columns maintain proportional layout
+   * Use responsive column utility classes instead for better control across breakpoints.
    *
-   * Use this when you want columns to stay side-by-side on tablets and desktops
-   * but still provide mobile-friendly stacking on phones.
+   * Migration path:
+   * - Before: `<Row alwaysProportional><Col span={6}>Column</Col></Row>`
+   * - After: `<Row><div className="col-sm-6">Column</div></Row>`
+   *
+   * Responsive utilities provide more flexibility:
+   * - Mobile phones (< 480px): `.col-12` (stack full width)
+   * - Tablets (≥ 480px): `.col-sm-6` (half width)
+   * - Desktops (≥ 1024px): `.col-lg-4` (third width)
    *
    * @default false
    * @example
+   * // Deprecated approach
    * <Row alwaysProportional>
    *   <Col span={6}>Column 1</Col>
    *   <Col span={6}>Column 2</Col>
    * </Row>
+   *
+   * @example
+   * // Recommended approach with responsive utilities
+   * <Row>
+   *   <div className="col-12 col-sm-6 col-lg-4">Column 1</div>
+   *   <div className="col-12 col-sm-6 col-lg-4">Column 2</div>
+   * </Row>
+   *
+   * @example
+   * // Mix with Col component if needed
+   * <Row>
+   *   <Col span={12} className="col-sm-6 col-lg-4">Column</Col>
+   * </Row>
    */
   alwaysProportional?: boolean;