diff --git a/src/components/v-avatar/v-avatar.readme.md b/src/components/v-avatar/v-avatar.readme.md index 4d35ba1c81..eff9817155 100644 --- a/src/components/v-avatar/v-avatar.readme.md +++ b/src/components/v-avatar/v-avatar.readme.md @@ -12,15 +12,30 @@ ``` -## Sizes / Colors +## Props -The avatar component supports multiple sizes and colors. The color prop accepts any valid CSS color. CSS variable names can be passed as well. +| Prop | Description | Default | +|-----------|---------------------------|---------| +| `size` | Size in px | -- | +| `tile` | Render as a tile (square) | `false` | +| `x-small` | Render extra small | `false` | +| `small` | Render small | `false` | +| `large` | Render large | `false` | +| `x-large` | Render extra large | `false` | -| Prop Name | Size in PX | -|----------------|------------| -| `x-small` | 32 | -| `small` | 40 | -| None (default) | 48 | -| `large` | 56 | -| `x-large` | 64 | +## Slots +| Slot | Description | Data | +|-----------|-------------|------| +| _default_ | | -- | + +## Events + +n/a + +## CSS Variables + +| Variable | Default | +|--------------------|-----------------------------| +| `--v-avatar-color` | `--avatar-background-color` | +| `--v-avatar-size` | -- | diff --git a/src/components/v-avatar/v-avatar.story.ts b/src/components/v-avatar/v-avatar.story.ts index 874e92408e..edcfc6b2a3 100644 --- a/src/components/v-avatar/v-avatar.story.ts +++ b/src/components/v-avatar/v-avatar.story.ts @@ -63,7 +63,7 @@ export const withText = () => ({ :large="size === 'large'" :x-large="size === 'xLarge'" :tile="tile" - :color="color" + :style="{'--v-avatar-color': color }" :size="customSize" >{{ text }}` }); @@ -103,7 +103,7 @@ export const withImage = () => ({ :large="size === 'large'" :x-large="size === 'xLarge'" :tile="tile" - :color="color" + :style="{'--v-avatar-color': color }" :size="customSize" > @@ -145,10 +145,10 @@ export const withIcon = () => ({ :large="size === 'large'" :x-large="size === 'xLarge'" :tile="tile" - :color="color" + :style="{'--v-avatar-color': color }" :size="customSize" > - + ` }); diff --git a/src/components/v-avatar/v-avatar.test.ts b/src/components/v-avatar/v-avatar.test.ts index b8b81a8692..2b47494c80 100644 --- a/src/components/v-avatar/v-avatar.test.ts +++ b/src/components/v-avatar/v-avatar.test.ts @@ -17,12 +17,6 @@ describe('Avatar', () => { expect(component.classes()).toContain('tile'); }); - it('Sets the correct custom color', async () => { - component.setProps({ color: '--red' }); - await component.vm.$nextTick(); - expect((component.vm as any).styles['--_v-avatar-color']).toEqual('var(--red)'); - }); - describe('Sizes', () => { test('Extra Small', () => { component.setProps({ @@ -63,16 +57,5 @@ describe('Avatar', () => { }); component.vm.$nextTick(() => expect(component.classes()).toContain('x-large')); }); - - it('Sets the correct custom size', () => { - const component = mount(VAvatar, { - localVue, - propsData: { - size: 128 - } - }); - - expect((component.vm as any).styles['--_v-avatar-size']).toBe('128px'); - }); }); }); diff --git a/src/components/v-avatar/v-avatar.vue b/src/components/v-avatar/v-avatar.vue index b6209857e3..722372e729 100644 --- a/src/components/v-avatar/v-avatar.vue +++ b/src/components/v-avatar/v-avatar.vue @@ -1,5 +1,5 @@ @@ -10,10 +10,6 @@ import parseCSSVar from '../../utils/parse-css-var'; export default createComponent({ props: { - color: { - type: String, - default: '--teal' - }, size: { type: Number, default: null @@ -40,23 +36,6 @@ export default createComponent({ } }, setup(props) { - type Styles = { - '--_v-avatar-color': string; - '--_v-avatar-size'?: string; - }; - - const styles = computed(() => { - const styles: Styles = { - '--_v-avatar-color': parseCSSVar(props.color) - }; - - if (props.size) { - styles['--_v-avatar-size'] = props.size + 'px'; - } - - return styles; - }); - const sizeClass = computed(() => { if (props.xSmall) return 'x-small'; if (props.small) return 'small'; @@ -65,22 +44,23 @@ export default createComponent({ return null; }); - return { styles, sizeClass }; + return { sizeClass }; } }); ``` ## 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` | diff --git a/src/components/v-button/v-button.story.ts b/src/components/v-button/v-button.story.ts index 77695a4e4b..75ad1e412a 100644 --- a/src/components/v-button/v-button.story.ts +++ b/src/components/v-button/v-button.story.ts @@ -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)" /> ` @@ -224,40 +236,52 @@ export const sizes = () => ` export const colors = () => `
Delete Save Warn Hover Transparent diff --git a/src/components/v-button/v-button.test.ts b/src/components/v-button/v-button.test.ts index e15f9a6d4f..f835fc8b76 100644 --- a/src/components/v-button/v-button.test.ts +++ b/src/components/v-button/v-button.test.ts @@ -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'); - }); }); }); diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue index f5100cbfc8..45d8d801b8 100644 --- a/src/components/v-button/v-button.vue +++ b/src/components/v-button/v-button.vue @@ -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(() => { - 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(() => { 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 }; } }); ``` ## Boolean vs arrays @@ -67,26 +85,27 @@ If you can't, you should listen to the `update:indeterminate` event and respond ``` -## Events +## Props +| Prop | Description | Default | +|-----------------|--------------------------------------------------------------------------|---------| +| `value` | Value for checkbox. Similar to value attr on checkbox type input in HTML | `--` | +| `inputValue` | Value that's used with `v-model`. Either boolean or array of values | `false` | +| `label` | Label for the checkbox | `--` | +| `disabled` | Disable the checkbox | `false` | +| `indeterminate` | Show the indeterminate state | `false` | +## Slots +| Slot | Description | +|---------|------------------------------------------------------------------------------------------------| +| `label` | Allows custom markup and HTML to be rendered inside the label. Will override the `label` prop. | + +## Events | Event | Description | Data | |------------------------|----------------------------|----------------------------| | `change` | New state for the checkbox | Boolean or array of values | | `update:indeterminate` | New state for the checkbox | Boolean or array of values | -## Props - -| Prop | Description | Default | -|-----------------|--------------------------------------------------------------------------------------------------------|-----------------------------------| -| `value` | Value for checkbox. Similar to value attr on checkbox type input in HTML | `--` | -| `inputValue` | Value that's used with `v-model`. Either boolean or array of values | `false` | -| `label` | Label for the checkbox | `--` | -| `color` | Color for the checked state of the checkbox. Either CSS var name (fe `--red`) or other valid CSS color | `--input-background-color-active` | -| `disabled` | Disable the checkbox | `false` | -| `indeterminate` | Show the indeterminate state | `false` | - -## Slots - -| Slot | Description | -|---------|------------------------------------------------------------------------------------------------| -| `label` | Allows custom markup and HTML to be rendered inside the label. Will override the `label` prop. | +## CSS Variables +| Variable | Default | +|----------------------|----------------------------------------| +| `--v-checkbox-color` | `var(--input-background-color-active)` | diff --git a/src/components/v-checkbox/v-checkbox.story.ts b/src/components/v-checkbox/v-checkbox.story.ts index 4a373a77fb..291139921b 100644 --- a/src/components/v-checkbox/v-checkbox.story.ts +++ b/src/components/v-checkbox/v-checkbox.story.ts @@ -94,10 +94,10 @@ export const colors = () => ({ }, template: `
- - - - + + + +
` }); diff --git a/src/components/v-checkbox/v-checkbox.test.ts b/src/components/v-checkbox/v-checkbox.test.ts index 8358040a0e..1cc7f3d99f 100644 --- a/src/components/v-checkbox/v-checkbox.test.ts +++ b/src/components/v-checkbox/v-checkbox.test.ts @@ -118,22 +118,6 @@ describe('Checkbox', () => { expect((component.vm as any).icon).toBe('indeterminate_check_box'); }); - it('Renders the correct iconColor for state', () => { - const component = mount(VCheckbox, { - localVue, - propsData: { - inputValue: false, - color: '--red' - } - }); - - expect((component.vm as any).iconColor).toBe('--input-border-color'); - - component.setProps({ inputValue: true }); - - expect((component.vm as any).iconColor).toBe('--red'); - }); - it('Emits the update:indeterminate event when the checkbox is toggled when indeterminate', () => { const component = mount(VCheckbox, { localVue, diff --git a/src/components/v-checkbox/v-checkbox.vue b/src/components/v-checkbox/v-checkbox.vue index 9d70c9483e..a0779a3640 100644 --- a/src/components/v-checkbox/v-checkbox.vue +++ b/src/components/v-checkbox/v-checkbox.vue @@ -6,8 +6,9 @@ role="checkbox" :aria-pressed="isChecked ? 'true' : 'false'" :disabled="disabled" + :class="{ checked: isChecked }" > - + {{ label }} @@ -36,10 +37,6 @@ export default createComponent({ type: String, default: null }, - color: { - type: String, - default: '--input-background-color-active' - }, disabled: { type: Boolean, default: false @@ -63,13 +60,7 @@ export default createComponent({ return isChecked.value ? 'check_box' : 'check_box_outline_blank'; }); - const iconColor = computed(() => { - if (props.disabled) return '--input-background-color-disabled'; - if (isChecked.value) return props.color; - return '--input-border-color'; - }); - - return { isChecked, toggleInput, icon, iconColor }; + return { isChecked, toggleInput, icon }; function toggleInput(): void { if (props.indeterminate) { @@ -96,6 +87,8 @@ export default createComponent({ diff --git a/src/components/v-chip/v-chip.readme.md b/src/components/v-chip/v-chip.readme.md index 4adb77740c..4996c656e6 100644 --- a/src/components/v-chip/v-chip.readme.md +++ b/src/components/v-chip/v-chip.readme.md @@ -20,20 +20,21 @@ The chip component supports the following sizes through the use of props: ## 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-chip-color`, `--v-chip-background-color`, `--v-chip-hover-color`, and `--v-chip-hover-background-color` css variables respectively: ```html - - I'm a chip! - + I'm a chip! + ``` -## Events +## Clicks / Closes There are two events, one when clicking on the chip called `click` and one when clicking on the enabled close icon called `close`. @@ -42,26 +43,35 @@ There are two events, one when clicking on the chip called `click` and one when I'm closeable! ``` +## Props +| Prop | Description | Default | +|-------------|------------------------------------------------------|---------| +| `active` | Change visibility. Can be reacted to via `sync` | `true` | +| `close` | Displays a close icon which triggers the close event | `false` | +| `closeIcon` | Which icon should be displayed instead of `close ` | `close` | +| `outlined` | No background | `false` | +| `label` | Label style | `false` | +| `disabled` | Disabled state | `false` | +| `x-small` | Render extra small | `false` | +| `small` | Render small | `false` | +| `large` | Render large | `false` | +| `x-large` | Render extra large | `false` | + +## Slots +| Slot | Description | Data | +|-----------|-------------|------| +| _default_ | | -- | + +## Events | Event | Description | |---------|------------------------------------------------------------------------------------------------| | `click` | Triggers when clicked somewhere on the chip | | `close` | Triggers when the `close` prop is enabled and gets clicked (Doesn't trigger the `click` event) | -## Props - -| Prop | Description | Default | -|--------------------------|------------------------------------------------------|-----------------------------------------| -| `active` | Change visibility. Can be reacted to via `sync` | `true` | -| `close` | Displays a close icon which triggers the close event | `false` | -| `closeIcon` | Which icon should be displayed instead of `close ` | `close` | -| `outlined` | No background | `false` | -| `color` | Text color | `--chip-primary-text-color` | -| `hover-color` | Text color on hover | `--chip-primary-text-color` | -| `background-color` | Chip color | `--chip-primary-background-color` | -| `hover-background-color` | Chip color on hover | `--chip-primary-background-color-hover` | -| `label` | Label style | `false` | -| `disabled` | Disabled state | `false` | -| `x-small` | Render extra small | `false` | -| `small` | Render small | `false` | -| `large` | Render large | `false` | -| `x-large` | Render extra large | `false` | +## CSS Variables +| Variable | Default | +|-----------------------------------|----------------------------------------------| +| `--v-chip-color` | `var(--chip-primary-text-color)` | +| `--v-chip-background-color` | `var(--chip-primary-background-color)` | +| `--v-chip-hover-color` | `var(--chip-primary-text-color)` | +| `--v-chip-hover-background-color` | `var(--chip-primary-background-color-hover)` | diff --git a/src/components/v-chip/v-chip.story.ts b/src/components/v-chip/v-chip.story.ts index 10f749dbdb..217fe0b822 100644 --- a/src/components/v-chip/v-chip.story.ts +++ b/src/components/v-chip/v-chip.story.ts @@ -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 VChip from './v-chip.vue'; @@ -57,20 +64,16 @@ export const withText = () => ({ default: boolean('Active', true, 'Button') }, color: { - default: text('Color', '--chip-primary-text-color', 'Colors') + default: color('Color', '#000000', 'Colors') }, backgroundColor: { - default: text('Background Color', '--chip-primary-background-color', 'Colors') + default: color('Background Color', '#cfd8dc', 'Colors') }, hoverColor: { - default: text('Color (hover)', '--chip-primary-text-color', 'Colors') + default: color('Color (hover)', '#000000', 'Colors') }, hoverBackgroundColor: { - default: text( - 'Background Color (hover)', - '--chip-primary-background-color-hover', - 'Colors' - ) + default: color('Background Color (hover)', '#b0bec5', 'Colors') } }, template: ` @@ -78,11 +81,13 @@ export const withText = () => ({ :active.sync="active" :label="label" :outlined="outlined" - :color="color" :close="close" - :background-color="backgroundColor" - :hover-color="hoverColor" - :hover-background-color="hoverBackgroundColor" + :style="{ + '--v-chip-color': color, + '--v-chip-background-color': backgroundColor, + '--v-chip-hover-color': hoverColor, + '--v-chip-hover-background-color': hoverBackgroundColor + }" :disabled="disabled" :x-small="size === 'xSmall'" :small="size === 'small'" @@ -155,20 +160,16 @@ export const withIcon = () => ({ default: boolean('Active', true, 'Button') }, color: { - default: text('Color', '--chip-primary-text-color', 'Colors') + default: color('Color', '#000000', 'Colors') }, backgroundColor: { - default: text('Background Color', '--chip-primary-background-color', 'Colors') + default: color('Background Color', '#cfd8dc', 'Colors') }, hoverColor: { - default: text('Color (hover)', '--chip-primary-text-color', 'Colors') + default: color('Color (hover)', '#000000', 'Colors') }, hoverBackgroundColor: { - default: text( - 'Background Color (hover)', - '--chip-primary-background-color-hover', - 'Colors' - ) + default: color('Background Color (hover)', '#b0bec5', 'Colors') } }, template: ` @@ -176,11 +177,13 @@ export const withIcon = () => ({ :active="active" :label="label" :outlined="outlined" - :color="color" :close="close" - :background-color="backgroundColor" - :hover-color="hoverColor" - :hover-background-color="hoverBackgroundColor" + :style="{ + '--v-chip-color': color, + '--v-chip-background-color': backgroundColor, + '--v-chip-hover-color': hoverColor, + '--v-chip-hover-background-color': hoverBackgroundColor + }" :disabled="disabled" :x-small="size === 'xSmall'" :small="size === 'small'" @@ -206,40 +209,46 @@ export const withColor = () => ({ template: `
Delete Add Item Watch out diff --git a/src/components/v-chip/v-chip.test.ts b/src/components/v-chip/v-chip.test.ts index 5dda62a1d0..c123ea5059 100644 --- a/src/components/v-chip/v-chip.test.ts +++ b/src/components/v-chip/v-chip.test.ts @@ -65,24 +65,6 @@ describe('Chip', () => { expect(component.find('.close-outline').exists()).toBe(true); }); - it('Sets the correct CSS variables for custom colors', async () => { - component.setProps({ - color: '--red', - hoverColor: '--blue', - backgroundColor: '--green', - hoverBackgroundColor: '--yellow' - }); - - await component.vm.$nextTick(); - - expect((component.vm as any).styles['--_v-chip-color']).toBe('var(--red)'); - expect((component.vm as any).styles['--_v-chip-hover-color']).toBe('var(--blue)'); - expect((component.vm as any).styles['--_v-chip-background-color']).toBe('var(--green)'); - expect((component.vm as any).styles['--_v-chip-hover-background-color']).toBe( - 'var(--yellow)' - ); - }); - it('Emits a click event when chip is not disabled', async () => { component.setProps({ disabled: false diff --git a/src/components/v-chip/v-chip.vue b/src/components/v-chip/v-chip.vue index 139dbb6b3a..202f60912f 100644 --- a/src/components/v-chip/v-chip.vue +++ b/src/components/v-chip/v-chip.vue @@ -2,7 +2,6 @@ @@ -42,22 +41,6 @@ export default createComponent({ type: Boolean, default: false }, - color: { - type: String, - default: '--chip-primary-text-color' - }, - backgroundColor: { - type: String, - default: '--chip-primary-background-color' - }, - hoverColor: { - type: String, - default: '--chip-primary-text-color' - }, - hoverBackgroundColor: { - type: String, - default: '--chip-primary-background-color-hover' - }, label: { type: Boolean, default: false @@ -97,13 +80,6 @@ export default createComponent({ } }); - const styles = computed(() => ({ - '--_v-chip-color': parseCSSVar(props.color), - '--_v-chip-background-color': parseCSSVar(props.backgroundColor), - '--_v-chip-hover-color': parseCSSVar(props.hoverColor), - '--_v-chip-hover-background-color': parseCSSVar(props.hoverBackgroundColor) - })); - const sizeClass = computed(() => { if (props.xSmall) return 'x-small'; if (props.small) return 'small'; @@ -112,7 +88,7 @@ export default createComponent({ return null; }); - return { styles, sizeClass, _active, onClick, onCloseClick }; + return { sizeClass, _active, onClick, onCloseClick }; function onClick(event: MouseEvent) { if (props.disabled) return; @@ -130,19 +106,24 @@ export default createComponent({ ``` ## Props diff --git a/src/components/v-hover/v-hover.story.ts b/src/components/v-hover/v-hover.story.ts index 255a408f90..a775582e8b 100644 --- a/src/components/v-hover/v-hover.story.ts +++ b/src/components/v-hover/v-hover.story.ts @@ -18,7 +18,7 @@ export default { export const basic = () => ` - + `; diff --git a/src/components/v-icon/v-icon.readme.md b/src/components/v-icon/v-icon.readme.md index 5a591f23fc..31d23e5ff6 100644 --- a/src/components/v-icon/v-icon.readme.md +++ b/src/components/v-icon/v-icon.readme.md @@ -4,7 +4,16 @@ The icon component allows you to render any [Material Design Icons](https://mate ## Sizes / Colors -The icon component supports multiple sizes and colors. The color prop accepts any valid CSS color. CSS variable names can be passed as well. +The icon component supports multiple sizes and colors. The color prop accepts any valid CSS color. Color changes are done via the css variable `--v-icon-color` like in the example below. + +```html + + +``` | Prop Name | Size in PX | |----------------|------------| @@ -41,7 +50,6 @@ Oftentimes, you'll use the icon next to some text, for example in a button. When | Name | Description | Default | |-----------|-------------------------------------------------------------------|----------------| | `name`* | Name of the icon | -- | -| `color` | CSS color variable name (fe `--blue-grey`) or CSS color value | `currentColor` | | `outline` | Use outline Material Icons. Note: only works for non-custom icons | `false` | | `size` | Custom pixel size | `false` | | `x-small` | Render the icon extra small | `false` | @@ -55,3 +63,12 @@ Oftentimes, you'll use the icon next to some text, for example in a button. When | Event | Description | Data | |---------|----------------------|--------------| | `click` | Standard click event | `MouseEvent` | + +## Slots +n/a + +## CSS Variables +| Variable | Default | +|------------------|----------------| +| `--v-icon-color` | `currentColor` | +| `--v-icon-size` | `24px` | diff --git a/src/components/v-icon/v-icon.story.ts b/src/components/v-icon/v-icon.story.ts index e6473dcbaa..dc629dc904 100644 --- a/src/components/v-icon/v-icon.story.ts +++ b/src/components/v-icon/v-icon.story.ts @@ -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 VIcon from '../v-icon/'; @@ -23,7 +30,7 @@ export const interactive = () => ({ default: text('Icon Name', 'person') }, color: { - default: text('Color', '--blue-grey-800') + default: color('Color', '#37474f') }, outline: { default: boolean('Outline', false) @@ -56,6 +63,7 @@ export const interactive = () => ({ :name="name" :outline="outline" :sup="sup" + :style="{'--v-icon-color': color}" :x-small="size === 'xSmall'" :small="size === 'small'" :large="size === 'large'" @@ -65,16 +73,17 @@ export const interactive = () => ({ ` }); -export const superscript = () => `Title`; +export const superscript = () => + `Title`; export const sizesAndColors = () => `
- - - - - - + + + + + +
`; diff --git a/src/components/v-icon/v-icon.test.ts b/src/components/v-icon/v-icon.test.ts index 2fc09f125b..bbfb05bd20 100644 --- a/src/components/v-icon/v-icon.test.ts +++ b/src/components/v-icon/v-icon.test.ts @@ -13,19 +13,6 @@ describe('Icon', () => { component = mount(VIcon, { localVue, propsData: { name: 'person' } }); }); - it('Renders the correct markup for a Material Icon', async () => { - component.setProps({ - color: '--blue-grey', - name: 'person' - }); - - await component.vm.$nextTick(); - - expect(component.html()).toContain( - 'person' - ); - }); - it('Renders custom icons as inline ', async () => { component.setProps({ name: 'box' @@ -36,26 +23,6 @@ describe('Icon', () => { expect(component.contains('svg')).toBe(true); }); - it('Allows Hex/RGB/other CSS for color', async () => { - component.setProps({ - color: 'papayawhip' - }); - - await component.vm.$nextTick(); - - expect((component.vm as any).colorStyle).toBe('papayawhip'); - }); - - it('Passes custom size as px value', async () => { - component.setProps({ - size: 120 - }); - - await component.vm.$nextTick(); - - expect((component.vm as any).customSize).toBe('120px'); - }); - describe('Sizes', () => { test('Superscript', async () => { component.setProps({ diff --git a/src/components/v-icon/v-icon.vue b/src/components/v-icon/v-icon.vue index b8d986e43d..82ea3c598a 100644 --- a/src/components/v-icon/v-icon.vue +++ b/src/components/v-icon/v-icon.vue @@ -2,7 +2,6 @@ @@ -25,10 +24,6 @@ export default createComponent({ type: String, required: true }, - color: { - type: String, - default: 'currentColor' - }, outline: { type: Boolean, default: false @@ -37,10 +32,6 @@ export default createComponent({ type: Boolean, default: false }, - size: { - type: Number, - default: null - }, xSmall: { type: Boolean, default: false @@ -77,15 +68,6 @@ export default createComponent({ return null; }); - const customSize = computed(() => { - if (props.size) return `${props.size}px`; - return null; - }); - - const colorStyle = computed(() => { - return parseCSSVar(props.color); - }); - const customIconName = computed(() => { if (customIcons.includes(props.name)) return `custom-icon-${props.name}`; return null; @@ -95,9 +77,7 @@ export default createComponent({ return { sizeClass, - colorStyle, customIconName, - customSize, hasClick, emitClick }; @@ -111,74 +91,19 @@ export default createComponent({ diff --git a/src/components/v-overlay/v-overlay.readme.md b/src/components/v-overlay/v-overlay.readme.md index e6196e5e35..62423b5932 100644 --- a/src/components/v-overlay/v-overlay.readme.md +++ b/src/components/v-overlay/v-overlay.readme.md @@ -10,18 +10,39 @@ The overlay is a fairly barebones component that's meant to be used with modals ## Color -The overlay component supports multiple colors. The color prop accepts any valid CSS color. CSS variable names can be passed as well. +The colors can be changed via the css variables `--v-overlay-color` and `--v-overlay-opacity`. + +```html + + Close overlay + + +``` ## Props - | Prop | Description | Default | |------------|---------------------------|-----------------------| | `active` | Show / hide the overlay | `false` | | `absolute` | Add `position: absolute;` | `false` | -| `color` | Color for the overlay | `--modal-smoke-color` | -| `z-index` | `z-index` for the overlay | `500` | -| `opacity` | Opacity for the overlay | `0.75` | ## Slots +| Slot | Description | Data | +|-----------|-------------|------| +| _default_ | | -- | -The only slot is the default slot. All content in the overlay will be rendered in the center of the overlay. +## Events +| Event | Description | Value | +|---------|-------------|--------------| +| `click` | | `MouseEvent` | + +## CSS Variables +| Variable | Default | +|-----------------------|----------------------------| +| `--v-overlay-color` | `var(--modal-smoke-color)` | +| `--v-overlay-opacity` | `0.75` | +| `--v-overlay-z-index` | `500` | diff --git a/src/components/v-overlay/v-overlay.story.ts b/src/components/v-overlay/v-overlay.story.ts index 1b5af94192..16811b3461 100644 --- a/src/components/v-overlay/v-overlay.story.ts +++ b/src/components/v-overlay/v-overlay.story.ts @@ -47,7 +47,7 @@ export const interactive = () => ({
Show overlay - + Close overlay
diff --git a/src/components/v-overlay/v-overlay.test.ts b/src/components/v-overlay/v-overlay.test.ts index 1c8b0bbf89..59df176429 100644 --- a/src/components/v-overlay/v-overlay.test.ts +++ b/src/components/v-overlay/v-overlay.test.ts @@ -31,20 +31,6 @@ describe('Overlay', () => { expect(component.classes()).toContain('absolute'); }); - it('Sets the inline styles based on props', async () => { - component.setProps({ - active: true, - absolute: true, - color: '--red', - zIndex: 50, - opacity: 0.2 - }); - await component.vm.$nextTick(); - expect((component.vm as any).styles['--_v-overlay-color']).toEqual('var(--red)'); - expect((component.vm as any).styles['--_v-overlay-z-index']).toEqual(50); - expect((component.vm as any).styles['--_v-overlay-opacity']).toEqual(0.2); - }); - it('Adds the has-click class when click event is passed', async () => { const component = shallowMount(VOverlay, { localVue, diff --git a/src/components/v-overlay/v-overlay.vue b/src/components/v-overlay/v-overlay.vue index d0db6b5931..5fcd22ac15 100644 --- a/src/components/v-overlay/v-overlay.vue +++ b/src/components/v-overlay/v-overlay.vue @@ -1,10 +1,5 @@