Add align and dashed props to button (#277)

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
 

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 = () => ({
 	<v-button to="/login">I'm a link</v-button>
 	`,
 });
+
+export const addNewStyle = () =>
+	defineComponent({
+		template: `
+			<v-button full-width dashed outlined align="left" style="
+				--v-button-color: var(--blue);
+				--v-button-background-color: var(--blue);
+				--v-button-color-hover: var(--white);
+				--v-button-background-color-hover: var(--blue);
+			">
+				<v-icon name="add" left /> Add new row
+			</v-button>
+		`,
+	});

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%;