Skip to content

Commit

Permalink
fix: fix vertical label_direction support for Radio group and ToggleB…
Browse files Browse the repository at this point in the history 
…utton group (#2899)
  • Loading branch information
@tujoworker
tujoworker authored Nov 14, 2023
1 parent eb6b722 commit d650c66
Show file tree
Hide file tree
Showing 9 changed files with 97 additions and 12 deletions.
Binary file modified ...mponents-alignment-for-sbanken-have-to-match-vertical-labels-direction.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...__/form-components-alignment-for-ui-have-to-match-horizontal-direction.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...rm-components-alignment-for-ui-have-to-match-vertical-labels-direction.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 7 additions & 4 deletions packages/dnb-eufemia/src/components/radio/RadioGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,14 +239,17 @@ export default class RadioGroup extends React.PureComponent {
<fieldset>
<Flex.Container
align="baseline"
direction={vertical ? 'vertical' : 'horizontal'}
direction={
vertical || label_direction === 'vertical'
? 'vertical'
: 'horizontal'
}
spacing={vertical ? 'x-small' : undefined}
>
<FormLabel
element="legend"
label_id={id + '-label'}
label_direction={label_direction}
label_sr_only={label_sr_only}
id={id + '-label'}
srOnly={label_sr_only}
>
{label}
</FormLabel>
Expand Down
44 changes: 42 additions & 2 deletions packages/dnb-eufemia/src/components/radio/__tests__/Radio.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,7 +279,7 @@ describe('Radio group component', () => {
).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-horizontal',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
Expand All @@ -291,7 +291,46 @@ describe('Radio group component', () => {
).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-horizontal',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
'dnb-flex-container--wrap',
'dnb-flex-container--divider-space',
])
})

it('should support vertical label', () => {
const { rerender } = render(
<Radio.Group label="Label" vertical>
<Radio />
</Radio.Group>
)

const element = document.querySelector('.dnb-radio-group')
const flexElement = element.querySelector('.dnb-flex-container')

expect(Array.from(flexElement.classList)).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-x-small',
'dnb-flex-container--wrap',
'dnb-flex-container--divider-space',
])

rerender(
<Radio.Group label="Label" label_direction="vertical">
<Radio />
</Radio.Group>
)

expect(Array.from(flexElement.classList)).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
Expand All @@ -300,6 +339,7 @@ describe('Radio group component', () => {
])
})
})

describe('Radio ARIA', () => {
it('should validate with ARIA rules for Radio', async () => {
const Comp = render(<Radio {...props} />)
Expand Down
Binary file modified ...snapshots__/skeleton-for-sbanken-have-to-match-all-components-vertical.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...mage_snapshots__/skeleton-for-ui-have-to-match-all-components-vertical.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 7 additions & 4 deletions packages/dnb-eufemia/src/components/toggle-button/ToggleButtonGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,14 +294,17 @@ export default class ToggleButtonGroup extends React.PureComponent {
<fieldset>
<Flex.Container
align="baseline"
direction={vertical ? 'vertical' : 'horizontal'}
direction={
vertical || label_direction === 'vertical'
? 'vertical'
: 'horizontal'
}
spacing={vertical ? 'x-small' : undefined}
>
<FormLabel
element="legend"
label_id={id + '-label'}
label_direction={label_direction}
label_sr_only={label_sr_only}
id={id + '-label'}
srOnly={label_sr_only}
>
{label}
</FormLabel>
Expand Down
43 changes: 41 additions & 2 deletions packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,45 @@ describe('ToggleButton component', () => {
})

describe('ToggleButton group component', () => {
it('should support vertical label', () => {
const { rerender } = render(
<ToggleButton.Group label="Label" vertical>
<ToggleButton />
</ToggleButton.Group>
)

const element = document.querySelector('.dnb-toggle-button-group')
const flexElement = element.querySelector('.dnb-flex-container')

expect(Array.from(flexElement.classList)).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-x-small',
'dnb-flex-container--wrap',
'dnb-flex-container--divider-space',
])

rerender(
<ToggleButton.Group label="Label" label_direction="vertical">
<ToggleButton />
</ToggleButton.Group>
)

expect(Array.from(flexElement.classList)).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
'dnb-flex-container--wrap',
'dnb-flex-container--divider-space',
])
})

it('has to have variant="radio', () => {
render(
<ToggleButton.Group label="Label" id="group">
Expand Down Expand Up @@ -630,7 +669,7 @@ describe('ToggleButton group component', () => {
).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-horizontal',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
Expand All @@ -642,7 +681,7 @@ describe('ToggleButton group component', () => {
).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-horizontal',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
Expand Down

0 comments on commit d650c66

Please sign in to comment.