Closed
Conversation
Replace simple SVG icon rotation with mask-based conic-gradient approach: radial-gradient ring mask + 105° conic window + three-layer keyframe animations (ring / tail / ::before, ::after) for the expand-and-contract arc effect. Refs: #86ewxf1t3
Remove iconProps API and SpinnerIcon dependency. Render two nested <span> elements (spinnerRing + spinnerTail) that leverage the new core CSS animation. Update spec to assert ring element presence; remove obsolete iconProps tests. Refs: #86ewxf1t3
…gTypes and size story ## Changes - Fix `overflowStrategy` prop not being forwarded from `Select` to `SelectTrigger`, causing `wrap` mode to never take effect — the prop was accepted by the component's interface but silently dropped during destructuring. ## Storybook - Add `component` and `argTypes` to the Select stories meta, documenting all major props (`mode`, `size`, `overflowStrategy`, `clearable`, `disabled`, `error`, `fullWidth`, `loading`, `readOnly`, `required`, `placeholder`, etc.) with controls and default values. - Add `Size` story showcasing `main` (default) vs `sub` size variants side by side. - Add `Multiple` story demonstrating `overflowStrategy="wrap"` behavior.
fix(react/select): update select issues
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace 33% keyframe pause pattern with full-cycle sweep (0%→100%), so the gradient animates smoothly over the full 1600ms loop duration instead of flashing in the first 533ms. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…footer icon color to neutral-strong Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…enu height - Add width transition on nav host for smooth collapse/expand animation - Remove overflow-y: auto from expand content (now handled by Scrollbar) - Hoist overflow-menu item-height/gap vars to block scope - Replace overflow-menu sub-menu overflow-y: auto with explicit height so the Scrollbar component can constrain and scroll correctly Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Use Scrollbar component in content area (disabled when collapsed)
- Use Scrollbar component in overflow menu sub-menus
- Add offsetMainAxis={8} to Tooltip in NavigationOption and
NavigationUserMenu to fix broken default gap calculation with px tokens
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
In collapsed (icon-only) state, constrain __content width to fit-content and center it, so the hover/active brand-faint background wraps only around the icon rather than spanning the full nav width. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> fix(core/navigation): update list css
… animation Add __title-wrapper BEM element with max-width transition to enable smooth collapse/expand animation. Use CSS :has() to target only icon-bearing items. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…animation Wrap Fade in titleWrapper span so max-width and opacity can animate independently. keepMount preserves the DOM node through collapse transitions. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…block Add min-width: 0 for proper flex shrinking and display: block on title for text-overflow ellipsis to function correctly inside the wrapper span. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace max-width transition (invisible for large values) with :empty{display:none}
on the wrapper. Fade unmounts the title after exit animation, wrapper auto-hides
via :empty, eliminating layout space cleanly without complex CSS transitions.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…s names Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add max-width: 100% to collapsed __content to prevent icon-less items from overflowing the collapsed nav width - Add brand-ghost background for active+open items in collapsed mode to match the consistent collapsed active appearance Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> background-brand-faint fix(core/navigation): header icon size fix(core/navigation): collapsed transition
…lapse transition Remove key-based remount of <ul> and always render items to keep NavigationOption component instances alive, allowing the Fade animation on title text to play when collapsing/expanding. Overflow items are hidden via collapsedHiddenKeys context instead of being excluded from the render tree. NavigationOverflowMenu is moved outside Scrollbar to avoid being clipped. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates several UI components and tokens to improve loading/scrolling UX and navigation behavior, including replacing the Spin icon-based indicator with a CSS ring, adding loading/infinite-scroll hooks to Select, and enhancing Navigation collapsed/overflow interactions and scrolling.
Changes:
- Replace
Spin’s icon spinner with a CSS-based ring/tail indicator and adjust related core styles/classes. - Add loading + reach/leave-bottom callbacks to
Selectand wire them through toDropdown; update stories accordingly. - Improve
Navigationlayout/overflow handling (Scrollbar usage, active overflow state, tooltip offset), plus minor design token/style tweaks.
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/system/src/motion/_motion.scss | Adjust motion token duration (long). |
| packages/react/src/Spin/Spin.tsx | Switch spinner markup to CSS ring/tail; remove iconProps customization surface. |
| packages/react/src/Spin/Spin.stories.tsx | Update story usage to reflect new sizing. |
| packages/react/src/Spin/Spin.spec.tsx | Update tests for new ring markup and remove iconProps tests. |
| packages/react/src/Select/Select.tsx | Add loading, loadingPosition, loadingText, onReachBottom, onLeaveBottom; forward to Dropdown. |
| packages/react/src/Select/Select.stories.tsx | Expand Storybook controls; demonstrate loading + infinite scroll via new callbacks. |
| packages/react/src/PageFooter/PageFooter.tsx | Change default overflow icon to horizontal variant. |
| packages/react/src/PageFooter/PageFooter.stories.tsx | Update story to match new default icon. |
| packages/react/src/Navigation/NavigationUserMenu.tsx | Adjust tooltip offset. |
| packages/react/src/Navigation/NavigationOverflowMenu.tsx | Add active state detection for overflow button; wrap submenus with Scrollbar. |
| packages/react/src/Navigation/NavigationOption.tsx | Hide logic update for collapsed overflow; add tooltip offset; wrap title for layout. |
| packages/react/src/Navigation/NavigationIconButton.tsx | Add active prop and styling hook. |
| packages/react/src/Navigation/NavigationHeader.tsx | Improve collapsed/children layout; fade title behavior. |
| packages/react/src/Navigation/Navigation.tsx | Add Scrollbar around list; compute collapsedHiddenKeys for overflow/active behavior; add list class. |
| packages/react/src/Navigation/context.ts | Extend activated context with collapsedHiddenKeys. |
| packages/core/src/spin/spin.ts | Add new ring/tail class exports. |
| packages/core/src/spin/_spin-styles.scss | Implement CSS ring/tail spinner with motion tokens; adjust size config to ring/stroke. |
| packages/core/src/skeleton/_skeleton-styles.scss | Tweak skeleton keyframe timing. |
| packages/core/src/progress/_progress-styles.scss | Update typography token for percent text. |
| packages/core/src/page-footer/_page-footer-styles.scss | Add border-top and reorder box-sizing. |
| packages/core/src/navigation/navigation.ts | Add new navigation class hooks (list, title wrapper, active icon button, etc.). |
| packages/core/src/navigation/_navigation-styles.scss | Navigation layout/overflow styling updates (Scrollbar/list hooks, collapsed header behavior, etc.). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+124
to
+128
| /** | ||
| * Whether the dropdown is in a loading state. | ||
| * @default false | ||
| */ | ||
| loading?: boolean; |
Comment on lines
+90
to
+94
| ul { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: $sub-menu-item-gap; | ||
| padding: 0 spacing.semantic-variable(padding, horizontal, tight); |
Comment on lines
27
to
30
| stretch?: boolean; | ||
| /** | ||
| * Custom icon props | ||
| */ | ||
| iconProps?: Omit<IconProps, 'icon' | 'spin'>; | ||
| /** | ||
| * Whether Spin is loading. | ||
| * @default false |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
修復項目