mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
448e63fef0
Issue number: resolves #16532 --------- ## What is the current behavior? Text that is too long to fit in a segment button does not ellipsis, instead it centers all of the text and cuts it off at the beginning and end of the text. ## What is the new behavior? Text that is wider than the segment button will now add an ellipsis and cut the text off instead of horizontally centering the text and overflowing the button (while being cut off visually). While researching how to fix this issue I discovered that the button text was not properly overflowing when it should due to a limitation of flex. I was able to mock segments using divs and see that certain buttons were adding an ellipsis when there was room to grow. This is due to a combination of using `flex-basis: 0` on the segment buttons and `width: auto` on the segment inside of a toolbar. This [blog](https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think) sums it up well, but it is not something I could work around with segment set as `display: flex`. When I changed the mocked segment to use `display: grid`, it allowed the text to properly grow, while overflowing and adding an ellipsis when it couldn't grow. This can be seen in my [Codepen example](https://codepen.io/brandyscarney/pen/poOpbWE?editors=1100). As a result, I made the following updates: - Changed the `ion-segment` to [`display: grid`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-dedcf5921daa49880ebae649e04d4f488a6b965c885a7bb1fdf29a5f1b3d501fR14) (`display: inline-grid` could not be used because the highlight was not properly aligned to the bottom of a toolbar for `md` mode) - Moves the `max-width` for Material Design segment buttons to the parent segment by using [`grid-auto-columns: minmax(auto, $segment-button-md-max-width);`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-8df7c6681b616fdc975b068e3d31282cc4997222e786db6365ebcef3bccbb6d3R10). This is necessary for the buttons to properly center inside of the grid when they all hit the max-width (360px at the moment). - The Material Design segment buttons will now take up equal widths. This matches the [MD2 spec for fixed segments](https://m2.material.io/components/tabs#fixed-tabs). - Sets [`grid-row: 1`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R75) on the host segment button. This tells the segment buttons to stay on the same row. - Sets [`max-width: 100%`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R214) and [`overflow: hidden`](https://github.com/ionic-team/ionic-framework/pull/27457/files#diff-761a18ae6f41275e0eb63e9710045cafd5b221721ef1dad1d46d562e50404615R222) on the native button. This allows the text itself to ellipsis. - Added tests for segment wrapping & went through all existing tests to add missing `ion-label` elements in the segment buttons ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information ### High-level changes between main and this branch | `main` | `FW-3401` | | ---| ---| |  |  | |  |  |