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

fix(VDivider): missing when vertical and aligned to center #19890

Merged
merged 2 commits into from
May 28, 2024
Merged

fix(VDivider): missing when vertical and aligned to center #19890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d68bad
fix(VDivider): missing when vertical and aligned to center
May 24, 2024
392a1a1
Merge branch 'master' into fix-19889
J-Sek May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VDivider/VDivider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
import { computed, toRef } from 'vue'
import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'

type DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'maxHeight' | 'maxWidth'
type DividerKey = 'borderRightWidth' | 'borderTopWidth' | 'height' | 'width'
type DividerStyles = Partial<Record<DividerKey, string>>

export const makeVDividerProps = propsFactory({
Expand All @@ -37,7 +37,7 @@ export const VDivider = genericComponent()({
const styles: DividerStyles = {}

if (props.length) {
styles[props.vertical ? 'maxHeight' : 'maxWidth'] = convertToUnit(props.length)
styles[props.vertical ? 'height' : 'width'] = convertToUnit(props.length)
}

if (props.thickness) {
Expand Down
244 changes: 244 additions & 0 deletions packages/vuetify/src/components/VDivider/__tests__/VDivider.spec.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@
/// <reference types="../../../../types/cypress" />

import { VDivider } from '..'
import { VList, VListItem } from '../../VList'
import { VCard } from '../../VCard'
import { VToolbar } from '../../VToolbar'
import { VBtn } from '../../VBtn'
import { VCol, VRow, VSpacer } from '../../VGrid'

// Tests
describe('VDivider', () => {
describe('examples in documentation', () => {
it('takes full height in flexbox container with static height', () => {
cy.mount(() => (
<>
<div
class="ma-2 d-flex align-center justify-center bg-grey-lighten-2"
style="height: 200px;"
>
<VDivider
data-test="divider-v"
vertical
class="opacity-100 text-red"
></VDivider>
</div>
</>
))
.get("[data-test='divider-v']")
.should('have.length', 1)
.should('have.css', 'height', '200px')
})

it('takes defined length when used as centered separator in VToolbar', () => {
cy.mount(() => (
<>
<VToolbar>
<VBtn icon="mdi-arrow-left"></VBtn>
<VSpacer></VSpacer>
<VBtn class="ms-5" icon="mdi-archive-plus-outline"></VBtn>
<VBtn icon="mdi-alert-circle-outline"></VBtn>
<VBtn icon="mdi-delete-outline"></VBtn>
<VDivider
data-test="divider-v"
class="mx-3 align-self-center opacity-100 text-red"
length="24"
thickness="2"
vertical
></VDivider>
<VBtn icon="mdi-folder-outline"></VBtn>
<VBtn icon="mdi-tag-outline"></VBtn>
<VBtn icon="mdi-dots-vertical"></VBtn>
</VToolbar>
</>
))
.get("[data-test='divider-v']")
.should('have.length', 1)
.should('have.css', 'height', '24px')
})
})

describe('adaptive height', () => {
it('takes full height in flexbox container with dynamic height', () => {
cy.mount(() => (
<>
<div
class="ma-2 pa-3 d-flex flex-column"
style="height: 370px; width: 940px; outline: 1px solid currentColor"
>
<div class="d-flex">
<aside class="pr-4" style="min-width: 200px">
<VList class="py-0">
{[1, 2, 3].map(idx => (
<VListItem
rounded="lg"
class="bg-grey mb-3"
title={ `Nav item ${idx}` }
></VListItem>
))}
</VList>
</aside>
<VDivider
data-test="divider-v"
vertical
class="opacity-100 text-red"
></VDivider>
<main class="px-4 d-flex align-content-start flex-wrap ga-4">
{[1, 2, 3, 4, 5, 6, 7, 8].map(idx => (
<VCard color="grey" width="200" height="80"></VCard>
))}
</main>
</div>
<footer class="bg-grey flex-fill mt-4 text-center">footer</footer>
</div>
</>
))
.get("[data-test='divider-v']")
.should('have.length', 1)
.should('have.css', 'height', '272px') // 272 = 3 * 80px (card height) + 2 * 16px (ga-4)
})

it('takes relative height in flexbox container with dynamic height', () => {
cy.mount(() => (
<>
<div class="d-flex w-100 pa-6">
<aside class="bg-grey" style="width: 200px; height: 300px">
Sidebar
</aside>
<VDivider
data-test="divider-v"
vertical
class="mx-2 opacity-100 text-red"
></VDivider>
<main class="bg-grey align-self-stretch flex-fill">Content</main>
</div>
</>
))
.get("[data-test='divider-v']")
.should('have.length', 1)
.should('have.css', 'height', '300px')
})
})

describe('separator in list', () => {
it('takes full width in VList', () => {
cy.mount(() => (
<>
<div
class="ma-2 pa-3 d-flex flex-column"
style="height: 370px; width: 940px; outline: 1px solid currentColor"
>
<aside class="pr-4" style="max-width: 200px">
<VList class="bg-transparent py-0">
{[1, 2, 3].map(idx => (
<>
{ idx > 1 && (
<VDivider
data-test="divider-h"
class="my-2 opacity-100 text-red"
></VDivider>
)}
<VListItem
rounded="lg"
class="bg-grey"
title={ `Nav item ${idx}` }
></VListItem>
</>
))}
</VList>
</aside>
</div>
</>
))
.get("[data-test='divider-h']")
.should('have.length', 2)
.should('have.css', 'width', '184px')
})
})

describe('separator in grid', () => {
it('takes only necessary height when grid wraps', () => {
cy.mount(() => (
<>
<div
class="ma-2 pa-3"
style="height: 370px; width: 940px; outline: 1px solid currentColor"
>
<VRow class="align-content-start">
{[0, 1, 2, 3, 4, 5, 6, 7, 8].map(idx => (
<>
{ idx % 4 !== 0 && (
<VDivider
data-test={ `divider-v-${idx}` }
vertical
class="opacity-100 text-red"
></VDivider>
)}
<VCol cols="3">
<VCard color="grey" height="80"></VCard>
</VCol>
</>
))}
</VRow>
</div>
</>
))
.get("[data-test*='divider-v-']")
.should('have.length', 6)
.should('have.css', 'height', '104px') // 80px + 2 * 12px (v-col)
})
})

describe('vertical inset variant', () => {
it('accepts `inset` prop to get predefined margin', () => {
cy.mount(() => (
<>
<div
class="ma-2 d-flex align-center justify-center bg-grey-lighten-2"
style="height: 200px;"
>
<VDivider
data-test="divider-v"
vertical
inset
class="opacity-100 text-red"
></VDivider>
</div>
</>
))
.get("[data-test='divider-v']")
.should('have.length', 1)
.should('have.css', 'height', '184px') // 200px - 2 * 8px (inset margin)
})

it('accepts custom margin', () => {
cy.mount(() => (
<>
<div
class="ma-2 d-flex align-center justify-center bg-grey-lighten-2"
style="height: 200px;"
>
<VDivider
data-test="divider-v"
vertical
thickness="3"
class="my-6 opacity-100 text-red"
></VDivider>
</div>
<div class="ma-2 d-flex align-center bg-grey-lighten-2">
<VCard color="blue" width="200" height="200" rounded="circle"></VCard>
<VDivider
data-test="divider-v"
vertical
thickness="3"
class="ma-6 opacity-100 text-red"
></VDivider>
</div>
</>
))
.get("[data-test='divider-v']")
.should('have.length', 2)
.should('have.css', 'height', '152px') // 200px - 2 * 24px (margin)
})
})
})
Loading