github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-16 00:15:35 -05:00
Code Issues Packages Projects Releases Wiki Activity

Use css vars instead of props for color (#25)

Browse Source 
* changed button to use css vars for style

* updated avatar component

* updated checkbox and icon component

* updated chip and overlay component

* update progress and sheet component

* added support for slider and spinner component

* update switch component

* remove unit tests for colors

* made color vars more clear in docs

* changed unactive to inactive

* storybook now uses colorpicker for all color settings

* Cleanup v-avatar readme

* Tweak v-button inline styles + update readme

* Force disabled color to input border

* Cleanup readme for checkbox

* Fix formatting on table in readme for checkbox

* Add css vars to readme for chip

* Use css var for size

* Use CSS Var for z-index

* Use css var for height in linear progress

* Use css vars for sheet

* Use private css var for percentage + update readme

* Fix typo

* Remove deprecated props, update readme

* Use css var for table height

* Update storybook entries

* Remove obsolete tests

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
Nitwel
2020-02-13 19:46:10 +01:00
committed by GitHub
parent 1883e230d1
commit 0b1f73fc8e
49 changed files with 692 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/v-button/v-button.readme.md
View File

@@ -14,33 +14,21 @@ The button component supports the following sizes through the use of props:
* large
* x-large
Alternatively, you can force the font-size through the `size` prop:
```html
<v-button :size="64">Click me!</v-button>
```
## Colors
You can set the color, background color, hover color, and background hover color with the `color`, `background-color`, `hover-color`, and `hover-background-color` props respectively:
You can set the color, background color, hover color, and background hover color with the `--v-button-color`, `--v-button-background-color`, `--v-button-hover-color`, and `--v-button-hover-background-color` css variables respectively:
```html
<v-button
color="--red"
background-color="--red-50"
hover-color="--white"
hover-background-color="--red"
>
Click me
</v-button>
```
<v-button>Click me</v-button>
## Events
The only event that can be added to the button is the `click` event:
```html
<v-button @click="sayHi">Hello!</v-button>
<style>
.v-button {
--v-button-color: var(--red);
--v-button-background-color: var(--red-50);
--v-button-hover-color: var(--white);
--v-button-hover-background-color: var(--red);
}
</style>
```
## Loading
@@ -65,14 +53,9 @@ The loading slot is rendered _on top_ of the content that was there before. Make
| `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` |
| `color` | Text / icon color | `--button-primary-text-color` |
| `hover-color` | Text / icon color on hover | `--button-primary-text-color` |
| `background-color` | Button color | `--button-primary-background-color` |
| `hover-background-color` | Button color on hover | `--button-primary-background-color-hover` |
| `type` | HTML `type` attribute | `button` |
| `disabled` | Disabled state | `false` |
| `loading` | Loading state | `false` |
| `width` | Width in px | -- |
| `size` | Size of the text in the button in px | -- |
| `x-small` | Render extra small | `false` |
| `small` | Render small | `false` |
@@ -83,4 +66,23 @@ The loading slot is rendered _on top_ of the content that was there before. Make
| Slot | Description |
|-----------|----------------------------------------------|
| _default_ | Button content |
| `loading` | Content that's rendered during loading state |
## Events
| Event | Description | Value |
|---------|-----------------------|--------------|
| `click` | User clicks on button | `MouseEvent` |
## CSS Variables
| Variable | Default |
|-------------------------------------|------------------------------------------------|
| `--v-button-width` | `auto` |
| `--v-button-height` | `44px` |
| `--v-button-color` | `var(--button-primary-text-color)` |
| `--v-button-background-color` | `var(--button-primary-background-color)` |
| `--v-button-hover-color` | `var(--button-primary-text-color)` |
| `--v-button-hover-background-color` | `var(--button-primary-background-color-hover)` |
| `--v-button-font-size` | `16px` |

94
src/components/v-button/v-button.story.ts
View File

@@ -1,4 +1,11 @@
import { withKnobs, text, boolean, number, optionsKnob as options } from '@storybook/addon-knobs';
import {
withKnobs,
text,
boolean,
number,
color,
optionsKnob as options
} from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';
import Vue from 'vue';
import VButton from './v-button.vue';
@@ -66,16 +73,16 @@ export const withText = () => ({
default: boolean('Disabled', false, 'Button')
},
color: {
default: text('Color', '--button-primary-text-color', 'Colors')
default: color('Color', '#ffffff', 'Colors')
},
backgroundColor: {
default: text('Background Color', '--button-primary-background-color', 'Colors')
default: color('Background Color', '#263238', 'Colors')
},
hoverColor: {
default: text('Color (hover)', '--white', 'Colors')
default: color('Color (hover)', '#ffffff', 'Colors')
},
hoverBackgroundColor: {
default: text('Background Color (hover)', '--black', 'Colors')
default: color('Background Color (hover)', '#37474f', 'Colors')
}
},
template: `
@@ -84,10 +91,12 @@ export const withText = () => ({
:rounded="rounded"
:outlined="outlined"
:icon="icon"
:color="color"
:background-color="backgroundColor"
:hover-color="hoverColor"
:hover-background-color="hoverBackgroundColor"
:style="{
'--v-button-color': color,
'--v-button-background-color': backgroundColor,
'--v-button-hover-color': hoverColor,
'--v-button-hover-background-color': hoverBackgroundColor
}"
:type="type"
:disabled="disabled"
:loading="loading"
@@ -168,16 +177,16 @@ export const withIcon = () => ({
default: boolean('Disabled', false, 'Button')
},
color: {
default: text('Color', '--button-primary-text-color', 'Colors')
default: color('Color', '#ffffff', 'Colors')
},
backgroundColor: {
default: text('Background Color', '--button-primary-background-color', 'Colors')
default: color('Background Color', '#263238', 'Colors')
},
hoverColor: {
default: text('Color (hover)', '--white', 'Colors')
default: color('Color (hover)', '#ffffff', 'Colors')
},
hoverBackgroundColor: {
default: text('Background Color (hover)', '--black', 'Colors')
default: color('Background Color (hover)', '#37474f', 'Colors')
}
},
template: `
@@ -186,10 +195,12 @@ export const withIcon = () => ({
:rounded="rounded"
:outlined="outlined"
:icon="icon"
:color="color"
:background-color="backgroundColor"
:hover-color="hoverColor"
:hover-background-color="hoverBackgroundColor"
:style="{
'--v-button-color': color,
'--v-button-background-color': backgroundColor,
'--v-button-hover-color': hoverColor,
'--v-button-hover-background-color': hoverBackgroundColor
}"
:type="type"
:disabled="disabled"
:loading="loading"
@@ -206,6 +217,7 @@ export const withIcon = () => ({
:small="iconSize === 'small'"
:large="iconSize === 'large'"
:x-large="iconSize === 'xLarge'"
style="--v-icon-color: var(--white)"
/>
</v-button>
`
@@ -224,40 +236,52 @@ export const sizes = () => `
export const colors = () => `
<div>
<v-button
color="--red"
background-color="--red-50"
hover-color="--white"
hover-background-color="--red"
:style="{
'--v-button-color': 'var(--red)',
'--v-button-background-color': 'var(--red-50)',
'--v-button-hover-color': 'var(--white)',
'--v-button-hover-background-color': 'var(--red)'
}"
>
Delete
</v-button>
<v-button
color="--white"
background-color="--green"
hover-background-color="--green-800"
:style="{
'--v-button-color': 'var(--white)',
'--v-button-background-color': 'var(--green)',
'--v-button-hover-color': 'var(--white)',
'--v-button-hover-background-color': 'var(--green-800)'
}"
>
Save
</v-button>
<v-button
color="--white"
background-color="--amber"
hover-background-color="--amber-800"
:style="{
'--v-button-color': 'var(--white)',
'--v-button-background-color': 'var(--amber)',
'--v-button-hover-color': 'var(--white)',
'--v-button-hover-background-color': 'var(--amber-800)'
}"
>
Warn
</v-button>
<v-button
color="--blue-grey-800"
background-color="--blue-grey-50"
hover-color="--red"
hover-background-color="--white"
:style="{
'--v-button-color': 'var(--blue-grey-800)',
'--v-button-background-color': 'var(--blue-grey-50)',
'--v-button-hover-color': 'var(--red)',
'--v-button-hover-background-color': 'var(--white)'
}"
>
Hover
</v-button>
<v-button
color="--blue-grey-800"
background-color="transparent"
hover-color="--black"
hover-background-color="--blue-grey-100"
:style="{
'--v-button-color': 'var(--blue-grey-800)',
'--v-button-background-color': 'transparent',
'--v-button-hover-color': 'var(--black)',
'--v-button-hover-background-color': 'var(--blue-grey-100)'
}"
>
Transparent
</v-button>

31
src/components/v-button/v-button.test.ts
View File

@@ -75,30 +75,10 @@ describe('Button', () => {
expect(component.classes()).toContain('loading');
});
it('Sets the correct CSS variables for custom colors', () => {
const component = mount(VButton, {
localVue,
propsData: {
color: '--red',
hoverColor: '--blue',
backgroundColor: '--green',
hoverBackgroundColor: '--yellow'
}
});
expect((component.vm as any).styles['--_v-button-color']).toBe('var(--red)');
expect((component.vm as any).styles['--_v-button-hover-color']).toBe('var(--blue)');
expect((component.vm as any).styles['--_v-button-background-color']).toBe('var(--green)');
expect((component.vm as any).styles['--_v-button-hover-background-color']).toBe(
'var(--yellow)'
);
});
describe('Sizes', () => {
const component = mount(VButton, {
localVue,
propsData: {
color: '--blue-grey',
name: 'person'
}
});
@@ -142,16 +122,5 @@ describe('Button', () => {
});
component.vm.$nextTick(() => expect(component.classes()).toContain('x-large'));
});
it('Sets the correct custom width', () => {
const component = mount(VButton, {
localVue,
propsData: {
width: 56
}
});
expect((component.vm as any).styles.width).toBe('56px');
});
});
});

90
src/components/v-button/v-button.vue
View File

@@ -3,7 +3,6 @@
class="v-button"
:class="[sizeClass, { block, rounded, icon, outlined, loading }]"
:type="type"
:style="styles"
:disabled="disabled"
@click="!loading ? $emit('click') : null"
>
@@ -38,22 +37,6 @@ export default createComponent({
type: Boolean,
default: false
},
color: {
type: String,
default: '--button-primary-text-color'
},
backgroundColor: {
type: String,
default: '--button-primary-background-color'
},
hoverColor: {
type: String,
default: '--button-primary-text-color'
},
hoverBackgroundColor: {
type: String,
default: '--button-primary-background-color-hover'
},
type: {
type: String,
default: 'button'
@@ -66,10 +49,6 @@ export default createComponent({
type: Boolean,
default: false
},
width: {
type: Number,
default: null
},
xSmall: {
type: Boolean,
default: false
@@ -88,29 +67,6 @@ export default createComponent({
}
},
setup(props) {
interface Styles {
'--_v-button-color': string;
'--_v-button-background-color': string;
'--_v-button-hover-color': string;
'--_v-button-hover-background-color': string;
width?: string;
}
const styles = computed<Styles>(() => {
let styles: Styles = {
'--_v-button-color': parseCSSVar(props.color),
'--_v-button-background-color': parseCSSVar(props.backgroundColor),
'--_v-button-hover-color': parseCSSVar(props.hoverColor),
'--_v-button-hover-background-color': parseCSSVar(props.hoverBackgroundColor)
};
if (props.width && +props.width > 0) {
styles.width = props.width + 'px';
}
return styles;
});
const sizeClass = computed<string | null>(() => {
if (props.xSmall) return 'x-small';
if (props.small) return 'small';
@@ -119,26 +75,33 @@ export default createComponent({
return null;
});
return { styles, sizeClass };
return { sizeClass };
}
});
</script>
<style lang="scss" scoped>
.v-button {
--_v-button-height: 44px;
--v-button-width: auto;
--v-button-height: 44px;
--v-button-color: var(--button-primary-text-color);
--v-button-background-color: var(--button-primary-background-color);
--v-button-hover-color: var(--button-primary-text-color);
--v-button-hover-background-color: var(--button-primary-background-color-hover);
--v-button-font-size: 16px;
color: var(--_v-button-color);
background-color: var(--_v-button-background-color);
color: var(--v-button-color);
background-color: var(--v-button-background-color);
border-radius: var(--border-radius);
font-weight: var(--weight-bold);
cursor: pointer;
border: var(--input-border-width) solid var(--_v-button-background-color);
border: var(--input-border-width) solid var(--v-button-background-color);
font-size: 14px;
font-size: var(--v-button-font-size);
padding: 0 19px;
min-width: 78px;
height: var(--_v-button-height);
width: var(--v-button-width);
height: var(--v-button-height);
transition: var(--fast) var(--transition);
transition-property: background-color border;
@@ -150,9 +113,9 @@ export default createComponent({
}
&:not(.loading):not(:disabled):hover {
color: var(--_v-button-hover-color);
background-color: var(--_v-button-hover-background-color);
border: var(--input-border-width) solid var(--_v-button-hover-background-color);
color: var(--v-button-hover-color);
background-color: var(--v-button-hover-background-color);
border: var(--input-border-width) solid var(--v-button-hover-background-color);
}
&.block {
@@ -161,7 +124,7 @@ export default createComponent({
}
&.rounded {
border-radius: calc(var(--button-height) / 2);
border-radius: calc(var(--v-button-height) / 2);
}
&.outlined {
@@ -176,29 +139,28 @@ export default createComponent({
}
&.x-small {
--_v-button-height: 28px;
font-size: 12px;
--v-button-height: 28px;
--v-button-font-size: 12px;
padding: 0 12px;
min-width: 48px;
}
&.small {
--_v-button-height: 36px;
font-size: 14px;
--v-button-height: 36px;
--v-button-font-size: 14px;
padding: 0 16px;
min-width: 64px;
}
&.large {
--_v-button-height: var(--button-height);
font-size: var(--button-font-size);
--v-button-height: 52px;
padding: 0 23px;
min-width: 92px;
}
&.x-large {
--_v-button-height: 58px;
font-size: 18px;
--v-button-height: 58px;
--v-button-font-size: 18px;
padding: 0 32px;
min-width: 120px;
}
@@ -206,7 +168,7 @@ export default createComponent({
&.icon {
min-width: 0;
padding: 0;
width: var(--_v-button-height);
width: var(--v-button-height);
}
.content,