Skip to content

Commit

Permalink
fix(VaButton): added pointer events for disabled buttons (#4290)
Browse files Browse the repository at this point in the history 
* removed pointer events

* added storybook demo
  • Loading branch information
@ahmadJT
ahmadJT committed Jun 3, 2024
1 parent d129858 commit a03c6ff
Show file tree
Hide file tree
Showing 2 changed files with 153 additions and 52 deletions.
204 changes: 153 additions & 51 deletions packages/ui/src/components/va-button/VaButton.demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,40 +14,62 @@
</tr>

<tr>
<td>
Custom hover behavior
</td>
<td>Custom hover behavior</td>
<td>
<va-button hoverBehavior="opacity" :hoverOpacity="0.4">
Hover me
</va-button>
<va-button preset="primary" hoverBehavior="mask" hoverMaskColor="warning" :hoverOpacity="1">
<va-button
preset="primary"
hoverBehavior="mask"
hoverMaskColor="warning"
:hoverOpacity="1"
>
Hover me
</va-button>
<va-button preset="secondary" hoverBehavior="opacity" :hoverOpacity="0.4">
<va-button
preset="secondary"
hoverBehavior="opacity"
:hoverOpacity="0.4"
>
Hover me
</va-button>
<va-button preset="plain" hoverBehavior="mask" hoverMaskColor="warning" :hoverOpacity="1">
<va-button
preset="plain"
hoverBehavior="mask"
hoverMaskColor="warning"
:hoverOpacity="1"
>
Hover me
</va-button>
</td>
</tr>

<tr>
<td>
Custom press behavior
</td>
<td>Custom press behavior</td>
<td>
<va-button pressedBehavior="opacity" :pressedOpacity="0.4">
Press me
</va-button>
<va-button preset="primary" pressedBehavior="mask" pressedMaskColor="warning">
<va-button
preset="primary"
pressedBehavior="mask"
pressedMaskColor="warning"
>
Press me
</va-button>
<va-button preset="secondary" pressedBehavior="opacity" :pressedOpacity="0.4">
<va-button
preset="secondary"
pressedBehavior="opacity"
:pressedOpacity="0.4"
>
Press me
</va-button>
<va-button preset="plain" pressedBehavior="mask" pressedMaskColor="warning">
<va-button
preset="plain"
pressedBehavior="mask"
pressedMaskColor="warning"
>
Press me
</va-button>
</td>
Expand All @@ -61,17 +83,34 @@
<va-button size="small" round icon="block"></va-button>
<va-button size="small" round icon="block">Labely</va-button>
<va-button size="small" round icon-right="block">Labely</va-button>
<va-button size="small" round icon="block" icon-right="thumb_up">Labely</va-button>
<va-button size="small" round icon="block" icon-right="thumb_up" border-color="warning">Labely</va-button>
<va-button size="small" round icon="block" icon-right="thumb_up"
>Labely</va-button
>
<va-button
size="small"
round
icon="block"
icon-right="thumb_up"
border-color="warning"
>Labely</va-button
>
</td>
<td>
<va-button>Labely</va-button>
<va-button round>Labely</va-button>
<va-button round icon="block"></va-button>
<va-button round icon="block">Labely</va-button>
<va-button round icon-right="block">Labely</va-button>
<va-button round icon="block" icon-right="thumb_up">Labely</va-button>
<va-button round icon="block" icon-right="thumb_up" border-color="warning">Labely</va-button>
<va-button round icon="block" icon-right="thumb_up"
>Labely</va-button
>
<va-button
round
icon="block"
icon-right="thumb_up"
border-color="warning"
>Labely</va-button
>
</td>
</tr>
<td>
Expand All @@ -80,8 +119,17 @@
<va-button size="large" round icon="block"></va-button>
<va-button size="large" round icon="block">Labely</va-button>
<va-button size="large" round icon-right="block">Labely</va-button>
<va-button size="large" round icon="block" icon-right="thumb_up">Labely</va-button>
<va-button size="large" round icon="block" icon-right="thumb_up" border-color="warning">Labely</va-button>
<va-button size="large" round icon="block" icon-right="thumb_up"
>Labely</va-button
>
<va-button
size="large"
round
icon="block"
icon-right="thumb_up"
border-color="warning"
>Labely</va-button
>
</td>

<tr>
Expand All @@ -91,7 +139,9 @@
<va-button size="small" preset="primary">Primary</va-button>
<va-button size="small" preset="secondary">Secondary</va-button>
<va-button size="small" preset="plain">Plain</va-button>
<va-button size="small" preset="plainOpacity">Plain with opacity</va-button>
<va-button size="small" preset="plainOpacity"
>Plain with opacity</va-button
>
</td>
</tr>

Expand All @@ -102,19 +152,31 @@
<va-button size="large" preset="primary">Primary</va-button>
<va-button size="large" preset="secondary">Secondary</va-button>
<va-button size="large" preset="plain">Plain</va-button>
<va-button size="large" preset="plainOpacity">Plain with opacity</va-button>
<va-button size="large" preset="plainOpacity"
>Plain with opacity</va-button
>
</td>
</tr>

<tr>
<td>With icons</td>
<td>
<va-button icon="create">Edit Button</va-button>
<va-button preset="secondary" icon="gavel" iconRight="clear">Mixed Button</va-button>
<va-button preset="plainOpacity" icon="gavel">Plain with icon</va-button>
<va-button preset="primary" size="small" icon="create">Small Edit Button</va-button>
<va-button preset="primary" icon="gavel" icon-color="warning">Mixed Colors</va-button>
<va-button preset="primary" icon-right="clear">Dropdown Button</va-button>
<va-button preset="secondary" icon="gavel" iconRight="clear"
>Mixed Button</va-button
>
<va-button preset="plainOpacity" icon="gavel"
>Plain with icon</va-button
>
<va-button preset="primary" size="small" icon="create"
>Small Edit Button</va-button
>
<va-button preset="primary" icon="gavel" icon-color="warning"
>Mixed Colors</va-button
>
<va-button preset="primary" icon-right="clear"
>Dropdown Button</va-button
>
</td>
</tr>

Expand All @@ -125,7 +187,9 @@
<va-button preset="primary" color="danger">Danger</va-button>
<va-button preset="secondary" color="warning">Warning</va-button>
<va-button preset="plain" color="success">Success</va-button>
<va-button preset="plainOpacity" color="textPrimary">Dark</va-button>
<va-button preset="plainOpacity" color="textPrimary"
>Dark</va-button
>
</td>
</tr>

Expand All @@ -136,15 +200,42 @@
<va-button preset="primary" disabled>Primary</va-button>
<va-button preset="secondary" disabled>Secondary</va-button>
<va-button preset="plain" disabled>Plain</va-button>
<va-button preset="plainOpacity" disabled>Plain with opacity</va-button>
<va-button preset="plainOpacity" disabled
>Plain with opacity</va-button
>
</td>
</tr>

<tr>
<td>Disabled state with popovers</td>
<td>
<va-popover message="Popover text">
<va-button disabled>Accent (default)</va-button>
</va-popover>
<va-popover message="Popover text">
<va-button preset="primary" disabled>Primary</va-button>
</va-popover>
<va-popover message="Popover text">
<va-button preset="secondary" disabled>Secondary</va-button>
</va-popover>
<va-popover message="Popover text">
<va-button preset="plain" disabled>Plain</va-button>
</va-popover>
<va-popover message="Popover text">
<va-button preset="plainOpacity" disabled
>Plain with opacity</va-button
>
</va-popover>
</td>
</tr>

<tr>
<td>Button tags</td>
<td>
<va-button>Default</va-button>
<va-button href="http://epic-spinners.epicmax.co/">A-link Button</va-button>
<va-button href="http://epic-spinners.epicmax.co/"
>A-link Button</va-button
>
<va-button to="/demo">Router-link Button</va-button>
</td>
</tr>
Expand All @@ -170,7 +261,9 @@
<tr>
<td>Border Color</td>
<td>
<va-button border-color="primary" :backgroundOpacity="0">Button</va-button>
<va-button border-color="primary" :backgroundOpacity="0"
>Button</va-button
>
</td>
</tr>

Expand All @@ -186,50 +279,59 @@
</tr>

<tr>
<td>Buttons with loading status</td>
<td>
Buttons with loading status
</td>
<td>
<va-button :loading="buttonLoading" @click="buttonLoading = true">Start loading</va-button>
<va-button preset="primary" :loading="buttonLoading" @click="buttonLoading = true">Start
loading
<va-button :loading="buttonLoading" @click="buttonLoading = true"
>Start loading</va-button
>
<va-button
preset="primary"
:loading="buttonLoading"
@click="buttonLoading = true"
>Start loading
</va-button>
<va-button @click="buttonLoading = false">Stop loading</va-button>
</td>
</tr>

<tr>
<td>
Round button
</td>
<td>Round button</td>
<td>
<va-button round>Label</va-button>
<va-button round icon="block" size="small" />
<va-button round icon="block" />
<va-button round icon="block" size="large" />
<va-button preset="primary" round icon="block" />
<va-button preset="secondary" round icon="block" />
<va-button preset="primary" border-color="warning" round>Label</va-button>
<va-button preset="primary" border-color="warning" round icon="block">Label</va-button>
<va-button preset="primary" border-color="warning" round
>Label</va-button
>
<va-button
preset="primary"
border-color="warning"
round
icon="block"
>Label</va-button
>
<va-button round icon="thumb_up">Label</va-button>
</td>
</tr>

<tr>
<td>Public methods (focus, blur)</td>
<td>
Public methods (focus, blur)
</td>
<td>
<va-button @click="$refs.testButton.focus()">Focus Main Button</va-button>
<va-button @click="$refs.testButton.focus()"
>Focus Main Button</va-button
>
<va-button ref="testButton">Main Button</va-button>
<va-button @click="$refs.testButton.blur()">Blur Main Button</va-button>
<va-button @click="$refs.testButton.blur()"
>Blur Main Button</va-button
>
</td>
</tr>

<tr>
<td>
Multiline text
</td>
<td>Multiline text</td>
<td>
<va-button style="width: 150px;">
Default Button with long text
Expand All @@ -247,8 +349,7 @@
<template #prepend>
<VaCheckbox v-model="isChecked" color="secondary" readonly />
</template>
&nbsp;
Button
&nbsp; Button
</va-button>
<va-button>
<template #prepend>prepend</template>
Expand All @@ -266,9 +367,10 @@
import { VaIcon, VaCheckbox } from '../index'
import { VaConfig } from '../va-config'
import { VaButton } from './index'
import VaPopover from '../va-popover/VaPopover.vue'
export default {
components: { VaButton, VaIcon, VaConfig, VaCheckbox },
components: { VaButton, VaIcon, VaConfig, VaCheckbox, VaPopover },
data: () => ({
buttonLoading: true,
isChecked: false,
Expand Down
1 change: 0 additions & 1 deletion packages/ui/src/styles/resources/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
@mixin va-disabled() {
cursor: default;
opacity: 0.4;
pointer-events: none;
user-select: none;
}

Expand Down

0 comments on commit a03c6ff

Please sign in to comment.