Table Component

Q: How should truncation work in table cells?
A: The standard is to truncate after one line of text in table cells. Users can see the full content on hover, which displays a tooltip with the complete text. For tables with expandable rows, content can be displayed in full in the expanded section.

Q: Where should the expand row button be placed in tables?
A: The expand row button is traditionally placed at the right side of the table row. However, there are discussions about potentially moving it to the left side to improve discoverability, especially for users with ultrawide monitors or tables with fewer columns.

Q: How does column sorting work across pages in tables?
A: The component is flexible and can handle sorting either within the current page or across all pages, depending on how the backend is configured. This should be determined based on your specific use case and technical implementation.

Q: What is the expected behavior for the "Select All" checkbox across pagination?
A: When using the "Select All" checkbox on one page and then deselecting all on another page, the current default behavior is that selections are cleared across all pages. This behavior has been questioned and is under review.

Banners and Notifications

Q: Where should banners be placed on a page?
A: Banner placement depends on context:

• Page-level notifications should appear at the top of the page

• Section-specific notifications should be placed directly above the related section

• Error messages related to form fields should appear under the specific field

  
  

Q: Can banners be used within accordions?
A: Yes, banners can be used within accordions, but consider potential contrast issues with the accordion's gray background. Test to ensure readability and adequate contrast.

Q: How do we handle dynamic content in banners?
A: Banners can display dynamic content such as metrics or counts. Keep the text concise and clear about what the numbers represent. For temporary states, include clear information about when the banner will disappear.

Form Components

Q: What is the standard for validating form fields?
A: Validation can happen on blur/focus loss or on form submission. For validation that requires server-side checks, validate on submission. Error messages should appear below the field with appropriate color and icon treatment.

Q: How should we handle required fields that depend on other inputs?
A: If fields are dependent on each other, disable the dependent field until the primary field is completed. In error states, show errors only for the initial required field rather than both fields.

Q: Do we have a password input component?
A: Yes, there is a password input component variant, though some teams have reported difficulty finding it in the library. It should be available as a variant of the standard input component.

Navigation Patterns

Q: How do we handle tabs that exceed the available space?
A: When tabs exceed the horizontal space available, use the adaptive variant which will display as many tabs as possible and add overflow indicators to show there are additional tabs. Users can scroll horizontally to access the hidden tabs.

Q: Should we use both vertical and horizontal navigation in Settings pages?
A: Vertical navigation at the left should be the primary navigation method for Settings pages. Add horizontal tabs at the top only when there are clear subtopics within a main section that need their own navigation.

Q: What are the recommended patterns for sub-navigation?
A: There are three main patterns:

1. Tabs for main sections

2. Dropdown select for switching between related views

3. View switcher for toggling between alternative presentations of the same data

Component Variants

Q: Do we have icons within select dropdowns?
A: Yes, select components can include icons, though some teams have reported issues with implementation. Check the current design library documentation for the latest guidance.

Q: Is there a disabled tab variant?
A: Yes, there is a disabled tab variant in the React library, but it may not be consistently represented in the Figma library. This discrepancy has been noted and should be addressed in future updates.

Q: How do we handle middle truncation in components?
A: Middle truncation would be beneficial but has been reported as not currently supported. For now, use start or end truncation based on your use case.

Accessibility

Q: How do we handle tooltips on disabled elements?
A: For disabled elements that require explanation, a tooltip should appear on hover. There have been inconsistencies with implementation, particularly when an info icon is present. The ideal behavior is that hovering anywhere on the disabled element shows the tooltip.

Q: Can we use standalone icons?
A: Standalone icons without accompanying text are not fully accessible. Icons should either be paired with visible text or have proper aria-labels. For interactive elements, use button components with icons rather than standalone icons.

Q: How should interactive components work within radio groups?
A: Nesting interactive components inside radio groups creates accessibility issues. Instead, use a pattern where selection enables related interactive components, but keeps them visually and functionally separate from the radio input itself.

Design System Updates

Q: How are design system updates communicated?
A: Updates to the Design Library and Spec Library are announced in the design system Slack channel with version numbers (e.g., 24.4, 24.7). These updates include changes to components, new variants, bug fixes, and deprecated patterns.

Q: What do I do if I find a bug or need a component enhancement?
A: Use the Figma Libraries Ticket system to request enhancements or report bugs. You can also raise issues in the design system Slack channel for discussion before creating a formal ticket.

Q: Why are there differences between the Spec Library and Design Library?
A: The Spec Library and Design Library may not always be synchronized. Generally, the Spec Library is considered the source of truth, and the Design Library is updated to match over time. Check the most recent version notes to understand current discrepancies.