Skip to content

Feat/tab component & reuse accross pages#1118

Open
CamilleGuillory wants to merge 8 commits into
tprouvot:releaseCandidatefrom
CamilleGuillory:feat/Tab-Component-&-Reuse-accross-pages
Open

Feat/tab component & reuse accross pages#1118
CamilleGuillory wants to merge 8 commits into
tprouvot:releaseCandidatefrom
CamilleGuillory:feat/Tab-Component-&-Reuse-accross-pages

Conversation

@CamilleGuillory
Copy link
Copy Markdown
Contributor

@CamilleGuillory CamilleGuillory commented Feb 14, 2026

New components

  1. TabBar (addon/components/TabBar.js)

    • Shared SLDS Scoped Tabs component with two modes:
      • Simple mode: Static tabs for popup and options.
      • Advanced mode: Dynamic, editable, closable, reorderable tabs for Data Export.
    • Supports drag-and-drop reordering, inline tab renaming, context menu, and middle-click to close.
  2. ButtonMenu (addon/components/ButtonMenu.js)

    • Dropdown menu inspired by lightning-button-menu.
    • Supports variants, icons, and keyboard use (e.g. Escape to close).

Reuse across pages

  • TabBar used in: Popup, Options, Data Export, Inspect.
  • ButtonMenu used in: Inspect (action menus).

Images

Date export tabs:
image

Option tabs:
image

Popup tabs:
image

Show all date (inspec) tabs & dropdown:
image

Styling

  • Tab-related styles consolidated in addon/components/TabBar.css.
  • ButtonMenu-specific styles in addon/styles/sfir.css.

Checklist before requesting a review

  • I have read and understand the Contributions section
  • My PR relates to an existing issue or feature request and I discussed it with maintainer
  • I used SLDS style and limit the usage of custom CSS
  • I have performed a self-review of my code
  • I ran the unit tests and my PR does not break any tests
  • I documented the changes I've made on the CHANGES.md and followed actual conventions
  • I added a new section on how-to.md (optional)

- Added a new `TabBar` component to support dynamic, editable, and closable tabs, improving user experience in managing queries.
- Integrated the `TabBar` into the data export interface, replacing static tab elements for better functionality.
- Updated styles in `TabBar.css` to align with SLDS guidelines and enhance visual consistency.
- Refactored related components to utilize the new `TabBar`, ensuring seamless interaction and state management across tabs.
- Introduced a `ButtonMenu` component for improved dropdown menu functionality, allowing for better user interaction with menu items.
- Updated `inspect.css` and `options.css` to include new styles for the sticky tab bar and button menu, enhancing visual consistency and usability.
- Refactored existing components to integrate the new `ButtonMenu`, replacing static elements for a more dynamic experience.
- Improved layout and styling for tab controls and filter options in the inspect page, ensuring a cohesive design across the application.
- Modified the TabBar component to conditionally render the close button based on the number of tabs, enhancing user experience by preventing unnecessary actions when only one tab is present.
- Updated documentation for the Data Export page to clarify tab closing options, including middle-click functionality and visibility conditions for the close button.
…idation error handling

- Enhanced the ButtonMenu component with keyboard navigation and focus management
- Added new styles for error messages and button interactions
@CamilleGuillory CamilleGuillory force-pushed the feat/Tab-Component-&-Reuse-accross-pages branch from c9fc991 to 610d7d2 Compare May 5, 2026 13:59
…ors with TabBar

- Make the global filter on the Inspect page apply on every tab (previously it only worked on the "all" tab); per-column filters still layer on top
- Update inspect and options e2e tests to target the new TabBar markup (li[role='tab'][data-aspect=...], .slds-tabs_scoped__nav) and the renamed "Global Filter" input
- Extend the Filter Fields test to assert the global filter remains effective after switching to the Fields tab
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant