javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/angular/test
History
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
..
apps
chore(angular): test app uses v16 dependencies (#27380)
2023-05-04 19:17:08 +00:00
base
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
build.sh
feat(angular): use standalone components with routing (#25589)
2022-08-30 10:38:16 -04:00
README.md
docs(contributing): include steps to preview changes in an external app (#27172)
2023-04-13 15:01:09 +00:00
sync-e2e.sh
feat(angular): use standalone components with routing (#25589)
2022-08-30 10:38:16 -04:00

README.md

Angular E2E Test Apps

Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions.

Syncing Local Changes

The Angular test app supports syncing your locally built changes for validation.

  1. Build the core and packages/angular directories using npm run build.
  2. Build the Angular test app.
  3. Navigate to the built test app.
  4. Install dependencies using npm install.
  5. Sync your local changes using npm run sync.

From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe or disable the application cache.

Application Cache

Angular CLI creates a cache of several files on disk by default in the .angular directory. This decreases the time taken to build the test application. However, the cache makes it difficult to quickly sync and check local changes of Ionic. As a result, the .angular cache is disabled by default in the test app projects.

See https://angular.io/cli/cache for more information.

Disable Cache

ng cache disable

Note: You may need to manually remove the .angular directory once after running this command.

Enable Cache

ng cache enable

Note: You will need to delete the .angular cache and restart the dev server every time you want to sync local changes of Ionic.

Test App Build Structure

Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.

apps - This directory contains partial applications for each version of Angular we want to test. Typically these directories contain new package.json files, angular.json files, and more. If you have code that is specific to a particular version of Angular, put it in this directory.

base - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory.

build - When the apps and base directories are merged, the final result is put in this directory. The build directory should never be committed to git.

build.sh - This is the script that merges the apps and base directories and places the built application in the build directory.

Usage:

# Build a test app using apps/ng14 as a reference
./build.sh ng14

How to modify test apps

To add new tests, components, or pages, modify the base project. This ensures that tests are run for every tested version.

If you want to add a version-specific change, add the change inside of the appropriate projects in apps. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called test.spec.ts in apps/ng14, make sure you place the file in apps/ng14/e2e/src/test.spec.ts.

Version-specific tests

If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the VersionTest component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.

Adding New Test Apps

As we add support for new versions of Angular, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:

  1. Navigate to the built app for the most recent version of Angular that Ionic tests.
  2. Update the application by following the steps on https://update.angular.io/.
  3. Make note of any files that changed during the upgrade (package.json, package-lock.json, angular.json, etc).
  4. Copy the changed files to a new directory in apps.
  5. Add a new entry to the matrix for test-core-angular in ./github/workflows/build.yml. This will allow the new test app to run against all PRs.
  6. Commit these changes and push.

Example:

In this example, we are going to add the Angular 14 test app.

  1. Build the Angular 13 test app using ./build.sh ng13.
  2. Navigate to build/ng13.
  3. Perform the upgrade steps on https://update.angular.io/. The "From" field should say "13.0" and the "To" field should say "14.0".

Note: You may encounter some other peer dependency issues not covered by the Angular Upgrade Guide. These peer dependency issues can be resolved manually by updating the installed version of each dependency.

  1. Observe that the output of the Angular upgrade indicates that the following files were modified:

angular.json package-lock.json package.json tsconfig.json src/app/form/form.component.ts src/app/modal-example/modal-example.component.ts

  1. Create a directory in apps named ng14.
  2. Copy the modified files to the apps/ng14 directory.
  3. Open ./github/workflows/build.yml and find the test-angular-e2e job.
  4. Find the apps field under matrix.
  5. Add "ng14" to the apps field.
  6. Commit these changes and push.