[Divider] Responsive orientation

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently the Divider component can only consume horizontal | vertical.

I would like to see it use the ResponsiveStyleValue as a possible option for the orientation property.

It should work something like this...

<Divider
  orientation={{ xs: 'horizontal', sm: 'vertical' }}
/>

Examples 🌈

No response

Motivation 🔦

I want to use a responsive Divider in conjunction with the Stack component as the Stack component can change directions responsively.

Using the components together would look something like this...

<Stack
  direction={{ xs: 'column', sm: 'row' }}
  alignItems={'center'}
  justifyContent={'center'}
  spacing={2}
  divider={(
    <Divider
      orientation={{ xs: 'horizontal', sm: 'vertical' }}
      flexItem={true}
    />
)}
>
{children}
</Stack>

I think that this features would be very useful not just to me but others developers as they start using the Stack component. I am sure that I won't be the only one to run into these problem in the future.

Start from the Divider component's orientation prop and compare how Stack handles its responsive direction value. Verify the ResponsiveStyleValue type and responsive styling path, then confirm the provided responsive Divider example works with Stack and flexItem.