Skip to content

fix(toggle): improve customization of toggle - #26329

Merged
liamdebeasi merged 59 commits into
FW-2597from
2597-customization
Nov 23, 2022
Merged

fix(toggle): improve customization of toggle#26329
liamdebeasi merged 59 commits into
FW-2597from
2597-customization

Conversation

@liamdebeasi

@liamdebeasi liamdebeasi commented Nov 21, 2022

Copy link
Copy Markdown
Contributor

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
    • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

There are a few issues I discovered during development:

  1. The toggle now has a min height which makes layouts look odd when not using a visible label
  2. The margin between the label and the control was always visible even when not using a visible label
  3. The overflow of the handle's box shadow could not be customized, causing some regressions in the size test
  4. Padding on the legacy toggle when used inside of ion-item was incorrectly being applied to the modern toggle.

What is the new behavior?

  • Removed the min heights from the toggle. The toggle now takes up 100% of height and width when used inside of ion-item
  • The label wrapper that applies the margin is now hidden if textContent === '' (i.e. no label was slotted)
  • The overflow prop was moved to the handle element so it can be customized using ::part(handle)
  • Updated the selectors so the padding in ion-item is only applied to the legacy toggle.
  • Added I/O label tests
  • Added size tests

Note: This will be reflected in the docs, but how developers style ion-toggle will also change. Previously some styles could be set on the host while others were only set on shadow parts. Unfortunately, it was not clear which styles could be set where which led to messy CSS. As a result of this change, most styles should target the specific pieces of ion-toggle. For example, if you wanted to change the height of the track you would target ::part(track) instead of setting the height on the host and having it magically change the height of the range.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@github-actions github-actions Bot added the package: core @ionic/core package label Nov 21, 2022
@liamdebeasi liamdebeasi changed the title 2597 customization fix(toggle): improve customization of toggle Nov 21, 2022
@liamdebeasi
liamdebeasi marked this pull request as ready for review November 22, 2022 15:45
@liamdebeasi
liamdebeasi requested a review from a team as a code owner November 22, 2022 15:45
@liamdebeasi
liamdebeasi merged commit c4923e5 into FW-2597 Nov 23, 2022
@liamdebeasi
liamdebeasi deleted the 2597-customization branch November 23, 2022 16:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants