Skip to content

feat!: v3 — new components, Popover API, CSS anchor positioning, and major refactors#7

Open
markusand wants to merge 119 commits into
mainfrom
v3
Open

feat!: v3 — new components, Popover API, CSS anchor positioning, and major refactors#7
markusand wants to merge 119 commits into
mainfrom
v3

Conversation

@markusand

Copy link
Copy Markdown
Owner

Summary

  • New components: ActionMenu (replaces ContextualMenu), Progress, Slider, PullTo
  • Breaking: Accordion removed; ContextualMenu removed; Calendar props renamed (invalidexcluded, validallowed); Button variant/size refactored to boolean flags; Modal uses v-model:open; Chip close event renamed to action; Toggler radio bool replaced by group name
  • Dropdown: migrated to Popover API with CSS anchor positioning (16 positions); focus-based open state; open/close methods exposed
  • Popover: rebuilt on top of Dropdown with directional arrow system and entry/exit animations
  • Tabs: animated TabView transitions with directional awareness
  • Styling: BEM naming convention, standardised CSS custom properties across all components, shared utility classes (is-block, is-panel, is-input, etc.), focus-visible replaces focus interactions
  • a11y: ARIA semantics and labels added across components; roving tabindex composable + keyboard nav for TreeList and DatePicker
  • Icon system: icons resolved via Icon.vue with Lucide CDN as default; local icon bundle removed
  • Docs: full theming documentation, expanded use-bocins-ui skill with overlay patterns and component guides

Test plan

  • Run npm run dev and verify all Storybook stories render correctly
  • Verify new components: ActionMenu, Progress, Slider, PullTo
  • Verify Dropdown / Popover open/close with all 16 positions
  • Verify Tabs animated transitions (forward/backward direction)
  • Verify keyboard navigation (roving tabindex) in TreeList and DatePicker
  • Verify Calendar excluded/allowed props work correctly
  • Verify Modal v-model:open binding
  • Run npm run lint and confirm no errors
  • Run npm run build and confirm dist output is clean

Move icon path resolution into the Icon component so
callers pass bare filenames (e.g. "chevron-down.svg")
instead of building full paths with config.iconPath.
Relative src values are prefixed with config.iconPath;
absolute and protocol-relative URLs are used as-is.

Change the default iconPath from /icons to the Lucide
GitHub CDN, removing the postinstall copy step and
bundled icon files.
Redesigns the contextual menu component as ActionMenu with
support for nested submenus, hotkeys, and a cleaner API using
typed ActionGroup/Action instead of the previous ContextualMenuProps.
Replace `props.X` template references with direct prop access
and consolidate inline fallbacks into `withDefaults`. Also
disable `vue/require-default-prop` ESLint rule to align with
the new pattern.
markusand added 29 commits May 29, 2026 18:07
…ional arrow system

Rebuild Popover on top of Dropdown to leverage CSS anchor positioning and the
16-position layout system. Adds a directional arrow (::before/::after border
hack) that adapts to all position variants, with configurable offset and proper
border alignment for -in-* positions.

Refactors Tooltip to inject theme vars via inline style instead of a scoped
class, fixing the cross-component cascade issue.
Selector and DatePicker retain toggler-width behaviour by applying the
width directly to their label span, which sizes the button and toggler
via shrink-to-fit.
Add `inset` prop to constrain thumbs within track bounds.

Expose additional CSS custom properties for thumb shape (`--slider-thumb-border`,
`--radius`, `--thumb-width`/`--thumb-height`) enabling non-circular and
rectangular thumb styles.

Rename `CustomColor` story to `CustomStyle` with a richer example
showcasing the new styling flexibility.
Remove type, placeholder, autocomplete from InputProps and replace explicit
event re-emits with $attrs passthrough. class and style are intercepted and
merged into the container; all remaining attrs (including event listeners and
native input attributes) flow through to the inner <input>. Stories updated
with an InputStoryArgs type to document native attrs in a separate category.
@netlify

netlify Bot commented May 31, 2026

Copy link
Copy Markdown

Deploy Preview for bocins ready!

Name Link
🔨 Latest commit 5fe3af1
🔍 Latest deploy log https://app.netlify.com/projects/bocins/deploys/6a1c79e0a585d20008d04b61
😎 Deploy Preview https://deploy-preview-7--bocins.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

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