Skip to content

Pending Review

Pending Review from User Experience (UX)

Flex Component

Overview

The PWC Flex is a comprehensive flexbox layout component in the Progress Web Components design system that provides powerful and flexible container capabilities for creating responsive layouts. It offers extensive customization options for alignment, spacing, direction, wrapping, and styling across React and Angular applications.

Core Capabilities

  • Complete Flexbox API - Full CSS flexbox properties including direction, alignment, justification, and wrapping with design system integration
  • Comprehensive Spacing System - Granular padding and gap controls with predefined spacing tokens from xxs to xxl
  • Multiple Layout Variants - Background variants including clear, raised, sunken, and radial gradient for different visual contexts
  • Border Control System - Individual border controls for each side plus full border options for precise layout definition
  • Responsive Design Support - Built-in responsive behavior with full width/height options and max-width constraints
  • Advanced Flex Properties - Support for flex-grow, flex-shrink, flex-basis, and flex-order for complex layout requirements

When to use Flex:

  • Create responsive layouts that need to adapt to different screen sizes and content lengths
  • Build complex component arrangements with precise alignment and spacing control
  • Implement card layouts, navigation bars, or dashboard components that require flexible positioning
  • Organize form elements, buttons, or content sections with consistent spacing and alignment

When not to use Flex:

  • Simple linear layouts where basic CSS or grid systems would be more appropriate
  • Complex grid-based layouts where CSS Grid would provide better structural control
  • Cases where the extensive flexbox API adds unnecessary complexity to simple positioning needs

Basic Implementation

import React from 'react';
import { PwcFlex, PwcButton } from "@progress-i360/pwc-react";

function FlexLayout() {
  return (
    <div style={{ padding: '20px' }}>
      {/* Row Layout */}
      <PwcFlex direction="row" gap="m" alignItems="center">
        <div style={{ padding: '12px', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>Item 1</div>
        <div style={{ padding: '12px', backgroundColor: '#e3f2fd', borderRadius: '4px' }}>Item 2</div>
        <div style={{ padding: '12px', backgroundColor: '#f3e5f5', borderRadius: '4px' }}>Item 3</div>
      </PwcFlex>

      {/* Column Layout */}
      <PwcFlex direction="column" gap="s" padding="m" variant="raised" style={{ marginTop: '16px' }}>
        <h4>User Profile</h4>
        <div>John Doe</div>
        <div style={{ color: '#666' }}>john.doe@example.com</div>
      </PwcFlex>
    </div>
  );
}

import '@progress-i360/progress-web-components/flex';
import '@progress-i360/progress-web-components/button';

function ResponsiveCards() {
  const metrics = [
    { title: 'Revenue', value: '$45,230', change: '+12%' },
    { title: 'Users', value: '1,234', change: '+8%' },
    { title: 'Orders', value: '896', change: '-3%' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Dashboard</h2>

      <pwc-flex direction="row" wrap="wrap" gap="m">
        {metrics.map((metric, index) => (
          <pwc-flex
            key={index}
            direction="column"
            padding="m"
            variant="raised"
            style={{ minWidth: '150px', flex: '1' }}
          >
            <div style={{ fontSize: '14px', color: '#666' }}>{metric.title}</div>
            <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{metric.value}</div>
            <div style={{ fontSize: '12px', color: metric.change.startsWith('+') ? 'green' : 'red' }}>
              {metric.change}
            </div>
          </pwc-flex>
        ))}
      </pwc-flex>

      <pwc-flex direction="row" justifyContent="space-between" alignItems="center" style={{ marginTop: '20px' }}>
        <span>Dashboard Actions</span>
        <pwc-flex direction="row" gap="s">
          <pwc-button label="Export" variant="outline"></pwc-button>
          <pwc-button label="Refresh" variant="primary"></pwc-button>
        </pwc-flex>
      </pwc-flex>
    </div>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@progress-i360/progress-web-components/flex';
import '@progress-i360/progress-web-components/button';

@Component({
  selector: 'flex-demo',
  template: `
    <pwc-flex
      direction="{{ flexDirection }}"
      gap="m"
      padding="l"
      justifyContent="space-between"
    >
      <div class="content-box">Item 1: {{ itemCount }}</div>
      <div class="content-box">Item 2: Active</div>
      <div class="content-box">Item 3: Ready</div>
    </pwc-flex>

    <pwc-flex direction="row" gap="s" justifyContent="center">
      <pwc-button label="Toggle Direction" (pwc-click)="toggleDirection()"></pwc-button>
      <pwc-button label="Add Item" (pwc-click)="addItem()"></pwc-button>
    </pwc-flex>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FlexDemo {
  flexDirection = 'row';
  itemCount = 1;

  toggleDirection() {
    this.flexDirection = this.flexDirection === 'row' ? 'column' : 'row';
  }

  addItem() {
    this.itemCount++;
  }
}

// Create flex container with layout control
const flexContainer = document.createElement('pwc-flex');
flexContainer.setAttribute('direction', 'row');
flexContainer.setAttribute('gap', 'm');
flexContainer.setAttribute('padding', 'l');
flexContainer.setAttribute('justifyContent', 'space-between');

// Create content items
const item1 = document.createElement('div');
item1.textContent = 'Dashboard';
item1.style.padding = '12px';
item1.style.background = '#f0f0f0';

const item2 = document.createElement('div');
item2.textContent = 'Settings';
item2.style.padding = '12px';
item2.style.background = '#e3f2fd';

const item3 = document.createElement('div');
item3.textContent = 'Profile';
item3.style.padding = '12px';
item3.style.background = '#f3e5f5';

// Add items to flex container
flexContainer.appendChild(item1);
flexContainer.appendChild(item2);
flexContainer.appendChild(item3);

document.body.appendChild(flexContainer);

Usage Patterns

  • Responsive Layout Creation - Use flex containers with wrap and gap properties to create responsive grid-like layouts that adapt to different screen sizes
  • Component Organization - Apply direction and alignment properties to organize buttons, form elements, or content sections with precise control
  • Card and Panel Layouts - Leverage padding, variant, and border properties to create visually distinct content containers and information cards
  • Navigation and Action Bars - Implement justify-content and align-items for creating balanced navigation layouts and action button arrangements

Best Practices

Content Strategy Guidelines

  • Semantic Layout Structure - Use flex direction and alignment properties to create logical content flow that supports both visual hierarchy and accessibility
  • Consistent Spacing Patterns - Apply the design system's spacing tokens (gap, padding) consistently across components to maintain visual rhythm
  • Responsive Content Planning - Design flex layouts that gracefully handle content overflow and varying content lengths across device sizes
  • Visual Hierarchy Support - Use variant and border properties to create clear content boundaries and establish information importance

Performance Optimization

  • Efficient Layout Rendering - Leverage CSS flexbox properties rather than complex nested structures to minimize DOM complexity and improve rendering performance
  • Spacing Token Utilization - Use predefined spacing values to ensure consistent rendering and reduce CSS generation overhead
  • Conditional Property Application - Apply flex properties judiciously, using only necessary properties to avoid unnecessary CSS class generation
  • Container Optimization - Choose appropriate flex container sizes and constraints to prevent layout thrashing during content updates

Integration Architecture

  • Design System Consistency - Integrate flex components with other layout components using consistent spacing, alignment, and variant patterns
  • Framework Compatibility - Ensure flex layouts work seamlessly across React, Angular, and vanilla JavaScript implementations
  • Theme Integration - Utilize variant properties that automatically adapt to different theme configurations and color schemes
  • Component Composition - Build complex layouts by composing multiple flex containers rather than creating monolithic layout structures

Common Use Cases

Dashboard and Analytics Layouts

  • Create responsive metric cards that adapt to different screen sizes while maintaining visual consistency
  • Build complex dashboard layouts with sidebars, main content areas, and consistent spacing throughout
  • Implement data visualization containers that properly align charts, legends, and control elements

Form and Input Organization

  • Organize form fields with consistent spacing and alignment using flex gap and direction properties
  • Create responsive form layouts that stack appropriately on mobile devices while remaining horizontal on desktop
  • Build form action areas with properly aligned buttons and status indicators

Content and Media Galleries

  • Develop responsive image or content galleries that automatically wrap and maintain consistent spacing
  • Create card-based layouts for product listings, article previews, or portfolio items
  • Implement flexible content containers that adapt to varying content lengths and media types

Troubleshooting

Common Issues

Layout Not Responsive

Problem: Flex containers don't adapt properly to different screen sizes or content changes.

Solution:

  • Ensure wrap property is set appropriately for responsive behavior. Use flex-basis and flex-grow properties for flexible sizing. Consider using maxWidth constraints and check that parent containers allow for flexibility.

Alignment Issues

Problem: Content doesn't align as expected within flex containers or spacing appears inconsistent.

Solution:

  • Review alignItems and justifyContent settings to ensure they match the intended layout. Check that gap and padding properties are using consistent design system tokens. Verify that flex direction matches the intended content flow.

Overflow Problems

Problem: Content overflows flex containers or causes layout breaking on smaller screens.

Solution:

  • Implement appropriate wrapping with the wrap property. Use maxWidth constraints where needed. Consider scrollable containers for fixed-height layouts. Test content with varying lengths to ensure robust behavior.

Performance Issues

Problem: Complex flex layouts cause rendering performance problems or layout shifting.

Solution:

  • Simplify nested flex structures where possible. Use appropriate flex-shrink and flex-grow values to prevent unnecessary recalculations. Consider using CSS Grid for complex two-dimensional layouts instead of nested flex containers.

Implementation Support

  • Comprehensive Flexbox API - Complete implementation of CSS flexbox properties with design system integration for consistent behavior across frameworks
  • Responsive Design Patterns - Built-in responsive behavior with breakpoint-aware spacing and alignment for mobile-first development approaches
  • Design System Integration - Seamless integration with PWC design tokens for spacing, colors, and styling ensuring brand consistency across applications

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

For additional implementation guidance or framework-specific questions, consult the PWC Design System documentation or reach out to the component library team.