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` | | ---| ---| |  |  | |  |  |
Ionic
Ionic is an open source app development toolkit for building modern, fast, top-quality cross-platform native and Progressive Web Apps from a single codebase with JavaScript and the Web.
Ionic is based on Web Components, which enables significant performance, usability, and feature improvements alongside support for popular web frameworks like Angular, React, and Vue.
Quickstart
·
Documentation
·
Contribute
·
Blog
Community:
Discord
·
Forums
·
Twitter
Packages
| Project | Package | Version | Downloads | Links |
|---|---|---|---|---|
| Core | @ionic/core |
 |
 |
README.md |
| Angular | @ionic/angular |
 |
 |
README.md |
| Vue | @ionic/vue |
 |
 |
README.md |
| React | @ionic/react |
 |
 |
README.md |
Looking for the ionic-angular package? Ionic 3 has been moved to the ionic-v3 repo. See Earlier Versions.
Getting Started
Start a new project by following our quick Getting Started guide. We would love to hear from you! If you have any feedback or run into issues using our framework, please file an issue on this repository.
Migration Guides
Already have an Ionic app? These guides will help you migrate to the latest versions.
Examples
The Ionic Conference App is a full featured Ionic app. It is the perfect starting point for learning and building your own app.
Contributing
Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label.
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Future Goals
As Ionic Framework components migrate to the web component standard, a goal of ours is to have Ionic Framework easily work within all of the popular frameworks.
Earlier Versions
The source code for earlier versions of the Ionic Framework may exist in other repositories. Please open issues and pull requests in their respective repositories.
- Ionic 2/3: Moved to
ionic-team/ionic-v3 - Ionic 1: Moved to
ionic-team/ionic-v1