From 197e09abb55d268a60b6c2d8d10234cb12813bbe Mon Sep 17 00:00:00 2001 From: Jacob Rienstra Date: Fri, 13 Mar 2020 16:34:06 -0400 Subject: [PATCH] List continued (#174) * working on story with reactive subtitle * styling of icons seems consistent with default sizing * checkbox in list story * colors * lines and tests * merge conflict * basically im a genius styling is cool now * Update src/components/v-button/readme.md * Fix scoping of nav mode * Tweak spacing of icons * Register list item subcomponents globally * Render icons in sidebar nav of collections module Co-authored-by: Rijk van Zanten --- .stylelintrc.json | 8 +- src/components/register.ts | 11 +- src/components/v-button/readme.md | 6 +- src/components/v-icon/v-icon.vue | 1 + src/components/v-list/index.ts | 5 +- src/components/v-list/readme.md | 212 ++++++----- src/components/v-list/v-list-item-content.vue | 18 + src/components/v-list/v-list-item-icon.vue | 66 ++++ .../v-list/v-list-item-subtitle.vue | 48 +++ src/components/v-list/v-list-item-title.vue | 25 ++ src/components/v-list/v-list-item.vue | 76 +++- src/components/v-list/v-list.story.ts | 356 ++++++++++++++---- src/components/v-list/v-list.test.ts | 71 +++- src/components/v-list/v-list.vue | 17 +- .../components/navigation/navigation.vue | 5 +- src/styles/_colors.scss | 1 + src/styles/mixins/type-styles.scss | 28 ++ src/styles/themes/_default.scss | 7 +- 18 files changed, 740 insertions(+), 221 deletions(-) create mode 100644 src/components/v-list/v-list-item-icon.vue create mode 100644 src/components/v-list/v-list-item-subtitle.vue create mode 100644 src/components/v-list/v-list-item-title.vue diff --git a/.stylelintrc.json b/.stylelintrc.json index 5c2be637d1..c56ab8334c 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,10 +4,7 @@ "stylelint-config-rational-order", "stylelint-config-prettier" ], - "plugins": [ - "stylelint-order", - "stylelint-scss" - ], + "plugins": ["stylelint-order", "stylelint-scss"], "rules": { "indentation": "tab", "order/order": [ @@ -27,6 +24,7 @@ } ], "string-quotes": "single", - "length-zero-no-unit": null + "length-zero-no-unit": null, + "no-descending-specificity": true } } diff --git a/src/components/register.ts b/src/components/register.ts index 02c84540f2..8976593180 100644 --- a/src/components/register.ts +++ b/src/components/register.ts @@ -9,7 +9,13 @@ import VHover from './v-hover/'; import VIcon from './v-icon/'; import VInput from './v-input/'; import VItemGroup, { VItem } from './v-item-group'; -import VList, { VListItem, VListItemContent } from './v-list/'; +import VList, { + VListItem, + VListItemContent, + VListItemIcon, + VListItemSubtitle, + VListItemTitle +} from './v-list/'; import VOverlay from './v-overlay/'; import VProgressLinear from './v-progress/linear/'; import VProgressCircular from './v-progress/circular/'; @@ -31,6 +37,9 @@ Vue.component('v-item', VItem); Vue.component('v-list', VList); Vue.component('v-list-item', VListItem); Vue.component('v-list-item-content', VListItemContent); +Vue.component('v-list-item-icon', VListItemIcon); +Vue.component('v-list-item-subtitle', VListItemSubtitle); +Vue.component('v-list-item-title', VListItemTitle); Vue.component('v-overlay', VOverlay); Vue.component('v-progress-linear', VProgressLinear); Vue.component('v-progress-circular', VProgressCircular); diff --git a/src/components/v-button/readme.md b/src/components/v-button/readme.md index e2c700febe..fee97d1bda 100644 --- a/src/components/v-button/readme.md +++ b/src/components/v-button/readme.md @@ -46,9 +46,10 @@ The button has a loading state that can be enabled with the `loading` prop. By d The loading slot is rendered _on top_ of the content that was there before. Make sure that your loading content doesn't exceed the size of the default state content. This restriction is put in place to prevent jumps when going from and to the loading state. ## Props + | Prop | Description | Default | |------------|---------------------------------------------------------------------------|----------| -| `block` | Enable ull width (display block) | `false` | +| `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` | @@ -62,17 +63,20 @@ The loading slot is rendered _on top_ of the content that was there before. Make | `to` | Render as vue router-link | `false` | ## Slots + | 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` | diff --git a/src/components/v-icon/v-icon.vue b/src/components/v-icon/v-icon.vue index 669ae7407d..3c04045627 100644 --- a/src/components/v-icon/v-icon.vue +++ b/src/components/v-icon/v-icon.vue @@ -78,6 +78,7 @@ export default defineComponent({ position: relative; display: inline-block; width: var(--v-icon-size); + min-width: var(--v-icon-size); height: var(--v-icon-size); color: var(--v-icon-color); font-size: 0; diff --git a/src/components/v-list/index.ts b/src/components/v-list/index.ts index 864452fd36..e950783a13 100644 --- a/src/components/v-list/index.ts +++ b/src/components/v-list/index.ts @@ -1,6 +1,9 @@ import VList from './v-list.vue'; import VListItem from './v-list-item.vue'; import VListItemContent from './v-list-item-content.vue'; +import VListItemTitle from './v-list-item-title.vue'; +import VListItemSubtitle from './v-list-item-subtitle.vue'; +import VListItemIcon from './v-list-item-icon.vue'; -export { VList, VListItem, VListItemContent }; +export { VList, VListItem, VListItemContent, VListItemTitle, VListItemSubtitle, VListItemIcon }; export default VList; diff --git a/src/components/v-list/readme.md b/src/components/v-list/readme.md index d7d5f09341..4c2f753269 100644 --- a/src/components/v-list/readme.md +++ b/src/components/v-list/readme.md @@ -10,9 +10,49 @@ ``` +## Subcomponents + +### List Item + +A wrapper for list items that formats children nicely. Can be used on its own or inside a list component. Best used with subcomponents (see below). + +### List Item Content + +A wrapper for the main text content of a list item. It adds some padding and helps control overflow. The parent of `v-list-title` and `v-list-subtitle` components, it's also the main controller of the `dense` option on lists. + +### List Item Title + +Wrapper that adds typographic styling and margin for the title of the list item. Responsive to `dense` styling. + +### List Item Subtitle + +Wrapper that adds typographic styling and margin for the subtitle/description of the list item. Responsive to `dense` and `threeLine` props. + +```html + + + {{ item.title }} + {{ item.description }} + + +``` + +### List Item Icon + +Wrapper for icon, action, or avatar type elements in a list item. Can be used on the left or right of an item. + +```html + + + + {{ item.title }} + + +``` + ## Colors -You can set the default, active, and hover colors and background colors with css variables: +You can set the default, active, and hover colors and background colors with css variables. You can also set them on individual list items, which will override the list vars. Hover styles will only be set if the list item has a to link or an onClick handler. ```html @@ -24,34 +64,75 @@ You can set the default, active, and hover colors and background colors with css ``` ## Props -| Prop | Description | Default | -|---------|-------------------------------------------------------------|---------| -| `dense` | Removes some padding to make the list items closer together | `false` | -| `nav` | Adds a small margin and border-radius for nav menu styling | `false` | + +### List (`v-list`) + +| Prop | Description | Default | +|-------------|-------------------------------------------------------------------------------------------------------------|---------| +| `dense` | Removes some padding to make the list items closer together | `false` | +| `threeLine` | Limits list items to three lines of text (1 of title, 2 of subtitle). Only works in webkit enabled browsers | `false` | +| `nav` | Adds a small margin and border-radius for nav menu styling | `false` | + +### List Item (`v-list-item`) + +| Prop | Description | Default | +|-------------|------------------------------------------------------------------------------------------------------------|---------| +| `dense` | Removes some padding to make the individual list item shorter | `false` | +| `threeLine` | Limits list item to three lines of text (1 of title, 2 of subtitle). Only works in webkit enabled browsers | `false` | +| `to` | Render as vue router-link with to link | `null` | + +### List Item Content (`v-list-item-content`) + +### List Item Title (`v-list-item-title`) + +### List Item Subtitle (`v-list-item-subtitle`) + +n/a + +### List Item Icon (`v-list-item-icon`) + +| Prop | Description | Default | +|----------|---------------------------------------------------------------------|---------| +| `center` | Whether to center the element (good for action elements or avatars) | `false` | ## Slots -| Slot | Description | -|-----------|------------------| -| _default_ | List items, etc. | + +### List (`v-list`) + +### List Item (`v-list-item`) + +### List Item Content (`v-list-item-content`) + +### List Item Title (`v-list-item-title`) + +### List Item Subtitle (`v-list-item-subtitle`) + +### List Item Icon (`v-list-item-icon`) + +| Slot | Description | +|-----------|---------------| +| _default_ | Content, etc. | ## Events -| Event | Description | Value | -|---------|-----------------------|--------------| -| `click` | User clicks on button | `MouseEvent` | + +n/a ## CSS Variables + +### List (`v-list`) + | Variable | Default | |------------------------------------|----------------------------------| | `--v-list-padding` | `8px 0` | @@ -66,64 +147,7 @@ You can set the default, active, and hover colors and background colors with css | `--v-list-background-color-hover` | `var(--background-color-hover)` | | `--v-list-background-color-active` | `var(--background-color-active)` | ---- - -# List Item - -A wrapper for list items that formats things nicely. Can be used on its own or inside a list component. Best used with subcomponents (see below). - -```html - - - {{ item.text }} - - -``` - -## Colors - -You can set the default, active, and hover colors and background colors on individual list items with css variables. These will override the global list css vars, which you can set as well. - -Hover styles will only be set if the list item has a to link or a onClick handler. - -```html - - Red Stuff - - - Normal stuff - - - -``` - -## Props -| Prop | Description | Default | -|---------|---------------------------------------------------------------|---------| -| `dense` | Removes some padding to make the individual list item shorter | `false` | -| `to` | Render as vue router-link with to link | `null` | - -## Slots -| Slot | Description | -|-----------|---------------------------| -| _default_ | List content, icons, etc. | - -## Events -| Event | Description | Value | -|---------|---------------------|--------------| -| `click` | User clicks on link | `MouseEvent` | - -## CSS Variables -Second values are fallback ones, in case the list item is not inside a list where those vars are set. +### List Item (`v-list-item`) | Variable | Default | |-----------------------------------------|-----------------------------------------------------------------------| @@ -141,32 +165,16 @@ Second values are fallback ones, in case the list item is not inside a list wher | `--v-list-item-background-color-hover` | `var(---list-background-color-hover, var(--background-color-hover))` | | `--v-list-item-background-color-active` | `var(--vlist-background-color-active,var(--background-color-active))` | ---- +### List Item Content (`v-list-item-content`) -# List Item Content - -```html - - - List test blah blah - - -``` - -This is simply a wrapper for the main text content of a list item. It adds some padding and helps control overflow. - -## Props -n/a - -## Slots -| Slot | Description | -|-----------|---------------------------| -| _default_ | List content, icons, etc. | - -## Events -n/a - -## CSS Variables | Variable | Default | |---------------------------------|----------| | `--v-list-item-content-padding` | `12px 0` | + +### List Item Title (`v-list-item-title`) + +### List Item Subtitle (`v-list-item-subtitle`) + +### List Item Icon (`v-list-item-icon`) + +n/a diff --git a/src/components/v-list/v-list-item-content.vue b/src/components/v-list/v-list-item-content.vue index adcf81fbca..b15afb9f79 100644 --- a/src/components/v-list/v-list-item-content.vue +++ b/src/components/v-list/v-list-item-content.vue @@ -9,6 +9,7 @@ --v-list-item-content-padding: 12px 0; display: flex; + flex-basis: 0; flex-grow: 1; flex-shrink: 1; flex-wrap: wrap; @@ -17,6 +18,23 @@ padding: var(--v-list-item-content-padding); overflow: hidden; + .v-list.three-line &, + .v-list-item.three-line & { + align-self: stretch; + } + + ::v-deep { + & > * { + flex-basis: 100%; + flex-grow: 1; + flex-shrink: 0; + line-height: 1.1; + &:not(:last-child) { + margin-bottom: 2px; + } + } + } + .v-list.dense &, .v-list-item.dense & { --v-list-item-content-padding: 8px 0; diff --git a/src/components/v-list/v-list-item-icon.vue b/src/components/v-list/v-list-item-icon.vue new file mode 100644 index 0000000000..d23ba91063 --- /dev/null +++ b/src/components/v-list/v-list-item-icon.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/src/components/v-list/v-list-item-subtitle.vue b/src/components/v-list/v-list-item-subtitle.vue new file mode 100644 index 0000000000..f9d2ff1c73 --- /dev/null +++ b/src/components/v-list/v-list-item-subtitle.vue @@ -0,0 +1,48 @@ + + + diff --git a/src/components/v-list/v-list-item-title.vue b/src/components/v-list/v-list-item-title.vue new file mode 100644 index 0000000000..8f4ee9ed1a --- /dev/null +++ b/src/components/v-list/v-list-item-title.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/components/v-list/v-list-item.vue b/src/components/v-list/v-list-item.vue index d26d891794..7a7286f66a 100644 --- a/src/components/v-list/v-list-item.vue +++ b/src/components/v-list/v-list-item.vue @@ -4,7 +4,13 @@ active-class="active" class="v-list-item" :to="to" - :class="{ dense, link: isClickable }" + :class="{ + dense, + link: isClickable, + 'three-line': lines === 3, + 'two-line': lines === 2, + 'one-line': lines === 1 + }" v-on="$listeners" > @@ -21,6 +27,10 @@ export default defineComponent({ type: Boolean, default: false }, + lines: { + type: Number as PropType<1 | 2 | 3>, + default: null + }, to: { type: [String, Object] as PropType, default: null @@ -36,10 +46,18 @@ export default defineComponent({