Skip to content

Pending Review

Pending Review from User Experience (UX)

Divider Component

Overview

The PWC Divider is a visual separator component in the Progress Web Components design system. It provides consistent visual separation between content sections with configurable orientation, color, and sizing options across React and Angular applications.

Core Capabilities

  • Dual Orientation Support - Horizontal and vertical divider orientations for flexible layout separation
  • Color Variants - Two color options (normal, subtle) to match different visual contexts and content hierarchy
  • Flexible Sizing - Configurable maximum width or height constraints for precise layout control
  • Responsive Design - Adaptive sizing that works across different container widths and layout contexts
  • Lightweight Implementation - Minimal DOM footprint with efficient CSS-based rendering
  • Design System Integration - Consistent styling using design tokens for borders and spacing

When to use Divider:

  • Separate distinct content sections within cards, panels, or page layouts
  • Create visual breaks between list items, menu sections, or navigation elements
  • Establish clear boundaries in forms between different input groups or sections
  • Provide subtle separation in dashboards between widgets or data visualization components

When not to use Divider:

  • Complex layouts where custom borders or spacing would be more appropriate
  • Cases where white space alone would provide sufficient visual separation
  • Decorative elements that require custom styling beyond simple line separation

Basic Implementation

import React from 'react';
import { PwcDivider } from "@progress-i360/pwc-react";

function SettingsPanel() {
  return (
    <div style={{ padding: '20px' }}>
      <h3>Profile Settings</h3>
      <p>Manage your account preferences.</p>

      <PwcDivider orientation="horizontal" color="normal" />

      <div style={{ margin: '16px 0' }}>
        <h4>Personal Information</h4>
        <p>Update your details.</p>
      </div>

      <PwcDivider orientation="horizontal" color="subtle" />

      <div style={{ margin: '16px 0' }}>
        <h4>Privacy Settings</h4>
        <p>Control your privacy.</p>
      </div>
    </div>
  );
}

import '@progress-i360/progress-web-components/divider';

function NavigationMenu() {
  const menuItems = ['Dashboard', 'Analytics', 'Reports'];
  const accountItems = ['Profile', 'Settings', 'Logout'];

  return (
    <div style={{ width: '200px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
      <div style={{ padding: '12px' }}>
        <h4>Navigation</h4>
        {menuItems.map((item, index) => (
          <div key={index} style={{ padding: '8px' }}>{item}</div>
        ))}
      </div>

      <pwc-divider orientation="horizontal" color="subtle"></pwc-divider>

      <div style={{ padding: '12px' }}>
        <h4>Account</h4>
        {accountItems.map((item, index) => (
          <div key={index} style={{ padding: '8px' }}>{item}</div>
        ))}
      </div>
    </div>
  );
}

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

@Component({
  selector: 'divider-demo',
  template: `
    <div class="content-section">
      <h3>Section One</h3>
      <p>First content area with some text.</p>
    </div>

    <pwc-divider orientation="horizontal"></pwc-divider>

    <div class="content-section">
      <h3>Section Two</h3>
      <p>Second content area separated by divider.</p>
    </div>

    <pwc-button label="Toggle Orientation" (pwc-click)="toggleOrientation()"></pwc-button>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class DividerDemo {
  orientation = 'horizontal';

  toggleOrientation() {
    this.orientation = this.orientation === 'horizontal' ? 'vertical' : 'horizontal';
  }
}

// Create content sections with divider
const container = document.createElement('div');
container.style.padding = '20px';

// Create first content section
const section1 = document.createElement('div');
section1.textContent = 'Content Section 1';
section1.style.padding = '10px';

// Create horizontal divider
const divider = document.createElement('pwc-divider');
divider.setAttribute('orientation', 'horizontal');
divider.setAttribute('color', 'normal');

// Create second content section
const section2 = document.createElement('div');
section2.textContent = 'Content Section 2';
section2.style.padding = '10px';

// Add sections and divider to container
container.appendChild(section1);
container.appendChild(divider);
container.appendChild(section2);

// Add to page
document.body.appendChild(container);

Usage Patterns

  • Content Section Separation - Use horizontal dividers to create clear breaks between different content areas in cards, panels, or page sections
  • Navigation Menu Organization - Implement dividers to group related menu items or separate primary navigation from secondary actions
  • Form Field Grouping - Apply subtle dividers to separate different sections of complex forms without overwhelming the visual hierarchy
  • Dashboard Widget Boundaries - Create clean separation between data visualization components and statistics in dashboard layouts

Best Practices

Content Strategy Guidelines

  • Visual Hierarchy - Use normal color for primary content separation and subtle color for secondary or less important divisions
  • Consistent Spacing - Maintain consistent margins around dividers to create predictable visual rhythm throughout your interface
  • Semantic Grouping - Place dividers to reinforce logical content relationships rather than arbitrary visual breaks
  • Accessibility Considerations - Ensure dividers enhance content structure without creating confusion for screen reader users

Performance Optimization

  • Minimal DOM Impact - Leverage the lightweight implementation to use dividers liberally without performance concerns
  • CSS-Based Rendering - Take advantage of the efficient CSS-based styling rather than creating custom separator components
  • Responsive Behavior - Use percentage-based max constraints for dividers that need to adapt to container sizes
  • Component Reusability - Implement consistent divider patterns across your application to maintain design system coherence

Integration Architecture

  • Design Token Integration - Utilize the built-in color variants that automatically adapt to your design system's color scheme
  • Layout System Compatibility - Integrate dividers seamlessly with flex and grid layouts using appropriate orientation settings
  • Component Composition - Combine dividers with other layout components to create complex, well-structured interface patterns
  • Responsive Design - Consider how dividers behave across different screen sizes and adjust max constraints accordingly

Common Use Cases

Card and Panel Layouts

  • Separate header, content, and footer sections in cards with clear visual boundaries
  • Create organized information hierarchy in settings panels and configuration interfaces
  • Establish clean breaks between different data sections in dashboard widgets
  • Group related navigation items in sidebars and dropdown menus with logical separators
  • Create visual distinction between primary actions and secondary menu options
  • Organize complex menu structures with consistent divider patterns

Form and Input Organization

  • Separate different categories of form inputs in long or complex forms
  • Create visual breaks between required and optional field sections
  • Organize multi-step form sections with appropriate visual boundaries

Troubleshooting

Common Issues

Divider Not Visible

Problem: Divider appears invisible or doesn't show up in the layout.

Solution:

  • Check that the parent container has adequate height (for vertical dividers) or width (for horizontal dividers). Verify that the color variant is appropriate for the background - subtle dividers may not be visible on light backgrounds.

Incorrect Orientation Display

Problem: Vertical dividers appear horizontal or don't display properly.

Solution:

  • Ensure the parent container has a defined height for vertical dividers. Vertical dividers require container height to be visible. Check that the container's display property supports the divider's flex behavior.

Max Size Not Applied

Problem: The max property doesn't seem to affect the divider's size.

Solution:

  • Verify that the max value includes proper units (px, %, em, etc.). The max property sets maximum width for horizontal dividers and maximum height for vertical dividers. Ensure the value is appropriate for the orientation.

Layout Breaking Issues

Problem: Dividers cause layout shifts or break the containing layout.

Solution:

  • Check that the divider's orientation matches the intended layout flow. Ensure adequate spacing around dividers and verify that the parent container can accommodate the divider's dimensions. Consider using smaller max values for subtle visual separation.

Implementation Support

  • Storybook Examples - Interactive examples showing both orientations, color variants, and common layout patterns
  • Design System Integration - Consistent color tokens and sizing that automatically adapt to theme changes
  • Layout Pattern Library - Common divider usage patterns and best practices for different interface contexts

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. ````