Skip to content

feat: Add Button #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 25 commits into from
Closed

feat: Add Button #23

wants to merge 25 commits into from

Conversation

@lux-v
Copy link

@lux-v lux-v commented Aug 12, 2025

Component Created: Button.vue

Stories: ~/stories/Button.stories.js

Notes:

Added Button.vue with Primary and Secondary variants.

image

Checklist:

  • I checked that it is working locally in the dev server
  • I checked that it is working locally in the storybook
  • I checked that it is working locally in the
    library-website-nuxt dev server
  • I added a screenshot of it working
  • UX has reviewed and approved this
  • I assigned this PR to someone on the dev team to review
  • I used a conventional commit message
  • I assigned myself to this PR

@lux-v lux-v self-assigned this Aug 12, 2025
@lux-v lux-v requested a review from Copilot August 12, 2025 20:56
Copilot AI reviewed Aug 12, 2025
View reviewed changes
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR adds a new Button component to the Vue component library with primary and secondary variants, outlined styles, color options, and support for both button and link functionality.

  • Implements a flexible Button component with TypeScript support and comprehensive styling
  • Creates Button.stories.js with multiple story variants for Storybook documentation
  • Adds SCSS styling with hover states, disabled states, and color variants

Reviewed Changes

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

File Description
button.types.ts Defines TypeScript interfaces and enums for button component props
_button.scss Implements comprehensive styling for button variants, states, and hover effects
Button.stories.js Creates Storybook stories showcasing all button variants and configurations
Button.vue Main button component implementation with conditional rendering for links vs buttons

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

packages/vue-component-library/src/lib-components/Button.vue Outdated
type: "button",
isDisabled: false,
isOutlined: false,
isGrey: false,
Copy link

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

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

The prop isGrey is defined in the defaults but doesn't exist in the ButtonProps interface. This will cause a TypeScript error and the prop is unused in the component.

Suggested change
isGrey: false,

Copilot uses AI. Check for mistakes.
packages/vue-component-library/src/stories/Button.stories.js Outdated
text: "Secondary Button",
variant: ButtonVariant.Secondary,
onClick: () => {
alert("Secondray Button Clicked!")
Copy link

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

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

Typo in alert message: "Secondray" should be "Secondary".

Suggested change
alert("Secondray Button Clicked!")
alert("Secondary Button Clicked!")

Copilot uses AI. Check for mistakes.
packages/vue-component-library/src/stories/Button.stories.js Outdated
variant: ButtonVariant.Secondary,
isOutlined: true,
onClick: () => {
alert("Secondray Button Clicked!")
Copy link

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

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

Typo in alert message: "Secondray" should be "Secondary".

Suggested change
alert("Secondray Button Clicked!")
alert("Secondary Button Clicked!")

Copilot uses AI. Check for mistakes.
packages/vue-component-library/src/stories/Button.stories.js Outdated
variant: ButtonVariant.Secondary,
color: ButtonColor.Grey,
onClick: () => {
alert("Secondray Button Clicked!")
Copy link

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

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

Typo in alert message: "Secondray" should be "Secondary".

Suggested change
alert("Secondray Button Clicked!")
alert("Secondary Button Clicked!")

Copilot uses AI. Check for mistakes.
packages/vue-component-library/src/stories/Button.stories.js Outdated
isOutlined: true,
color: ButtonColor.Grey,
onClick: () => {
alert("Secondray Button Clicked!")
Copy link

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

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

Typo in alert message: "Secondray" should be "Secondary".

Suggested change
alert("Secondray Button Clicked!")
alert("Secondary Button Clicked!")

Copilot uses AI. Check for mistakes.
packages/vue-component-library/src/stories/Button.stories.js Outdated
variant: ButtonVariant.Secondary,
isDisabled: true,
onClick: () => {
alert("Secondray Button Clicked!")
Copy link

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

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

Typo in alert message: "Secondray" should be "Secondary".

Suggested change
alert("Secondray Button Clicked!")
alert("Secondary Button Clicked!")

Copilot uses AI. Check for mistakes.
packages/vue-component-library/src/styles/default/_button.scss Outdated
&.secondary {
padding: 9px 20px;
border-radius: 5px;
background-color: $accent-blue;
Copy link

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

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

Inconsistent use of SCSS variables vs CSS custom properties. Line 37 uses $accent-blue while other lines use CSS custom properties like var(--color-secondary-blue-01). Consider using CSS custom properties consistently for better maintainability.

Suggested change
background-color: $accent-blue;
background-color: var(--color-secondary-blue-01);

Copilot uses AI. Check for mistakes.
packages/vue-component-library/src/styles/default/_button.scss Outdated
&.is-outlined {
background-color: transparent;
border: 1px solid $subtitle-grey;
color: $subtitle-grey;
Copy link

Copilot AI Aug 12, 2025

Choose a reason for hiding this comment

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

Inconsistent use of SCSS variables vs CSS custom properties. Line 61 uses $subtitle-grey while other lines use CSS custom properties. Consider using CSS custom properties consistently.

Suggested change
color: $subtitle-grey;
background-color: var(--color-subtitle-grey);
color: var(--color-white);
&.is-outlined {
background-color: transparent;
border: 1px solid var(--color-subtitle-grey);
color: var(--color-subtitle-grey);

Copilot uses AI. Check for mistakes.
@lux-v lux-v mentioned this pull request Aug 13, 2025
Open
8 tasks
@lux-v lux-v mentioned this pull request Aug 15, 2025
Open
8 tasks
@netlify
Copy link

netlify bot commented Sep 3, 2025 •
edited
Loading

❌ Deploy Preview for ucla-components-storybook failed. Why did it fail? →

Name Link
🔨 Latest commit d6becfc
🔍 Latest deploy log https://app.netlify.com/projects/ucla-components-storybook/deploys/69161e39a373a300082a01f5

@lux-v lux-v changed the title UCLA - Button feat: Add Button Sep 3, 2025
@lux-v lux-v closed this Nov 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

@lux-v lux-v

Labels

feature Made into a PR to UCLA Reviewed By Dave

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@lux-v @pghorpade