feat(toggle): display as block when justify or alignment properties are defined

[brandyscarney]

Issue number: internal

---

What is the current behavior?

When adding the justify or alignment property to an ion-toggle it does not change the design because the toggle is displayed inline.

What is the new behavior?

This is doing the same thing as #29783 and #29801

• Change the toggle's display property to block when the justify or alignment property is set.
• Set the default justify-content style to space-between so that a toggle with width: 100% set without justify or alignment set will still have the same default
• Set the default align-items style to center so that a toggle with width: 100% and label-placement="stacked" set without justify or alignment set will still have the same default
• Modifies the label e2e test to remove the explicit width as setting the property will make them full-width
• Adds two examples to the label e2e test of labels that do not have justify set but use width: 100% to ensure they are working as expected without it
• Adds one example to the label e2e test of a long label that uses justify to ensure it still wraps properly (this existed in the checkbox test but not toggle)

Does this introduce a breaking change?

• Yes
• No

Other information

• Basic Preview
• Label Preview
• Item Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 28, 2024 7:45pm

[thetaPC]

LGTM