Skip to content

feat: enhance VButton with outlined variant, size system and SCSS mixins - #586

Draft
timothejoubert wants to merge 9 commits into
mainfrom
feature/improve-v-button
Draft

feat: enhance VButton with outlined variant, size system and SCSS mixins#586
timothejoubert wants to merge 9 commits into
mainfrom
feature/improve-v-button

Conversation

@timothejoubert

Copy link
Copy Markdown
Contributor
  • VButton: add outlined variant, refactor size system with CSS variables
  • SCSS: add apply mixin to css-vars-map for declaring properties with var() fallbacks
  • SCSS: add _v-button-outlined.scss component styles
  • Stories: add Design and WithSlots stories for VButton, update CssSize story

@timothejoubert timothejoubert self-assigned this Jun 10, 2026
Comment thread app/components/VButton.vue Outdated
Comment thread app/assets/scss/components/_v-button.scss Outdated

// Outputs CSS property declarations using the CSS variables set by `size()`, with sm values as fallbacks.
// Usage: @include v-button.apply('') or @include v-button.apply('label')
@mixin apply($prefix: '') {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why moving the css props to the mixin instead of keeping it into the VButton component style?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like that, we can fully style a custom element with the same VButton variant style without using the VButton component

@timothejoubert
timothejoubert marked this pull request as draft June 23, 2026 13:52
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.

2 participants