Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(VList): port to v3 #13697

Merged
merged 25 commits into from
Jun 14, 2021
Merged

feat(VList): port to v3 #13697

merged 25 commits into from
Jun 14, 2021

Conversation

johnleider
Copy link
Member

@johnleider johnleider commented May 22, 2021 •
edited

Description

Specification

Motivation and Context

Markup:

https://gist.github.com/johnleider/adc9f00de0674b95ee4a92f19fbca028

VList

Bug fixes

  • n/a

Features

Components

  • added v-list-img
  • added v-list-subheader

Styles

  • added $list-background
  • added $list-border-color
  • added $list-border-style
  • added $list-border-thin-width
  • added $list-border-width
  • added $list-color
  • added $list-density
  • added $list-disabled-opacity
  • added $list-positions
  • added $list-subheader-font-size
  • added $list-subheader-font-weight
  • added $list-subheader-inset-margin
  • added $list-subheader-inset-padding-start
  • added $list-subheader-line-height
  • added $list-subheader-min-height-multiplier
  • added $list-subheader-min-height
  • added $list-subheader-padding-end
  • added $list-subheader-padding-start
  • added $list-subheader-text-opacity
  • added $list-subheader-transition

Breaking changes

Props

  • removed dense prop, use density="compact"
  • removed expand prop, use density="compact"
  • removed flat prop, elevation is 0 by default
  • removed two-line prop, use lines="two"
  • removed three-line prop, use lines="three"

Styles

  • removed $avatar-margin-x
  • removed $list-dense-content-padding
  • removed $list-dense-icon-height
  • removed $list-dense-icon-margin
  • removed $list-dense-min-height
  • removed $list-dense-subheader-font-size
  • removed $list-dense-subheader-height
  • removed $list-dense-subheader-padding
  • removed $list-dense-subheading-padding
  • removed $list-nav-border-radius
  • removed $list-nav-item-padding
  • removed $list-nav-padding-left
  • removed $list-nav-padding-right
  • removed $list-nav-rounded-dense-item-margin-bottom
  • removed $list-nav-rounded-item-dense-margin-bottom
  • removed $list-nav-rounded-item-margin-bottom
  • removed $list-shaped-border-radius
  • removed $list-shaped-padding

VListItem

Bug fixes

  • n/a

Features

Components

  • added v-list-item-header
  • added v-list-item-media
  • added v-list-item-img

Props

  • added active prop, replaces existing value prop
  • added active-color prop, applies color when component is active
  • added contained prop, changes how color is applied to the component
  • added append-avatar prop
  • added prepend-avatar prop
  • added append-icon prop
  • added prepend-icon prop
  • added title prop - generate and apply prop to the v-list-item-title component
  • added subtitle prop - generate and apply prop to the v-list-item-subtitle component
  • added left && right prop to v-list-item-avatar

Styles

  • added $list-item-avatar-align-self
  • added $list-item-avatar-margin-end
  • added $list-item-avatar-margin-start
  • added $list-item-avatar-margin-y
  • added $list-item-avatar-size
  • added $list-item-avatar-size-multiplier
  • added $list-item-media-margin-bottom
  • added $list-item-media-margin-end
  • added $list-item-media-margin-start
  • added $list-item-media-margin-top
  • added $list-item-media-three-line-margin-bottom
  • added $list-item-media-three-line-margin-top
  • added $list-item-media-two-line-margin-bottom
  • added $list-item-media-two-line-margin-top
  • added $list-item-nav-subtitle-font-size
  • added $list-item-nav-subtitle-font-weight
  • added $list-item-nav-subtitle-letter-spacing
  • added $list-item-nav-subtitle-line-height
  • added $list-item-nav-title-font-size
  • added $list-item-nav-title-font-weight
  • added $list-item-nav-title-letter-spacing
  • added $list-item-nav-title-line-height
  • added $list-item-padding
  • added $list-item-subtitle-font-weight
  • added $list-item-subtitle-letter-spacing
  • added $list-item-subtitle-line-height
  • added $list-item-subtitle-opacity
  • added $list-item-subtitle-padding
  • added $list-item-subtitle-text-transform
  • added $list-item-three-line-padding
  • added $list-item-title-font-size
  • added $list-item-title-font-weight
  • added $list-item-title-header-padding
  • added $list-item-title-hyphens
  • added $list-item-title-letter-spacing
  • added $list-item-title-line-height
  • added $list-item-title-overflow-wrap
  • added $list-item-title-padding
  • added $list-item-title-text-overflow
  • added $list-item-title-text-transform
  • added $list-item-title-word-break
  • added $list-item-title-word-wrap
  • added $list-item-transition
  • added $list-item-two-line-padding

Breaking Changes

Components

  • removed v-list-item-action-text
  • removed v-list-item-action
  • removed v-list-item-content, use v-list-item-header
  • removed v-list-item-icon, use v-list-item-avatar icon="..." />
  • removed size and horizontal prop from v-list-item-avatar

Props

  • removed two-line prop, wrap with v-list lines="two"
  • removed three-line prop, wrap with v-list lines="three"
  • removed selectable prop
  • removed dense prop, use density="compact"
  • removed inactive prop
  • removed value prop, use active

Styles

  • removed $list-item-action-icon-margin
  • removed $list-item-action-margin
  • removed $list-item-action-text-font-size
  • removed $list-item-avatar-first-child-margin
  • removed $list-item-avatar-horizontal-margin
  • removed $list-item-avatar-horizontal-margin-x
  • removed $list-item-avatar-margin-y
  • removed $list-item-child-last-type-margin
  • removed $list-item-child-min-width
  • removed $list-item-content-children-margin-bottom
  • removed $list-item-content-padding
  • removed $list-item-dense-three-line-min-height
  • removed $list-item-dense-title-font-size
  • removed $list-item-dense-title-line-height
  • removed $list-item-dense-two-line-min-height
  • removed $list-item-icon-margin
  • removed $list-item-icon-margin-y
  • removed $list-item-padding
  • removed $list-item-subtitle-font-size!default;
  • removed $list-item-three-line-avatar-action-margin

VListGroup

Breaking Changes

  • removed component, being re-implemented in a future patch to v-list

How Has This Been Tested?

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

  • The PR title is no longer than 64 characters.
  • The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
  • My code follows the code style of this project.
  • I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

@johnleider johnleider added this to the v3.0.0 milestone May 22, 2021
@johnleider johnleider self-assigned this May 22, 2021
@johnleider johnleider added this to In progress in Vuetify 3 - Titan via automation May 22, 2021
@johnleider
Copy link
Member Author

Requesting Initial comments from @vuetifyjs/core-team

@johnleider johnleider added the S: needs docs update The change requires an update to the documentation label Jun 8, 2021
@johnleider johnleider added the S: needs unit tests This PR needs unit tests label Jun 10, 2021
@johnleider johnleider marked this pull request as ready for review June 11, 2021 01:13
@johnleider
Copy link
Member Author

Requesting Final comments from @vuetifyjs/core-team

@johnleider johnleider removed the S: needs unit tests This PR needs unit tests label Jun 14, 2021
@johnleider johnleider mentioned this pull request Jun 14, 2021
Closed
@johnleider johnleider changed the title feat(VList): initial v3 conversion feat(VList): port to v3 Jun 14, 2021
@johnleider johnleider merged commit be331bf into next Jun 14, 2021
Vuetify 3 - Titan automation moved this from In progress to Done Jun 14, 2021
@johnleider johnleider deleted the feat/v3-list branch June 14, 2021 20:54
johnleider added a commit that referenced this pull request Jun 14, 2021
@johnleider @KaelWD
feat(VList): port to v3 (#13697)
e6e6b64 
fixes #8137
fixes #9285
fixes #12826

Co-authored-by: Kael <kaelwd@gmail.com>
@glen-84 glen-84 mentioned this pull request Jul 6, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nekosaur nekosaur nekosaur left review comments

@KaelWD KaelWD KaelWD left review comments

Assignees

@johnleider johnleider

Labels
C: VList VList S: needs docs update The change requires an update to the documentation T: feature A new feature
Projects
No open projects
Vuetify 3 - Titan
Done
Milestone
v3.0.0
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@johnleider @nekosaur @KaelWD