Component: @phase2/outline-core-button
#410
Conversation
|
✅ Deploy Preview for outlinejs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…utline-core-button
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/[email protected] |
WalkthroughThe changes involve updates to a button component library, including the introduction of new CSS variables for styling various button variants, the addition of new button components, and updates to existing button components. The updates include modifications to button styles, sizes, and states, as well as the introduction of new properties and methods in TypeScript files. Documentation and Storybook stories have been updated to reflect these changes, including deprecation notices and new usage examples. Changes
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 9
Configuration used: CodeRabbit UI
Files ignored due to filter (6)
- package-lock.json
- packages/components/outline-core-button/package.json
- packages/components/outline-core-button/tsconfig.build.json
- packages/components/outline-extended-button/package.json
- packages/components/outline-extended-button/tsconfig.build.json
- yarn.lock
Files selected for processing (19)
- .husky/pre-commit (1 hunks)
- .storybook/storybook.css (1 hunks)
- packages/components/outline-core-button/CHANGELOG.md (1 hunks)
- packages/components/outline-core-button/index.ts (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-default.css (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-link.css (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-primary.css (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-secondary.css (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-tertiary.css (1 hunks)
- packages/components/outline-core-button/src/outline-core-button.css (1 hunks)
- packages/components/outline-core-button/src/outline-core-button.lightdom.css (1 hunks)
- packages/components/outline-core-button/src/outline-core-button.ts (1 hunks)
- packages/components/outline-extended-button/index.ts (1 hunks)
- packages/components/outline-extended-button/outline-extended-button-lightdom.css (1 hunks)
- packages/components/outline-extended-button/outline-extended-button.css (1 hunks)
- packages/components/outline-extended-button/outline-extended-button.ts (1 hunks)
- packages/controllers/adopted-stylesheets/README.md (1 hunks)
- packages/documentation/outline-storybook/config/storybook.main.css (3 hunks)
- packages/documentation/outline-storybook/stories/components/outline-core-button.stories.ts (1 hunks)
Files skipped from review due to trivial changes (15)
- .husky/pre-commit
- .storybook/storybook.css
- packages/components/outline-core-button/CHANGELOG.md
- packages/components/outline-core-button/index.ts
- packages/components/outline-core-button/src/css-variables/vars-default.css
- packages/components/outline-core-button/src/css-variables/vars-link.css
- packages/components/outline-core-button/src/css-variables/vars-primary.css
- packages/components/outline-core-button/src/css-variables/vars-secondary.css
- packages/components/outline-core-button/src/outline-core-button.css
- packages/components/outline-core-button/src/outline-core-button.lightdom.css
- packages/components/outline-extended-button/index.ts
- packages/components/outline-extended-button/outline-extended-button-lightdom.css
- packages/components/outline-extended-button/outline-extended-button.css
- packages/controllers/adopted-stylesheets/README.md
- packages/documentation/outline-storybook/config/storybook.main.css
Additional comments: 8
packages/components/outline-core-button/src/css-variables/vars-tertiary.css (1)
- 38-73: The CSS variables are being computed using the
var()function with a fallback value. This is a good practice as it ensures that there will always be a value for these variables even if the primary variable is not defined. However, it's important to ensure that the fallback values are sensible defaults for your application.packages/components/outline-extended-button/outline-extended-button.ts (2)
12-12: The 'shiny' variant is being added to
buttonVariantsTypeswithout any corresponding styles being defined. Ensure that the styles for this variant are defined and included in the component's styles.27-27: The
AdoptedStyleSheetsinstance is being created withglobalStyles, but these styles are not included in the staticstylesproperty. If these styles are meant to be applied globally, they should be included in the staticstylesproperty. If they are meant to be applied only to this component, they should be included incomponentStyles.packages/components/outline-core-button/src/outline-core-button.ts (5)
33-33: The
linkVarsCSSResultGroup is included in the styles ofOutlineCoreButtonbut it's not clear how it's being used in this component. If it's not used, it should be removed to avoid unnecessary imports and potential confusion.36-36: The
buttonsVariantListstate variable is declared but not used anywhere in the component. If it's not needed, it should be removed to avoid unnecessary state management and potential confusion.38-42: The
AdoptedStyleSheetsinstance is created in theconnectedCallbackmethod and added to the controller. This is a good practice for managing styles in Web Components, but it's not clear how theAdoptedStyleSheetsinstance is used in this component. If it's not used, it should be removed to avoid unnecessary instantiation and potential confusion.106-123: The
rendermethod modifies the classes of a slotted button element based on the component's properties. This is a good practice for managing styles in Web Components, but it's not clear how the slotted button element is used in this component. If it's not used, this code should be removed to avoid unnecessary DOM manipulation and potential confusion.133-140: The
updatedmethod sets thearia-disabledattribute based on theis-disabledattribute. This is a good practice for managing accessibility in Web Components, but it's not clear how thearia-disabledattribute is used in this component. If it's not used, this code should be removed to avoid unnecessary attribute manipulation and potential confusion.
| /* | ||
| --outline-button--tertiary-padding | ||
| --outline-button--tertiary-radius | ||
| --outline-button--tertiary-padding | ||
| --outline-button--tertiary-radius | ||
| --outline-button--tertiary-bg-color | ||
| --outline-button--tertiary-text-color | ||
| --outline-button--tertiary-weight | ||
| --outline-button--tertiary-ring | ||
| --outline-button--tertiary-bg-color-hover | ||
| --outline-button--tertiary-text-color-hover | ||
| --outline-button--tertiary-weight-hover | ||
| --outline-button--tertiary-ring-hover | ||
| --outline-button--tertiary-bg-color-focus | ||
| --outline-button--tertiary-text-color-focus | ||
| --outline-button--tertiary-weight-focus | ||
| --outline-button--tertiary-ring-focus | ||
| --outline-button--tertiary-disabled-bg-color | ||
| --outline-button--tertiary-disabled-text-color | ||
| --outline-button--tertiary-disabled-weight | ||
| --outline-button--tertiary-disabled-ring | ||
| --outline-button--tertiary-disabled-bg-color-focus | ||
| --outline-button--tertiary-disabled-text-color-focus | ||
| --outline-button--tertiary-disabled-weight-focus | ||
| --outline-button--tertiary-disabled-ring-focus | ||
| */ |
There was a problem hiding this comment.
The CSS variables are declared in the comments but not assigned any values. This could lead to confusion for developers who are trying to understand or modify the code. It would be better to assign default values to these variables in the comments, or remove the comments if they are not necessary.
| ?is-disabled=${isDisabled} | ||
| > | ||
| ${defaultSlot} | ||
| </outline-core-button> |
There was a problem hiding this comment.
The closing tag should be </outline-extended-button> instead of </outline-core-button>.
- </outline-core-button>
+ </outline-extended-button>Committable suggestion (Beta)
| </outline-core-button> | |
| </outline-extended-button> |
| <div class="my-6"> | ||
| <outline-core-button class="mr-2 mb-4" button-variant="tertiary" button-url="#" button-size="large" button-label="Large Link"><button>Large Link</button></outline-core-button> | ||
| <outline-core-button class="mr-2 mb-4" button-variant="tertiary" button-url="#" button-label="Link"><button>Link</button></outline-core-button> | ||
| <outline-core-button class="mr-2 mb-4" button-variant="tertiary" button-url="#" button-size="small" button-label="Small Link"><button>Small Link<button></outline-core-button> |
There was a problem hiding this comment.
The closing tag for the button element is misplaced. It should be placed immediately after the button text "Small Link".
- <outline-core-button class="mr-2 mb-4" button-variant="tertiary" button-url="#" button-size="small" button-label="Small Link"><button>Small Link<button></outline-core-button>
+ <outline-core-button class="mr-2 mb-4" button-variant="tertiary" button-url="#" button-size="small" button-label="Small Link"><button>Small Link</button></outline-core-button>Committable suggestion (Beta)
| <outline-core-button class="mr-2 mb-4" button-variant="tertiary" button-url="#" button-size="small" button-label="Small Link"><button>Small Link<button></outline-core-button> | |
| <outline-core-button class="mr-2 mb-4" button-variant="tertiary" button-url="#" button-size="small" button-label="Small Link"><button>Small Link</button></outline-core-button> |
| import "@phase2/outline-core-button"; | ||
| // Import @phase2 version breaking Storybook | ||
| // import { buttonVariantsTypes } from "@phase2/outline-core-button/src/outline-core-button"; | ||
| import { buttonVariantsTypes } from "../outline-core-button/src/outline-core-button"; |
There was a problem hiding this comment.
The import path seems to be incorrect. It's importing from a relative path that goes into the src directory of another package. This could lead to issues if the structure of the outline-core-button package changes. It's better to expose buttonVariantsTypes from the main entry point of the outline-core-button package.
- import { buttonVariantsTypes } from "../outline-core-button/src/outline-core-button";
+ import { buttonVariantsTypes } from "@phase2/outline-core-button";Committable suggestion (Beta)
| import { buttonVariantsTypes } from "../outline-core-button/src/outline-core-button"; | |
| import { buttonVariantsTypes } from "@phase2/outline-core-button"; |
|
|
||
| @customElement('outline-extended-button') | ||
| export class OutlineExtendedButton extends OutlineCoreButton { | ||
| static styles: CSSResultGroup = [componentStyles]; |
There was a problem hiding this comment.
Only componentStyles are being included in the static styles property. If there are global styles that should be applied to this component, they should be included here as well.
- static styles: CSSResultGroup = [componentStyles];
+ static styles: CSSResultGroup = [componentStyles, globalStyles];Committable suggestion (Beta)
| static styles: CSSResultGroup = [componentStyles]; | |
| static styles: CSSResultGroup = [componentStyles, globalStyles]; |
| @customElement('outline-extended-button') | ||
| export class OutlineExtendedButton extends OutlineCoreButton { | ||
| static styles: CSSResultGroup = [componentStyles]; | ||
| AdoptedStyleSheets: AdoptedStyleSheets; |
There was a problem hiding this comment.
The AdoptedStyleSheets property should be private and follow the camelCase naming convention for instance variables.
- AdoptedStyleSheets: AdoptedStyleSheets;
+ private adoptedStyleSheets: AdoptedStyleSheets;Committable suggestion (Beta)
| AdoptedStyleSheets: AdoptedStyleSheets; | |
| private adoptedStyleSheets: AdoptedStyleSheets; |
| @property({ | ||
| type: String, | ||
| attribute: 'button-variant', | ||
| converter: buttonVariant => { | ||
| if (buttonVariant && !Object.values(buttonVariantsTypes).includes(buttonVariant)) { | ||
| buttonVariant = buttonVariantsTypes[0]; | ||
| } | ||
| return buttonVariant; | ||
| }, | ||
| }) | ||
| buttonVariant: ButtonVariant; |
There was a problem hiding this comment.
The buttonVariant property has a converter that checks if the provided value is one of the allowed variants. If it's not, it defaults to the first variant in the list. This is a good practice for ensuring valid property values, but the converter doesn't actually set the property value. It should return the new value to ensure the property is updated correctly.
@property({
type: String,
attribute: 'button-variant',
converter: buttonVariant => {
if (buttonVariant && !Object.values(buttonVariantsTypes).includes(buttonVariant)) {
buttonVariant = buttonVariantsTypes[0];
}
- return buttonVariant;
+ return buttonVariant || buttonVariantsTypes[0];
},
})
buttonVariant: ButtonVariant;Committable suggestion (Beta)
| @property({ | |
| type: String, | |
| attribute: 'button-variant', | |
| converter: buttonVariant => { | |
| if (buttonVariant && !Object.values(buttonVariantsTypes).includes(buttonVariant)) { | |
| buttonVariant = buttonVariantsTypes[0]; | |
| } | |
| return buttonVariant; | |
| }, | |
| }) | |
| buttonVariant: ButtonVariant; | |
| @property({ | |
| type: String, | |
| attribute: 'button-variant', | |
| converter: buttonVariant => { | |
| return buttonVariant && Object.values(buttonVariantsTypes).includes(buttonVariant) | |
| ? buttonVariant | |
| : buttonVariantsTypes[0]; | |
| }, | |
| }) | |
| buttonVariant: ButtonVariant; |
| @property({ | ||
| type: String, | ||
| attribute: 'button-size', | ||
| converter: buttonSize => { | ||
| if (buttonSize && !Object.values(buttonSizeTypes).includes(buttonSize)) { | ||
| buttonSize = buttonSizeTypes[0]; | ||
| } | ||
| return buttonSize; | ||
| }, | ||
| }) | ||
| buttonSize: ButtonSize; |
There was a problem hiding this comment.
The buttonSize property has a similar issue as the buttonVariant property. The converter should return the new value to ensure the property is updated correctly.
@property({
type: String,
attribute: 'button-size',
converter: buttonSize => {
if (buttonSize && !Object.values(buttonSizeTypes).includes(buttonSize)) {
buttonSize = buttonSizeTypes[0];
}
- return buttonSize;
+ return buttonSize || buttonSizeTypes[0];
},
})
buttonSize: ButtonSize;Committable suggestion (Beta)
| @property({ | |
| type: String, | |
| attribute: 'button-size', | |
| converter: buttonSize => { | |
| if (buttonSize && !Object.values(buttonSizeTypes).includes(buttonSize)) { | |
| buttonSize = buttonSizeTypes[0]; | |
| } | |
| return buttonSize; | |
| }, | |
| }) | |
| buttonSize: ButtonSize; | |
| @property({ | |
| type: String, | |
| attribute: 'button-size', | |
| converter: buttonSize => { | |
| return buttonSize && Object.values(buttonSizeTypes).includes(buttonSize) | |
| ? buttonSize | |
| : buttonSizeTypes[0]; | |
| }, | |
| }) | |
| buttonSize: ButtonSize; |
There was a problem hiding this comment.
Review Status
Actionable comments generated: 5
Configuration used: CodeRabbit UI
Files ignored due to filter (1)
- yarn.lock
Files selected for processing (10)
- packages/components/outline-core-button/src/css-variables/vars-default.css (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-link.css (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-primary.css (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-secondary.css (1 hunks)
- packages/components/outline-core-button/src/css-variables/vars-tertiary.css (1 hunks)
- packages/components/outline-core-button/src/outline-core-button.css (1 hunks)
- packages/components/outline-core-button/src/outline-core-button.lightdom.css (1 hunks)
- packages/components/outline-core-button/src/outline-core-button.ts (1 hunks)
- packages/documentation/outline-storybook/stories/components/outline-button.stories.ts (1 hunks)
- packages/documentation/outline-storybook/stories/components/outline-core-button.stories.ts (1 hunks)
Files skipped from review due to trivial changes (6)
- packages/components/outline-core-button/src/css-variables/vars-default.css
- packages/components/outline-core-button/src/css-variables/vars-primary.css
- packages/components/outline-core-button/src/css-variables/vars-secondary.css
- packages/components/outline-core-button/src/css-variables/vars-tertiary.css
- packages/components/outline-core-button/src/outline-core-button.css
- packages/components/outline-core-button/src/outline-core-button.lightdom.css
Additional comments: 4
packages/components/outline-core-button/src/css-variables/vars-link.css (1)
- 1-83: The CSS variable definitions for the
outline-core-buttonlink variant are well-documented, follow a consistent naming convention, and use a computed pattern for default values. Ensure that the variables like--outline-transparent,--outline-gray-500,--outline-ring-inset, and--outline-ring-offset-widthare defined elsewhere in the codebase for these computed defaults to work correctly.packages/components/outline-core-button/src/outline-core-button.ts (1)
- 109-127: The
rendermethod assumes that the slotted content is a button element, which may not always be the case. This could lead to unexpected behavior if other elements are slotted.packages/documentation/outline-storybook/stories/components/outline-button.stories.ts (1)
- 17-21: The
titleproperty of the default export has been updated to indicate that the original button component is now deprecated. This change should be clearly communicated to developers and stakeholders to ensure they are aware of the deprecation and can plan for any necessary refactoring or migration to the new button component.packages/documentation/outline-storybook/stories/components/outline-core-button.stories.ts (1)
- 17-17: The
titleproperty in the default export object does not reflect the deprecation of the original button component as mentioned in the summary. Please verify if the title should be updated to indicate deprecation.
|
|
||
| // export type ButtonVariant = keyof typeof buttonVariantsTypes; | ||
| export type ButtonVariant = (typeof buttonVariantsTypes)[number]; | ||
| export type ButtonSize = keyof typeof buttonSizeTypes; |
There was a problem hiding this comment.
The ButtonSize type is incorrectly defined using keyof which is meant for object keys, not array values.
- export type ButtonSize = keyof typeof buttonSizeTypes;
+ export type ButtonSize = (typeof buttonSizeTypes)[number];Committable suggestion
❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| export type ButtonSize = keyof typeof buttonSizeTypes; | |
| export type ButtonSize = (typeof buttonSizeTypes)[number]; |
| @customElement('outline-core-button') | ||
| export class OutlineCoreButton extends OutlineElement { | ||
| static styles: CSSResultGroup = [linkVars, componentStyles]; | ||
| AdoptedStyleSheets: AdoptedStyleSheets; |
There was a problem hiding this comment.
The AdoptedStyleSheets property should be camelCased to follow JavaScript naming conventions.
- AdoptedStyleSheets: AdoptedStyleSheets;
+ adoptedStyleSheets: AdoptedStyleSheets;Committable suggestion
❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| AdoptedStyleSheets: AdoptedStyleSheets; | |
| adoptedStyleSheets: AdoptedStyleSheets; |
| return buttonSize; | ||
| }, | ||
| }) | ||
| buttonSize: ButtonSize; |
There was a problem hiding this comment.
The buttonSize property lacks a default value, which could lead to undefined behavior if it's not set.
- buttonSize: ButtonSize;
+ buttonSize: ButtonSize = 'medium'; // or whichever size is considered the defaultCommittable suggestion
❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| buttonSize: ButtonSize; | |
| buttonSize: ButtonSize = 'medium'; // or whichever size is considered the default |
| updated() { | ||
| // TODO: Debug slot controller application. | ||
| // checks the is-disabled prop and manages aria-disabled attributes on the <outline-core-button> element itself. | ||
| if (this.hasAttribute('is-disabled')) { | ||
| this.setAttribute('aria-disabled', 'true'); | ||
| } else { | ||
| this.setAttribute('aria-disabled', 'false'); | ||
| } |
There was a problem hiding this comment.
The updated method sets the aria-disabled attribute based on the presence of the is-disabled attribute, but it should check the property instead.
- if (this.hasAttribute('is-disabled')) {
+ if (this.isDisabled) {Committable suggestion
❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| updated() { | |
| // TODO: Debug slot controller application. | |
| // checks the is-disabled prop and manages aria-disabled attributes on the <outline-core-button> element itself. | |
| if (this.hasAttribute('is-disabled')) { | |
| this.setAttribute('aria-disabled', 'true'); | |
| } else { | |
| this.setAttribute('aria-disabled', 'false'); | |
| } | |
| updated() { | |
| // TODO: Debug slot controller application. | |
| // checks the is-disabled prop and manages aria-disabled attributes on the <outline-core-button> element itself. | |
| if (this.isDisabled) { | |
| this.setAttribute('aria-disabled', 'true'); | |
| } else { | |
| this.setAttribute('aria-disabled', 'false'); | |
| } |
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: CodeRabbit UI
Files ignored due to filter (1)
- yarn.lock
Files selected for processing (2)
- packages/components/outline-core-button/src/css-variables/vars-tertiary.css (1 hunks)
- packages/documentation/outline-storybook/stories/components/outline-core-button.stories.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/components/outline-core-button/src/css-variables/vars-tertiary.css
Additional comments: 1
packages/documentation/outline-storybook/stories/components/outline-core-button.stories.ts (1)
- 17-17: The title should reflect the deprecation of the original button component as mentioned in the summary.
| @@ -0,0 +1,290 @@ | |||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | |||
There was a problem hiding this comment.
Reconsider the use of any type and try to use more specific types to improve type safety and maintainability.
| story: ` | ||
| ## The \`primary\` variant. | ||
|
|
||
| This is the primary button style variant. It is used for buttons that behave like a button, but look like a Button, but is a button. Or a Button. |
There was a problem hiding this comment.
The story description is confusing and may need rephrasing for clarity.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 2
Configuration used: CodeRabbit UI
Files ignored due to filter (5)
- package.json
- packages/components/outline-core-button/package.json
- packages/controllers/adopted-stylesheets/package.json
- packages/documentation/outline-storybook/package.json
- yarn.lock
Files selected for processing (3)
- packages/components/outline-core-button/CHANGELOG.md (1 hunks)
- packages/controllers/adopted-stylesheets/CHANGELOG.md (1 hunks)
- packages/documentation/outline-storybook/CHANGELOG.md (1 hunks)
Files skipped from review due to trivial changes (1)
- packages/components/outline-core-button/CHANGELOG.md
| ## 0.1.2 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - Updates for outline-core-button. |
There was a problem hiding this comment.
The changelog entry for version 0.1.2 only mentions "Updates for outline-core-button" without detailing the nature of the updates. Given the significant changes outlined in the PR summary, consider expanding this entry to include key changes such as new features, deprecations, and any breaking changes for better clarity and documentation.
| ## 0.0.5 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - Updates for outline-core-button. |
There was a problem hiding this comment.
The changelog entry for version 0.0.5 mentions "Updates for outline-core-button" but lacks detail. Given the extensive changes to the outline-core-button component described in the PR objectives and summaries, consider adding more specific information about the nature of these updates, such as new features or breaking changes, especially the deprecation of the original button component.
There was a problem hiding this comment.
Review Status
Actionable comments generated: 1
Configuration used: CodeRabbit UI
Files selected for processing (2)
- packages/components/outline-core-button/src/outline-core-button.ts (1 hunks)
- packages/documentation/outline-storybook/stories/components/outline-core-button.stories.mdx (1 hunks)
Files skipped from review due to trivial changes (1)
- packages/components/outline-core-button/src/outline-core-button.ts
| <outline-core-button button-url="#" button-size="large" button-label="Large Button"><button>Large Button</button></outline-core-button> | ||
| <outline-core-button button-url="#" button-label="Button"><button>Button</button></outline-core-button> | ||
| <outline-core-button button-url="#" button-size="small" button-label="Small Button"><button>Small Button</button></outline-core-button> |
There was a problem hiding this comment.
The button element inside the outline-core-button tag seems redundant and might not be necessary if outline-core-button is a custom element that should render its own button internally. Please verify if this is the intended usage or if it's a leftover from a previous implementation.
- <outline-core-button button-url="#" button-size="large" button-label="Large Button"><button>Large Button</button></outline-core-button>
- <outline-core-button button-url="#" button-label="Button"><button>Button</button></outline-core-button>
- <outline-core-button button-url="#" button-size="small" button-label="Small Button"><button>Small Button</button></outline-core-button>
+ <outline-core-button button-url="#" button-size="large" button-label="Large Button"></outline-core-button>
+ <outline-core-button button-url="#" button-label="Button"></outline-core-button>
+ <outline-core-button button-url="#" button-size="small" button-label="Small Button"></outline-core-button>Committable suggestion
❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| <outline-core-button button-url="#" button-size="large" button-label="Large Button"><button>Large Button</button></outline-core-button> | |
| <outline-core-button button-url="#" button-label="Button"><button>Button</button></outline-core-button> | |
| <outline-core-button button-url="#" button-size="small" button-label="Small Button"><button>Small Button</button></outline-core-button> | |
| <outline-core-button button-url="#" button-size="large" button-label="Large Button"></outline-core-button> | |
| <outline-core-button button-url="#" button-label="Button"></outline-core-button> | |
| <outline-core-button button-url="#" button-size="small" button-label="Small Button"></outline-core-button> |
|
TODO: |
himerus
changed the title
@phase2/outline-core-button
himerus
added
Type: Component Suggestion
Summary by CodeRabbit
New Features
OutlineCoreButtoncomponent with customizable variants and sizes.Enhancements
Bug Fixes
tailwind.cssimport to streamline styles.Documentation
OutlineCoreButtoncomponent in Storybook.Refactor
AdoptedStylesheetstoAdoptedStyleSheetsfor consistency.Style
Chores
OutlineCoreButton.