Skip to content

Commit

Permalink
fix(VDivider): missing when vertical and aligned to center
Browse files Browse the repository at this point in the history
  • Loading branch information
jsek committed May 25, 2024
1 parent e46a98d commit 6d68bad
Show file tree
Hide file tree
Showing 2 changed files with 246 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VDivider/VDivider.tsx
View file
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
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)
})
})
})

0 comments on commit 6d68bad

Please sign in to comment.