feat: sm-75 create divider component

[Suryansh-Simform]

Description

This pull request introduces a flexible and customizable Divider component. The Divider enhances content separation and visual organization across the application, supporting multiple variants for styling, alignment, and orientation.

Features

• Variant Control:

  • Options: fullWidth, inset, middle
  • Controls the width and positioning of the divider.

• Alignment Control:

  • Options: horizontal, vertical
  • Sets the orientation of the divider.

• Type Control:

  • Options: solid, dashed, dotted
  • Specifies the style of the divider.

• Text Alignment Control:

  • Options: left, right, center
  • Aligns text inside the divider for better UI flexibility.

[VatsalDave2102]

Could we go for a better naming convention for textAlign options that are left, right and center. For horizontal variant they seem perfect but for vertical, they create confusion. We can have top, bottom and center for that. This is achievable using discriminated unions in typescript.

[Suryansh-Simform]

Could we go for a better naming convention for textAlign options that are left, right and center. For horizontal variant they seem perfect but for vertical, they create confusion. We can have top, bottom and center for that. This is achievable using discriminated unions in typescript.

@VatsalDave2102 You're right, we could use options like top, right, and left—I considered this as well. However, if you look at examples like Material UI and Ant Design etc, they don’t offer text-align options like top, bottom, or center for vertical alignment.

but if you want I can take a look and try to implement as you mentioned

[VatsalDave2102]

@VatsalDave2102 You're right, we could use options like top, right, and left—I considered this as well. However, if you look at examples like Material UI and Ant Design etc, they don’t offer text-align options like top, bottom, or center for vertical alignment.

You're correct, they have not provided options for top and bottom. But they also have not implemented the styles for that in vertical orientation. i.e.

<Divider textAlign="left" orientation="vertical">Content</Divider>

The Content would stay in center even though we have given text align left. On the other hand, we have implemented styles for vertical orientation. Hence I suggested to have a better naming convention. Or else we could also follow a similar pattern like MUI, to not provide styles for vertical orientation.

[Suryansh-Simform]

@VatsalDave2102 You're right, we could use options like top, right, and left—I considered this as well. However, if you look at examples like Material UI and Ant Design etc, they don’t offer text-align options like top, bottom, or center for vertical alignment.

You're correct, they have not provided options for top and bottom. But they also have not implemented the styles for that in vertical orientation. i.e.

<Divider textAlign="left" orientation="vertical">Content</Divider>

The Content would stay in center even though we have given text align left. On the other hand, we have implemented styles for vertical orientation. Hence I suggested to have a better naming convention. Or else we could also follow a similar pattern like MUI, to not provide styles for vertical orientation.

@VatsalDave2102 Agreed will implement the changes

[github-actions[bot]]

:tada: This issue has been resolved in version 1.12.0 :tada:

The release is available on:

• GitHub release
• npm package (@dev dist-tag)

Your semantic-release bot :package::rocket: