Internal issue 3134 - Vertical IcDivider should expose `flexItem`-like prop
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
h3. Summary
Add a {{flexItem}}-like prop (from MUI’s Divider API) to make vertical dividers behave as expected in flex containers.
h3. 💬 Description
An IcDivider in the vertical configuration (i.e. {{}}) will not display as expected if the parent element is a flexbox without an explicit height set. This is also the same behaviour observed with MUI’s React Divider component by default. However, MUI’s Divider API exposes a {{flexItem}} prop:
{quote}If {{true}}, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of {{0px}} if it is the child of a flex container.){quote}
IcDivider should ideally expose a similar prop.
h3. 💰 Use value
This will make the IcDivider easier/more intuitive to use in the vertical configuration, as currently a flexbox parent with no explicit height (i.e. height controlled intrinsically) will result in the IcDivider not displaying.
h3. 📝 Acceptance Criteria
_Given I have a flexbox with no explicit height set_
_When I add an IcDivider in the vertical orientation (perhaps with a prop like_ {{flexItem}} _set to_ {{true}}_)_
_Then the IcDivider should render_
h3. ✏ Designs
N/A
h3. 🧾 Guidance
MUI Divider API docs: [https://mui.com/material-ui/api/divider/#:~:text=flexItem,-boolfalse|https://mui.com/material-ui/api/divider/#:~:text=flexItem,-boolfalse]
MUI Divider source: [https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Divider/Divider.js|https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Divider/Divider.js]
h3. 🚨 Urgency (low, medium or high)
Medium
h3. Additional info
N/A
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 at the IcDivider component entry point and inspect how its vertical orientation sizes itself inside a flex container. Compare the relevant behavior with the linked MUI Divider source, then verify the acceptance scenario: a vertical IcDivider in a flex parent without an explicit height renders correctly when the new prop is enabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100