From 4dd05ec2e9ea09c63baabf52a779f2387421ba1f Mon Sep 17 00:00:00 2001 From: Rijk van Zanten Date: Wed, 1 Apr 2020 11:40:24 -0400 Subject: [PATCH] Add align and dashed props to button (#277) --- src/components/v-button/readme.md | 30 +++++++------- src/components/v-button/v-button.story.ts | 29 ++++++++++++++ src/components/v-button/v-button.vue | 48 +++++++++++++++++++---- 3 files changed, 86 insertions(+), 21 deletions(-) diff --git a/src/components/v-button/readme.md b/src/components/v-button/readme.md index fee97d1bda..957509d31a 100644 --- a/src/components/v-button/readme.md +++ b/src/components/v-button/readme.md @@ -47,20 +47,22 @@ The loading slot is rendered _on top_ of the content that was there before. Make ## Props -| Prop | Description | Default | -|------------|---------------------------------------------------------------------------|----------| -| `block` | Enable full width (display block) | `false` | -| `icon` | Remove padding / min-width. Meant to be used with just an icon as content | `false` | -| `outlined` | No background | `false` | -| `rounded` | Enable rounded corners | `false` | -| `type` | HTML `type` attribute | `button` | -| `disabled` | Disabled state | `false` | -| `loading` | Loading state | `false` | -| `x-small` | Render extra small | `false` | -| `small` | Render small | `false` | -| `large` | Render large | `false` | -| `x-large` | Render extra large | `false` | -| `to` | Render as vue router-link | `false` | +| Prop | Description | Default | +|------------|---------------------------------------------------------------------------|------------| +| `block` | Enable full width (display block) | `false` | +| `icon` | Remove padding / min-width. Meant to be used with just an icon as content | `false` | +| `outlined` | No background | `false` | +| `rounded` | Enable rounded corners | `false` | +| `type` | HTML `type` attribute | `'button'` | +| `disabled` | Disabled state | `false` | +| `loading` | Loading state | `false` | +| `x-small` | Render extra small | `false` | +| `small` | Render small | `false` | +| `large` | Render large | `false` | +| `x-large` | Render extra large | `false` | +| `to` | Render as vue router-link | `false` | +| `align` | Align content in button. One of `left | center | right` | `'center'` | +| `dashed` | Render the border dashed. Meant to be used with `outlined`. | `false` | ## Slots diff --git a/src/components/v-button/v-button.story.ts b/src/components/v-button/v-button.story.ts index 7b0167895b..1a635e142c 100644 --- a/src/components/v-button/v-button.story.ts +++ b/src/components/v-button/v-button.story.ts @@ -4,6 +4,7 @@ import { boolean, number, color, + select, optionsKnob as options, } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; @@ -14,6 +15,8 @@ import markdown from './readme.md'; import withPadding from '../../../.storybook/decorators/with-padding'; import VueRouter from 'vue-router'; +import { defineComponent } from '@vue/composition-api'; + Vue.component('v-button', VButton); Vue.component('v-icon', VIcon); Vue.use(VueRouter); @@ -35,6 +38,9 @@ export const withText = () => ({ text: { default: text('Text in button', 'Click me'), }, + align: { + default: select('Align', ['left', 'center', 'right'], 'center', 'Button'), + }, block: { default: boolean('Block', false, 'Button'), }, @@ -47,6 +53,12 @@ export const withText = () => ({ outlined: { default: boolean('Outlined', false, 'Button'), }, + dashed: { + default: boolean('Dashed', false, 'Button'), + }, + fullWidth: { + default: boolean('Full-width', false, 'Button'), + }, type: { default: text('Type attribute', 'button', 'Button'), }, @@ -94,6 +106,8 @@ export const withText = () => ({ :block="block" :rounded="rounded" :outlined="outlined" + :align="align" + :dashed="dashed" :icon="icon" :style="{ '--v-button-color': color, @@ -109,6 +123,7 @@ export const withText = () => ({ :small="size === 'small'" :large="size === 'large'" :x-large="size === 'xLarge'" + :full-width="fullWidth" @click="onClick" > {{ text }} @@ -313,3 +328,17 @@ export const asLink = () => ({ I'm a link `, }); + +export const addNewStyle = () => + defineComponent({ + template: ` + + Add new row + + `, + }); diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue index 361a402635..6d67848500 100644 --- a/src/components/v-button/v-button.vue +++ b/src/components/v-button/v-button.vue @@ -6,7 +6,17 @@ class="v-button" :class="[ sizeClass, - { 'full-width': fullWidth, rounded, icon, outlined, loading, secondary, active }, + `align-${align}`, + { + 'full-width': fullWidth, + rounded, + icon, + outlined, + loading, + secondary, + active, + dashed, + }, ]" :type="type" :disabled="disabled" @@ -76,6 +86,15 @@ export default defineComponent({ type: [Number, String], default: null, }, + dashed: { + type: Boolean, + default: false, + }, + align: { + type: String, + default: 'center', + validator: (val: string) => ['left', 'center', 'right'].includes(val), + }, ...sizeProps, }, setup(props, { emit }) { @@ -113,7 +132,6 @@ export default defineComponent({ position: relative; display: inline-flex; align-items: center; - justify-content: center; width: var(--v-button-width); min-width: 78px; height: var(--v-button-height); @@ -129,6 +147,18 @@ export default defineComponent({ transition: var(--fast) var(--transition); transition-property: background-color border; + &.align-left { + justify-content: flex-start; + } + + &.align-center { + justify-content: center; + } + + &.align-right { + justify-content: flex-end; + } + &.secondary { --v-button-color: var(--button-secondary-foreground-color); --v-button-color-hover: var(--button-secondary-foreground-color-hover); @@ -158,11 +188,6 @@ export default defineComponent({ } } - &.full-width { - display: flex; - min-width: 100%; - } - &.rounded { border-radius: calc(var(--v-button-height) / 2); } @@ -173,6 +198,10 @@ export default defineComponent({ background-color: transparent; } + &.dashed { + border-style: dashed; + } + &.x-small { --v-button-height: 28px; --v-button-font-size: 12px; @@ -210,6 +239,11 @@ export default defineComponent({ padding: 0; } + &.full-width { + display: flex; + min-width: 100%; + } + .content, .spinner { max-width: 100%;