layout-patterns

# Layout Patterns Skill This skill provides common UI layout patterns using fundamental-styles components. Use this to build complete, production-ready interfaces by combining multiple components correctly. ## When to Use This Skill Use this skill when: - The user asks "How do I build a [pattern name]?" - The user needs to combine multiple components - The user wants a complete working example - The user asks about common UI patterns (login, dashboard, master-detail, etc.) --- ## Pattern 1: Login Form A complete login form with email/password fields, validation, and action buttons. **Components used:** - `fd-form-item` - Form field containers - `fd-form-label` - Field labels - `fd-input` - Text inputs - `fd-button` - Action buttons - `fd-message-strip` - Error feedback **When to use:** - Authentication pages - Sign-in forms - User credential entry **Complete example:** ```html <div style="max-width: 400px; margin: 2rem auto;"> <!-- Error message (hidden by default) --> <div class="fd-message-strip fd-message-strip--error" role="alert" style="display: none;" id="login-error"> <p class="fd-message-strip__text">Invalid email or password. Please try again.</p> </div> <form> <!-- Email field --> <div class="fd-form-item"> <label class="fd-form-label fd-form-label--required" for="email"> Email </label> <input class="fd-input" type="email" id="email" placeholder="name@example.com" required aria-required="true" /> </div> <!-- Password field --> <div class="fd-form-item"> <label class="fd-form-label fd-form-label--required" for="password"> Password </label> <input class="fd-input" type="password" id="password" placeholder="Enter your password" required aria-required="true" /> </div> <!-- Action buttons --> <div class="fd-form-item"> <button class="fd-button fd-button--emphasized" type="submit" style="width: 100%;">Sign In</button> </div> <div class="fd-form-item" style="text-align: center;"> <a href="#" class="fd-link">Forgot password?</a> </div> </form> </div> ``` **Key points:** - Use `fd-form-label--required` for required fields - Add `aria-required="true"` for accessibility - Use `fd-button--emphasized` for the primary action - Hide error message by default, show with JavaScript on validation failure - Use semantic HTML5 input types (`email`, `password`) --- ## Pattern 2: Master-Detail Layout A two-column layout with a master list on the left and detail panel on the right. Clicking an item in the master list shows its details. **Components used:** - `fd-list` - Master list (left) - `fd-panel` - Detail panel (right) - `fd-toolbar` - Actions bar - `fd-button` - Action buttons **When to use:** - Email clients (inbox + message detail) - File browsers (folders + file preview) - Settings pages (categories + options) - Any list-detail relationship **Complete example:** ```html <div style="display: flex; gap: 1rem; height: 600px;"> <!-- Master (List) --> <div style="flex: 0 0 300px; overflow-y: auto; border-right: 1px solid var(--sapGroup_ContentBorderColor);"> <ul class="fd-list" role="listbox"> <li class="fd-list__item is-selected" role="option" tabindex="0"> <div class="fd-list__content"> <div class="fd-list__title">Item 1</div> <div class="fd-list__byline">Last updated 2 hours ago</div> </div> </li> <li class="fd-list__item" role="option" tabindex="-1"> <div class="fd-list__content"> <div class="fd-list__title">Item 2</div> <div class="fd-list__byline">Last updated 5 hours ago</div> </div> </li> <li class="fd-list__item" role="option" tabindex="-1"> <div class="fd-list__content"> <div class="fd-list__title">Item 3</div> <div class="fd-list__byline">Last updated yesterday</div> </div> </li> </ul> </div> <!-- Detail (Panel) --> <div style="flex: 1; overflow-y: auto;"> <div class="fd-panel"> <!-- Toolbar with actions --> <div class="fd-toolbar"> <div class="fd-toolbar__group"> <button class="fd-button fd-button--transparent fd-button--compact"> <i class="sap-icon--edit" role="presentation" aria-hidden="true"></i> <span class="fd-button__text">Edit</span> </button> <button class="fd-button fd-button--transparent fd-button--compact"> <i class="sap-icon--delete" role="presentation" aria-hidden="true"></i> <span class="fd-button__text">Delete</span> </button> <button class="fd-button fd-button--transparent fd-button--compact"> <i class="sap-icon--share" role="presentation" aria-hidden="true"></i> <span class="fd-button__text">Share</span> </button> </div> </div> <!-- Panel header --> <div class="fd-panel__header"> <h3 class="fd-panel__title">Item 1 Details</h3> <p class="fd-panel__description">View and manage item information</p> </div> <!-- Panel body --> <div class="fd-panel__body"> <div class="fd-form-item"> <label class="fd-form-label">Name</label> <p>Item 1</p> </div> <div class="fd-form-item"> <label class="fd-form-label">Status</label> <p>Active</p> </div> <div class="fd-form-item"> <label class="fd-form-label">Description</label> <p> This is a detailed description of Item 1. It contains information about the item's properties, history, and current state. </p> </div> </div> </div> </div> </div> ``` **Key points:** - Use flexbox for the two-column layout - Set fixed width for master (e.g., `300px`) - Use `is-selected` class on active list item - Add `overflow-y: auto` for scrollable panels - Use `fd-toolbar` for detail panel actions - Implement keyboard navigation (arrow keys) for list items --- ## Pattern 3: Data Table with Actions A table with selectable rows, bulk actions toolbar, and per-row action buttons. **Components used:** - `fd-table` - Data grid - `fd-checkbox` - Row selection - `fd-toolbar` - Bulk actions - `fd-button` - Action buttons **When to use:** - User management tables - Product catalogs - Order lists - Any data that needs bulk operations **Complete example:** ```html <!-- Toolbar with bulk actions (shown when rows are selected) --> <div class="fd-toolbar"> <div class="fd-toolbar__group"> <span class="fd-toolbar__label">2 items selected</span> </div> <div class="fd-toolbar__group"> <button class="fd-button fd-button--transparent fd-button--compact"> <i class="sap-icon--delete" role="presentation" aria-hidden="true"></i> <span class="fd-button__text">Delete Selected</span> </button> <button class="fd-button fd-button--transparent fd-button--compact"> <i class="sap-icon--email" role="presentation" aria-hidden="true"></i> <span class="fd-button__text">Send Email</span> </button> </div> </div> <!-- Table --> <table class="fd-table"> <thead class="fd-table__header"> <tr class="fd-table__row"> <th class="fd-table__cell" style="width: 50px;"> <input type="checkbox" class="fd-checkbox" id="select-all" aria-label="Select all rows" /> <label class="fd-checkbox__label" for="select-all"></label> </th> <th class="fd-table__cell" scope="col">Name</th> <th class="fd-table__cell" scope="col">Email</th> <th class="fd-table__cell" scope="col">Status</th> <th class="fd-table__cell" scope="col">Actions</th> </tr> </thead> <tbody class="fd-table__body"> <tr class="fd-table__row is-selected"> <td class="fd-table__cell"> <input type="checkbox" class="fd-checkbox" id="row1" checked aria-label="Select row 1" /> <label class="fd-checkbox__label" for="row1"></label> </td> <td class="fd-table__cell">John Doe</td> <td class="fd-table__cell">john.doe@example.com</td> <td class="fd-table__cell"> <span class="fd-object-status fd-object-status--positive">Active</span> </td> <td class="fd-table__cell"> <button class="fd-button fd-button--transparent fd-button--compact" aria-label="Edit John Doe"> <i class="sap-icon--edit"></i> </button> <button class="fd-button fd-button--transparent fd-button--compact" aria-label="Delete John Doe"> <i class="sap-icon--delete"></i> </button> </td> </tr> <tr class="fd-table__row is-selected"> <td class="fd-table__cell"> <input type="checkbox" class="fd-checkbox" id="row2" checked aria-label="Select row 2" /> <label class="fd-checkbox__label" for="row2"></label> </td> <td class="fd-table__cell">Jane Smith</td> <td class="fd-table__cell">jane.smith@example.com</td> <td class="fd-table__cell"> <span class="fd-object-status fd-object-status--critical">Inactive</span> </td> <td class="fd-table__cell"> <button class="fd-button fd-button--transparent fd-button--compact" aria-label="Edit Jane Smith"> <i class="sap-icon--edit"></i> </button> <button class="fd-button fd-button--transparent fd-button--compact" aria-label="Delete Jane Smith"> <i class="sap-icon--delete"></i> </button> </td> </tr> <tr class="fd-table__row">