[material-ui][Divider] Consistent spacing with text aligned left
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Summary 💡
When a horizontal Divider has text with textAlign="left", the spacing before the text depends on its size. It would be nice if the spacing was consistent, possibly even configurable.
Examples 🌈
Here are 3 dividers with text, note that the space before the text changes depending on its size:
https://codesandbox.io/s/modern-bird-ht8gst?file=/src/App.js
Motivation 🔦
When you have a couple dividers on a page, it seems odd that their text is not aligned consistently.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Divider component and the linked CodeSandbox example, comparing the three horizontal dividers that use textAlign="left". Determine how the current text size affects the leading spacing and define whether consistent spacing alone or a configurable option is required. Done means left-aligned divider labels have consistent spacing across different text sizes, with coverage for the chosen behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100