feat: condensed view — Navigation, OrderSidebar, Pagination by garrity-miepub · Pull Request #155 · mieweb/ui

garrity-miepub · 2026-03-31T21:36:16Z

Add data-slot attributes and body.condensed CSS overrides for Navigation components, OrderSidebar, and Pagination.

Components

Breadcrumb

6 data-slots: breadcrumb, breadcrumb-list, breadcrumb-separator, breadcrumb-link, breadcrumb-page, breadcrumb-ellipsis
Condensed CSS: smaller font, tighter gap, smaller separator icons
renderLink output wrapped with data-slot span for consistent condensed styling
Ellipsis gets breadcrumb-ellipsis data-slot + descendant override for custom link children

CommandPalette

13 data-slots: command-palette-backdrop, command-palette, command-palette-search, command-palette-filters, command-palette-results, command-palette-empty, command-palette-group, command-palette-item, command-palette-item-icon, command-palette-footer, command-palette-trigger
Condensed CSS: smaller modal, compact search/filters/results, tighter item rows
ARIA fix: added role="listbox" to results container

LanguageSelector

7 data-slots across dropdown/native/inline variants
Moved to Components/Forms & Inputs Storybook category

OrderSidebar

10 data-slots: order-sidebar-backdrop, order-sidebar, order-sidebar-header, order-sidebar-content, order-sidebar-status, order-sidebar-details, order-sidebar-detail, order-sidebar-notes, order-sidebar-footer
Condensed CSS: narrower panel (22rem), tighter padding, smaller typography, compact notes box

Pagination

10 data-slots for Pagination: pagination, pagination-first, pagination-prev, pagination-next, pagination-last, pagination-pages, pagination-page, pagination-ellipsis
3 data-slots for SimplePagination: simple-pagination, pagination-prev, pagination-next, pagination-info
Condensed CSS: smaller buttons (h-6), tighter gaps, smaller icons (0.75rem), compact page info

Add 5 data-slots: breadcrumb (nav), breadcrumb-list (ol), breadcrumb-separator, breadcrumb-link, breadcrumb-page. Add condensed CSS: smaller font (0.6875rem), tighter gap, and reduced separator icon size.

cloudflare-workers-and-pages · 2026-03-31T21:36:45Z

Deploying ui with Cloudflare Pages

Latest commit:	`572217d`
Status:	✅ Deploy successful!
Preview URL:	https://e76a1445.ui-6d0.pages.dev
Branch Preview URL:	https://feature-condensed-view-navig.ui-6d0.pages.dev

View logs

Copilot

Pull request overview

Adds condensed-view support for the Breadcrumb component by introducing dedicated data-slot hooks and corresponding condensed CSS overrides.

Changes:

Added data-slot attributes to Breadcrumb structure elements (nav/list/separator/link/page).
Introduced condensed-mode CSS overrides for breadcrumb spacing, typography, and separator icon sizing.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/components/Breadcrumb/Breadcrumb.tsx	Adds `data-slot` attributes to breadcrumb elements to enable targeted styling.
src/styles/condensed-view.css	Adds condensed-mode overrides for breadcrumb spacing, font sizing, and separator SVG sizing.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/styles/condensed-view.css

src/components/Breadcrumb/Breadcrumb.tsx

Add 11 data-slots across CommandPalette and CommandPaletteTrigger: - command-palette-backdrop: overlay - command-palette: modal container - command-palette-search: search input section - command-palette-filters: category filter bar - command-palette-results: results list container - command-palette-empty: empty state - command-palette-group: category group header - command-palette-item: individual result item - command-palette-footer: footer with keyboard hints - command-palette-trigger: trigger button Add ~108 lines condensed CSS with reduced padding, font sizes, icon sizes, and spacing across all regions.

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (1)

src/components/Breadcrumb/Breadcrumb.tsx:99

The ellipsis breadcrumb item (...) is still rendered with text-sm and has no data-slot, so in condensed mode it will remain larger than the other breadcrumb text (which is reduced via breadcrumb-link/breadcrumb-page). Consider adding a slot/class for the ellipsis element and applying the same condensed font-size/line-height overrides for visual consistency.

              {isEllipsis ? (
                <span className="text-muted-foreground text-sm">...</span>
              ) : isLast || !item.href ? (

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/styles/condensed-view.css

src/components/CommandPalette/CommandPalette.tsx

src/components/Breadcrumb/Breadcrumb.tsx

src/components/CommandPalette/CommandPalette.tsx

Add 7 data-slots across all 3 LanguageSelector variants: - language-selector: dropdown root container - language-selector-trigger: dropdown trigger button - language-selector-dropdown: dropdown menu - language-selector-option: dropdown list items - language-selector-native: native select root - language-selector-inline: inline button group root - language-selector-inline-option: inline buttons Add condensed CSS covering trigger, dropdown, options, native select, and inline buttons with reduced padding, font sizes, icon sizes, and border-radius.

LanguageSelector is a form input (select/dropdown), not navigation. Recategorize from 'Components/Navigation' to 'Components/Forms & Inputs' in Storybook.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Breadcrumb: - Add font-size/line-height to breadcrumb-list so ellipsis and text separators inherit condensed sizing - Add font-size rule for breadcrumb-separator (text separators) - Wrap renderLink output with data-slot='breadcrumb-link' span so custom links get condensed styling CommandPalette: - Add data-slot='command-palette-item-icon' to icon wrapper div - Replace fragile '> div:first-child' CSS selector with explicit data-slot selector (fixes bug when item has no icon) - Add data-slot='command-palette-item' to renderItem wrapper div for consistent condensed styling

- Add 10 data-slot attributes: order-sidebar-backdrop, order-sidebar, order-sidebar-header, order-sidebar-content, order-sidebar-status, order-sidebar-details, order-sidebar-detail, order-sidebar-notes, order-sidebar-footer - Condensed CSS: narrower panel (22rem), tighter padding, smaller typography (0.8125rem title, 0.6875rem body, 0.625rem labels), compact notes box, reduced spacing

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/styles/condensed-view.css

src/components/Breadcrumb/Breadcrumb.tsx

- Merge duplicate breadcrumb-list CSS rules into single block - Fix order-sidebar-details: replace gap (no effect on non-flex dl) with margin-based spacing via > * + * selector - Add breadcrumb-ellipsis data-slot so ellipsis gets condensed sizing - Add descendant override for breadcrumb-link children so custom renderLink elements with explicit text-sm get condensed font-size - Update PR title/description to include OrderSidebar

- Add 10 data-slots to Pagination: pagination, pagination-first, pagination-prev, pagination-next, pagination-last, pagination-pages, pagination-page, pagination-ellipsis - Add 3 data-slots to SimplePagination: simple-pagination, pagination-prev, pagination-next, pagination-info - Condensed CSS: smaller buttons (h-6), tighter gaps, smaller icons (0.75rem), compact page info text

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/Pagination/Pagination.tsx

src/components/CommandPalette/CommandPalette.tsx

src/components/OrderSidebar/OrderSidebar.tsx

- Add role="listbox" to CommandPalette results container (ARIA fix for role="option" items without listbox ancestor) - Remove trailing space in OrderSidebar className template string - Update PR title/description to include Pagination

- Add 10 data-slots: sidebar-backdrop, sidebar, sidebar-header, sidebar-footer, sidebar-content, sidebar-nav, sidebar-nav-group, sidebar-nav-group-button, sidebar-nav-item, sidebar-search - Condensed CSS: tighter padding on header/footer/content, compact nav items (0.25rem py, 0.6875rem font), smaller icons (1rem), smaller badges, compact search input

Copilot

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/CommandPalette/CommandPalette.tsx

src/styles/condensed-view.css

- Remove role="listbox" from CommandPalette results container (default path uses <button>, not role="option") - Remove role="option"/aria-selected from renderItem wrapper, add role="button" instead (fixes lint + correct ARIA semantics) - Remove ineffective gap rule on sidebar-nav (uses space-y-* margin-based spacing, not flex/grid)

feat(Breadcrumb): add condensed view with data-slots

980707b

Add 5 data-slots: breadcrumb (nav), breadcrumb-list (ol), breadcrumb-separator, breadcrumb-link, breadcrumb-page. Add condensed CSS: smaller font (0.6875rem), tighter gap, and reduced separator icon size.

Copilot AI review requested due to automatic review settings March 31, 2026 21:36

Copilot started reviewing on behalf of garrity-miepub March 31, 2026 21:36 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

src/styles/condensed-view.css Show resolved Hide resolved

src/components/Breadcrumb/Breadcrumb.tsx Show resolved Hide resolved

garrity-miepub marked this pull request as ready for review March 31, 2026 22:00

Copilot AI review requested due to automatic review settings March 31, 2026 22:00

Copilot started reviewing on behalf of garrity-miepub March 31, 2026 22:01 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

src/styles/condensed-view.css Outdated Show resolved Hide resolved

src/components/CommandPalette/CommandPalette.tsx Show resolved Hide resolved

src/components/Breadcrumb/Breadcrumb.tsx Show resolved Hide resolved

src/components/CommandPalette/CommandPalette.tsx Show resolved Hide resolved

garrity-miepub added 2 commits March 31, 2026 18:04

refactor(LanguageSelector): move to Forms & Inputs category

b3ab979

LanguageSelector is a form input (select/dropdown), not navigation. Recategorize from 'Components/Navigation' to 'Components/Forms & Inputs' in Storybook.

Copilot AI review requested due to automatic review settings March 31, 2026 22:10

garrity-miepub changed the title ~~feat(Breadcrumb): add condensed view with data-slots~~ feat(condensed): add condensed view to Navigation components Mar 31, 2026

Copilot started reviewing on behalf of garrity-miepub March 31, 2026 22:11 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

garrity-miepub added 2 commits March 31, 2026 18:17

Copilot AI review requested due to automatic review settings March 31, 2026 22:36

Copilot started reviewing on behalf of garrity-miepub March 31, 2026 22:36 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

src/styles/condensed-view.css Show resolved Hide resolved

src/styles/condensed-view.css Outdated Show resolved Hide resolved

src/styles/condensed-view.css Show resolved Hide resolved

src/components/Breadcrumb/Breadcrumb.tsx Outdated Show resolved Hide resolved

garrity-miepub changed the title ~~feat(condensed): add condensed view to Navigation components~~ feat: condensed view — Navigation + OrderSidebar Mar 31, 2026

garrity-miepub added 2 commits March 31, 2026 18:57

Copilot AI review requested due to automatic review settings March 31, 2026 23:12

Copilot started reviewing on behalf of garrity-miepub March 31, 2026 23:12 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

src/components/Pagination/Pagination.tsx Show resolved Hide resolved

src/components/CommandPalette/CommandPalette.tsx Outdated Show resolved Hide resolved

src/components/OrderSidebar/OrderSidebar.tsx Outdated Show resolved Hide resolved

garrity-miepub changed the title ~~feat: condensed view — Navigation + OrderSidebar~~ feat: condensed view — Navigation, OrderSidebar, Pagination Mar 31, 2026

garrity-miepub added 2 commits March 31, 2026 19:21

fix: address Copilot review round 5

9f455db

- Add role="listbox" to CommandPalette results container (ARIA fix for role="option" items without listbox ancestor) - Remove trailing space in OrderSidebar className template string - Update PR title/description to include Pagination

Copilot AI review requested due to automatic review settings March 31, 2026 23:38

Copilot started reviewing on behalf of garrity-miepub March 31, 2026 23:38 View session

Copilot AI reviewed Mar 31, 2026

View reviewed changes

src/components/CommandPalette/CommandPalette.tsx Outdated Show resolved Hide resolved

src/styles/condensed-view.css Outdated Show resolved Hide resolved

src/styles/condensed-view.css Show resolved Hide resolved

garrity-miepub merged commit 4e95ba3 into main Apr 1, 2026
10 checks passed

garrity-miepub deleted the feature/condensed-view-navigation branch April 1, 2026 00:10

Conversation

garrity-miepub commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Components

Breadcrumb

CommandPalette

LanguageSelector

OrderSidebar

Pagination

Uh oh!

cloudflare-workers-and-pages bot commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ui with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

garrity-miepub commented Mar 31, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 31, 2026 •

edited

Loading