Skip to content
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

feat(kbutton): add appearance="none" to button #2469

Merged
merged 6 commits into from
Oct 23, 2024
Merged

feat(kbutton): add appearance="none" to button #2469

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fde88c4
feat(kbutton): add appearance="none" to button
Justineo Oct 18, 2024
079aa0c
docs(ktable): add docs
Justineo Oct 18, 2024
ddde977
fix(kbutton): add more basestyle, remove href for disabled link
Justineo Oct 18, 2024
1b1ff3c
docs(ktable): refine note
Justineo Oct 18, 2024
9ed5fdc
fix(kbutton): add style when `icon` is set
Justineo Oct 20, 2024
76f88b7
docs(kbutton): improve docs, remove icon+text example from sandbox
Justineo Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .stylelintrc.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ export default {
rules: {
// Disallow relative font units since we don't know the base font size in other apps
'unit-disallowed-list': ['rem', 'em'],
'order/properties-alphabetical-order': true,
'order/properties-order': [
['all'],
{ 'unspecified': 'bottomAlphabetical' },
],
'@kong/design-tokens/use-proper-token': true,
'@stylistic/indentation': [2, { baseIndentLevel: 0 }],
// Only allow @kong/design-tokens or `--kong-ui-*` CSS custom properties
Expand Down
5 changes: 4 additions & 1 deletion docs/components/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,25 +13,28 @@ and configuration options.

### appearance

The Button component can take 1 of 4 appearance values:
The Button component can take 1 of 5 appearance values:

- `primary`
- `secondary`
- `tertiary`
- `danger`
- `none`

<div class="spacing-container">
<KButton appearance="primary">Primary</KButton>
<KButton appearance="secondary">Secondary</KButton>
<KButton appearance="tertiary">Tertiary</KButton>
<KButton appearance="danger">Danger</KButton>
<KButton appearance="none">None</KButton>
</div>

```html
<KButton appearance="primary">Primary</KButton>
<KButton appearance="secondary">Secondary</KButton>
<KButton appearance="tertiary">Tertiary</KButton>
<KButton appearance="danger">Danger</KButton>
<KButton appearance="none">None</KButton>
adamdehaven marked this conversation as resolved.
Show resolved Hide resolved
```

### size
Expand Down
1 change: 1 addition & 0 deletions docs/vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default defineConfig({
css: {
preprocessorOptions: {
scss: {
api: 'modern',
// Inject the @kong/design-tokens SCSS variables, kongponents variables and mixins to make them available for all components.
// This is not needed in host applications.
additionalData: `
Expand Down
130 changes: 129 additions & 1 deletion sandbox/pages/SandboxButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
title="appearance"
>
<template #description>
KButton component takes 1 of 4 appearance values:
KButton component takes 1 of 5 appearance values:
<ul>
<li>
<em>primary</em> - default value
Expand All @@ -27,6 +27,9 @@
<li>
<em>danger</em>
</li>
<li>
<em>none</em>
</li>
</ul>
</template>
<div class="horizontal-spacing">
Expand All @@ -51,6 +54,12 @@
>
Danger
</KButton>
<KButton
appearance="none"
@click="test"
>
None
</KButton>
</div>
<div class="horizontal-spacing">
<KButton
Expand Down Expand Up @@ -80,6 +89,13 @@
>
Disabled
</KButton>
<KButton
appearance="none"
disabled
@click="test"
>
Disabled
</KButton>
</div>
</SandboxSectionComponent>
<SandboxSectionComponent
Expand Down Expand Up @@ -188,6 +204,13 @@
>
Danger
</KButton>
<KButton
appearance="none"
target="_blank"
to="https://kongponents.konghq.com/"
>
None
</KButton>
<KButton
disabled
target="_blank"
Expand Down Expand Up @@ -229,6 +252,13 @@
>
Danger
</KButton>
<KButton
appearance="none"
target="_blank"
:to="{ name: 'home' }"
>
None
</KButton>
<KButton
disabled
target="_blank"
Expand Down Expand Up @@ -274,6 +304,13 @@
<AddCircleIcon />
Danger
</KButton>
<KButton
appearance="none"
size="large"
>
<AddCircleIcon />
None
</KButton>
</div>
<div class="horizontal-spacing">
<KButton>
Expand All @@ -292,6 +329,10 @@
<AddCircleIcon />
Danger
</KButton>
<KButton appearance="none">
<AddCircleIcon />
None
</KButton>
</div>
<div class="horizontal-spacing">
<KButton size="small">
Expand Down Expand Up @@ -319,6 +360,13 @@
<AddCircleIcon />
Danger
</KButton>
<KButton
appearance="none"
size="small"
>
<AddCircleIcon />
None
</KButton>
</div>
<!-- icon after -->
<div class="horizontal-spacing">
Expand Down Expand Up @@ -347,6 +395,13 @@
Danger
<ChevronDownIcon />
</KButton>
<KButton
appearance="none"
size="large"
>
None
<ChevronDownIcon />
</KButton>
</div>
<div class="horizontal-spacing">
<KButton>
Expand All @@ -365,6 +420,10 @@
Danger
<ChevronDownIcon />
</KButton>
<KButton appearance="none">
None
<ChevronDownIcon />
</KButton>
</div>
<div class="horizontal-spacing">
<KButton size="small">
Expand Down Expand Up @@ -392,6 +451,13 @@
Danger
<ChevronDownIcon />
</KButton>
<KButton
appearance="none"
size="small"
>
None
<ChevronDownIcon />
</KButton>
</div>
</SandboxSectionComponent>

Expand Down Expand Up @@ -429,6 +495,13 @@
>
<DisabledIcon />
</KButton>
<KButton
appearance="none"
icon
size="large"
>
<AddCircleIcon />
</KButton>
</div>
<div class="horizontal-spacing">
<KButton icon>
Expand All @@ -452,6 +525,12 @@
>
<DisabledIcon />
</KButton>
<KButton
appearance="none"
icon
>
<AddCircleIcon />
</KButton>
</div>
<div class="horizontal-spacing">
<KButton
Expand Down Expand Up @@ -481,6 +560,36 @@
>
<DisabledIcon />
</KButton>
<KButton
appearance="none"
icon
size="small"
>
<AddCircleIcon />
</KButton>
</div>
</SandboxSectionComponent>
<SandboxTitleComponent
is-subtitle
title="Custom button"
/>
<SandboxSectionComponent>
<div class="horizontal-spacing">
<KButton
appearance="none"
class="custom-button"
@click="test"
>
Custom
</KButton>
<KButton
appearance="none"
class="custom-button"
disabled
@click="test"
>
Custom
</KButton>
</div>
</SandboxSectionComponent>
</div>
Expand All @@ -507,4 +616,23 @@ const test = () => {
gap: $kui-space-50;
}
}

/* Low-specificity styles should be able to override */
.custom-button {
background-color: #42b883;
border-radius: 8px;
color: #fff;
font-size: 16px;
font-weight: 600;
padding: 8px 16px;

&:hover:not(:disabled) {
background-color: #33a06f;
transition-duration: .2s;
}

&:disabled {
opacity: 0.3;
}
}
</style>
Loading