mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00

Files

Brandy Carney 448e63fef0 feat(segment): display segment as a grid and add an ellipsis to overflowing text in a segment button (#27457 )

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` |
| ---| ---|
|
![main-ios](https://github.com/ionic-team/ionic-framework/assets/6577830/b245fffa-e09c-4a96-bc6e-c4d2ee68cd16)
|
![branch-ios](https://github.com/ionic-team/ionic-framework/assets/6577830/397d95f5-24d3-4421-b960-1a8a6ace7c26)
|
|
![main-md](https://github.com/ionic-team/ionic-framework/assets/6577830/75c77373-0dde-4e7d-a7fa-fc082fcb5c7a)
|
![branch-md](https://github.com/ionic-team/ionic-framework/assets/6577830/402f8293-8ea5-47fb-bc13-7dc2d85b361a)
|

2023-05-24 11:42:57 -04:00

scripts

chore(ci): enable npm package provenance (#27263 )

2023-04-24 13:04:10 +00:00

src

feat(segment, segment-button): update segment value property to accept numbers (#27222 )

2023-05-24 09:07:57 -05:00

test

feat(segment): display segment as a grid and add an ellipsis to overflowing text in a segment button (#27457 )

2023-05-24 11:42:57 -04:00

.eslintignore

feat(virtual-scroll): remove virtual scroll component (#25808 )

2022-08-24 15:42:12 -04:00

.eslintrc.json

feat(virtual-scroll): remove virtual scroll component (#25808 )

2022-08-24 15:42:12 -04:00

.prettierignore

chore(): sync with main

2022-09-30 12:27:17 -04:00

CHANGELOG.md

v7.0.6

2023-05-11 13:20:15 +00:00

ng-package.json

feat(angular,angular-server): angular v14 minimum support (#26822 )

2023-02-22 12:33:49 -05:00

package-lock.json

chore(): update package lock files

2023-05-11 13:20:28 +00:00

package.json

v7.0.6

2023-05-11 13:20:15 +00:00

README.md

chore(repo): update old heroku app links (#27284 )

2023-04-26 15:47:46 +00:00

tsconfig.json

refactor(ci): do not cache node modules (#26265 )

2022-11-14 13:55:46 -05:00

tsconfig.schematics.json

feat(): support ng add (#15323 )

2018-11-27 13:36:59 -05:00

tslint.json

feat(angular): build for angular 12.0 (#23970 )

2021-10-15 16:54:59 -04:00

README.md

@ionic/angular

Ionic Angular specific building blocks on top of @ionic/core components.

License

Testing ng-add in ionic

Pull the latest from main
Build ionic/angular: npm run build
Run npm link from ionic/angular/dist directory
Create a blank angular project

ng new add-test
// Say yes to including the router, we need it
cd add-test

To run schematics locally, we need the schematics-cli (once published, this will not be needed)

npm install @angular-devkit/schematics-cli

Link @ionic/angular

npm link @ionic/angular

Run the local copy of the ng-add schematic

$ npx schematics @ionic/angular:ng-add

You'll now be able to add ionic components to a vanilla Angular app setup.

README.md

@ionic/angular

Related

License

Testing ng-add in ionic