feat: new component rail navigation and new props "fab" for button#1969
Merged
Conversation
- Introduced `RailNavigation` and `RailNavigationItem` components for vertical navigation. - Implemented styles using LESS for both components, including hover and active states. - Added support for badges and disabled states in navigation items. - Created documentation in English and Chinese for usage examples and API reference. - Integrated localization support for dynamic text in examples. - Added example implementation showcasing various features of the navigation component.
… improved structure
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@varlet/cli
@varlet/icons
@varlet/import-resolver
@varlet/preset-tailwindcss
@varlet/preset-unocss
@varlet/shared
@varlet/touch-emulator
@varlet/ui
@varlet/use
@varlet/vite-plugins
commit: |
Deploying varlet with
|
| Latest commit: |
a12137b
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://fc5a0947.varlet.pages.dev |
| Branch Preview URL: | https://feat-rail-navigation.varlet.pages.dev |
Member
Author
Member
Author
|
Please share the specific change or issue you want me to handle in this PR, and I’ll address it right away. |
There was a problem hiding this comment.
Pull request overview
This PR introduces a new RailNavigation / RailNavigationItem navigation component pair (including themes, docs, examples, and tests) and adds a new fab prop to the existing Button component to support FAB-style sizing/shape.
Changes:
- Added
RailNavigation+RailNavigationItemcomponents with styling variables, docs/examples, and a full test suite. - Added
fab: booleanprop toButton, with new style variables (--button-fab-size,--button-fab-border-radius), theme defaults, docs, and tests. - Updated theme exports and type declarations to include the new components and style variables.
Reviewed changes
Copilot reviewed 40 out of 45 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/varlet-ui/varlet.config.mjs | Adds RailNavigation to the docs navigation config. |
| packages/varlet-ui/types/styleVars.d.ts | Adds new style vars for Button FAB and RailNavigation/RailNavigationItem. |
| packages/varlet-ui/types/railNavigationItem.d.ts | New public type declarations for RailNavigationItem (props/slots/events). |
| packages/varlet-ui/types/railNavigation.d.ts | New public type declarations for RailNavigation (props/slots/events). |
| packages/varlet-ui/types/index.d.ts | Exports new types and registers new global components for Vue typing. |
| packages/varlet-ui/types/button.d.ts | Adds fab?: boolean to Button public props typing. |
| packages/varlet-ui/src/themes/md3-light/railNavigation.ts | Adds MD3 light theme defaults for RailNavigation vars. |
| packages/varlet-ui/src/themes/md3-light/index.ts | Includes railNavigation theme vars in MD3 light theme export. |
| packages/varlet-ui/src/themes/md3-light/button.ts | Adds MD3 light defaults for Button FAB vars. |
| packages/varlet-ui/src/themes/md3-dark/railNavigation.ts | Adds MD3 dark theme defaults for RailNavigation vars. |
| packages/varlet-ui/src/themes/md3-dark/index.ts | Includes railNavigation theme vars in MD3 dark theme export. |
| packages/varlet-ui/src/themes/md3-dark/button.ts | Adds MD3 dark defaults for Button FAB vars. |
| packages/varlet-ui/src/themes/dark/railNavigation.ts | Adds dark theme defaults for RailNavigation vars. |
| packages/varlet-ui/src/themes/dark/index.ts | Includes railNavigation theme vars in dark theme export. |
| packages/varlet-ui/src/themes/dark/button.ts | Adds dark defaults for Button FAB vars. |
| packages/varlet-ui/src/themes/tests/snapshots/index.spec.js.snap | Updates theme snapshots for new Button/RailNavigation vars. |
| packages/varlet-ui/src/rail-navigation/RailNavigation.vue | New RailNavigation component implementation and provider wiring. |
| packages/varlet-ui/src/rail-navigation/railNavigation.less | New RailNavigation base styles and variables. |
| packages/varlet-ui/src/rail-navigation/provide.ts | New provide/inject binding key + child binding helper. |
| packages/varlet-ui/src/rail-navigation/props.ts | Defines RailNavigation props and events (change, update:active). |
| packages/varlet-ui/src/rail-navigation/index.ts | Component install/export entry for RailNavigation. |
| packages/varlet-ui/src/rail-navigation/example/locale/zh-CN.ts | Adds zh-CN example strings for RailNavigation demo. |
| packages/varlet-ui/src/rail-navigation/example/locale/en-US.ts | Adds en-US example strings for RailNavigation demo. |
| packages/varlet-ui/src/rail-navigation/example/locale/index.ts | Locale wiring for RailNavigation examples. |
| packages/varlet-ui/src/rail-navigation/example/index.vue | New demo page showcasing RailNavigation usage patterns. |
| packages/varlet-ui/src/rail-navigation/docs/zh-CN.md | New zh-CN docs for RailNavigation API/usage/vars. |
| packages/varlet-ui/src/rail-navigation/docs/en-US.md | New en-US docs for RailNavigation API/usage/vars. |
| packages/varlet-ui/src/rail-navigation/tests/index.spec.js | New tests covering RailNavigation behavior, contracts, and docs alignment. |
| packages/varlet-ui/src/rail-navigation-item/RailNavigationItem.vue | New RailNavigationItem component implementation (active, ripple, badge, disabled). |
| packages/varlet-ui/src/rail-navigation-item/railNavigationItem.less | New RailNavigationItem styles and variables. |
| packages/varlet-ui/src/rail-navigation-item/provide.ts | New parent injection helper for RailNavigationItem. |
| packages/varlet-ui/src/rail-navigation-item/props.ts | Defines RailNavigationItem props and click event. |
| packages/varlet-ui/src/rail-navigation-item/index.ts | Component install/export entry for RailNavigationItem. |
| packages/varlet-ui/src/rail-navigation-item/docs/zh-CN.md | New zh-CN docs for RailNavigationItem API/vars. |
| packages/varlet-ui/src/rail-navigation-item/docs/en-US.md | New en-US docs for RailNavigationItem API/vars. |
| packages/varlet-ui/src/button/props.ts | Adds fab prop to Button runtime props. |
| packages/varlet-ui/src/button/example/locale/zh-CN.ts | Adds zh-CN label for FAB button example section. |
| packages/varlet-ui/src/button/example/locale/en-US.ts | Adds en-US label for FAB button example section. |
| packages/varlet-ui/src/button/example/index.vue | Adds FAB button examples. |
| packages/varlet-ui/src/button/docs/zh-CN.md | Documents FAB button usage + props + style vars. |
| packages/varlet-ui/src/button/docs/en-US.md | Documents FAB button usage + props + style vars. |
| packages/varlet-ui/src/button/Button.vue | Adds --fab class binding driven by new fab prop. |
| packages/varlet-ui/src/button/button.less | Adds FAB sizing/shape CSS variables and styles (+ round+fab compatibility). |
| packages/varlet-ui/src/button/tests/index.spec.js | Adds test coverage for round + fab behavior and styling contract. |
| packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue | Minor setup reordering (no functional change) to align declarations. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+2
to
+9
| <div | ||
| v-ripple="{ disabled: !ripple || disabled }" | ||
| :class="classes(n(), [isActive, n('--active')], [disabled, n('--disabled')])" | ||
| :style="{ '--rail-navigation-item-transition-duration-override': allowTransition ? undefined : '0ms' }" | ||
| :aria-disabled="disabled" | ||
| role="button" | ||
| @click="handleClick" | ||
| > |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 40 out of 45 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
packages/varlet-ui/src/bottom-navigation-item/BottomNavigationItem.vue:85
activeis referenced inside theisActivecomputed before it is declared (const { animated, active, ... } = bottomNavigation). Reordering these declarations avoids temporal-dead-zone confusion and potential linting issues.
setup(props) {
const { index, bottomNavigation, bindBottomNavigation } = useBottomNavigation()
const name = computed<string | undefined>(() => props.name)
const isActive = computed<boolean>(() => [name.value, index.value].includes(active.value))
const badgeProps = computed(() => (props.badge === true ? defaultBadgeProps : props.badge) as BadgeProps)
const { animated, active, activeColor, inactiveColor, variant } = bottomNavigation
const bottomNavigationItemProvider: BottomNavigationItemProvider = {
name,
index,
}
…lated documentation
Comment on lines
+6
to
+10
| :aria-disabled="disabled" | ||
| role="button" | ||
| @click="handleClick" | ||
| @mouseenter="handleMouseenter" | ||
| @mouseleave="handleMouseleave" |
Comment on lines
+329
to
+331
| expect(item.attributes('tabindex')).toBeUndefined() | ||
| expect(item.attributes('aria-current')).toBeUndefined() | ||
| expect(item.attributes('role')).toBe('button') |
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.
Checklist
List of tasks you have already done and plan to do.
Change information
Describe your modifications here.
Issues
The issues you want to close, formatted as close #1.
Related Links
Links related to this pr.