test(styles): update button styles for test pages

[thetaPC]

Issue number: internal

---

What is the current behavior?

Test styles causes native buttons to have certain styling. This was done to spruce up the buttons used for testing purposes only. However, this ended up adding styles to native buttons within Ionic components.

What is the new behavior?

• Test styles for native buttons are only applied to buttons that are not part of a Ionic component

Does this introduce a breaking change?

• Yes
• No

Other information

How to test:

1. Run the project locally from the main branch
2. Comment out border: 0 from .searchbar-clear-button from the searchbar md theme file (ios also works)
3. Navigate to the basic test page: /src/components/searchbar/test/basic
4. Notice a teal border around the clear buttons
5. Checkout to this PR's branch
6. Make sure steps 2-3 are done
7. Verify that the teal border is not being applied to the clear buttons
8. Verify that only native buttons outside of the Ionic components have a teal appearance: /src/components/loading/test/standalone and /src/components/action-sheet/test/is-open

[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	Oct 14, 2024 3:29pm

[thetaPC]

This change was needed to override the padding from styles.css.

[tanner-reits]

Tested changes and looks good.

Might be worth noting that this only affected scoped components. The global test styles cannot seep into the Shadow DOM of components so they were not being affected. And, the selector used in the fixed (sc-ion-*) is only added to elements that are a part of components with scoped encapsulation.