feat(button): add ionic theme implementation by joselrio · Pull Request #29187 · ionic-team/ionic-framework

joselrio · 2024-03-20T10:22:10Z

Issue number: ROU-4815

What is the new behavior?

Adds an ionic theme style implementation for ion-button.
- Adds a new rectangular shape to the button.
- Adds two new button sizes: xsmall and xlarge.
- Adds a new focus-ring CSS shadow part for the ionic theme.

Does this introduce a breaking change?

Yes
No

Preview

OS-giulianasilva

The button sizes seem to not be exactly what is designed, for example, the Extra large button height is 70px instead of 56px.

sean-perkins

Tested locally, really great work here!

I've commented on some code style and testing best practices.

When making changes to some of the code documentation, you will need to run npm run build locally to regenerate certain files.

I need to run, but I can provide information on generating screenshot in a follow-up comment later.

Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>

joselrio · 2024-03-21T14:50:04Z

@sean-perkins amazing feedback! Super useful to get deeper context...
Thank you! :)

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

thetaPC

Request me once Sean's PR has been merged into this branch.

Issue number: N/A ---------   ## What is the current behavior?  Adding new e2e tests into Ionic Framework can be difficult for new contributors when it comes to knowing where existing test cases exist and how to additionally add a new theme or option to the test. To avoid a lot of back and forth feedback in Github comments, I split up the test on the original PR to help demonstrate how to match existing test structures. ## What is the new behavior?  - Removes the proposed test specific to the Ionic theme. - Migrates the tests into the existing e2e files for button, adding specific test cases that only apply to the ionic theme. - Added screenshot references In this work, I tried to correct some legacy folder naming: - `button/test/round` → `button/test/shape` - For `fill="clear"` I updated the screenshot names, but left the folder structure. There is more work here to organize `fill="outline"` and it is not required at this time. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information  I left the HTML template for the ionic theme test alone. I figure this is helpful to the developer, until the primary PR is approved. Then it could be removed if it is no longer useful.

into ROU-4815

joselrio · 2024-03-25T18:53:51Z

@thetaPC missing tests will be done under another task that will be created. This PR should not be blocked for now due to those missing tests. Thank you :)

This whitespace change should not exist.

sean-perkins

Great work on this 👏

I've updated the use of the border-radius property for our @include border-radius mixin. I've also updated a few comment blocks in the Sass stylesheet, but we can continue to update that as additional features are added.

I believe this PR is ready for merge. I've linked technical debt tasks after another PR for test infrastructure is merged. When that happens, a test template will be removed and new screenshots for test cases will be added.

We should provide the Design team with a build of these changes, so they can validate the accuracy of the implementation as well, unless they have already looked and approved the implementation separately.

thetaPC · 2024-03-25T21:21:32Z

@joselrio I noticed that Sean's PR was merged into this one. But I'm not seeing his changes here.

sean-perkins · 2024-03-25T22:41:36Z

@thetaPC the changes were added as part of this commit: 7bfb483. I generated the screenshots and added a few test cases that are not blocked by #29206.

I created FW-6077 to track adding the remaining tests. I added // TODO statements in the code where those apply.

thetaPC

LGTM

Spoke with Brandy internally and we split up some current priorities. I grabbed the review so she can tackle another priority.

Issue number: ROU-4815 --------- ## What is the current behavior? - Ionic theme, Icon size was 14px to the default button size; ## What is the new behavior? - Ionic theme, Icon size has now 16px to the default button size; ## NOTE: - Tests related... this a fix on top of [PR of ROU-4815 branch](#29187) and as was mentioned there, tests will be implemented under a task that will be then created specifically for it.

joselrio added 3 commits March 19, 2024 15:53

[feat](button): Added new ionic theme and sizes.
1f3e134

[feat](button): lint.sass.fix
e8dcab3

[tests](button): Added new ionic theme tests.
025da98

joselrio requested review from a team and brandyscarney as code owners March 20, 2024 10:22

github-actionsBot added the package: core @ionic/core package label Mar 20, 2024

joselrio added 3 commits March 20, 2024 10:27

[feat](button): Updated comment.
11e87a1

[feat](button): Update api.txt
e41a2c6

[feat](button): lint
ebfa926

OS-giulianasilva requested changes Mar 20, 2024
View reviewed changes

Comment threadcore/src/components/button/button.tsx Outdated
Comment threadcore/src/components/button/button.tsx Outdated

bmarcelino-fe approved these changes Mar 20, 2024
View reviewed changes

[feat](button): typo
ac591f1

OS-giulianasilva requested changes Mar 20, 2024
View reviewed changes

Comment threadcore/src/themes/ionic.functions.sizes.scss Outdated

[feat](button): fixed units.
4cc1a04

sean-perkins reviewed Mar 20, 2024
View reviewed changes

OS-giulianasilva approved these changes Mar 21, 2024
View reviewed changes

joselrioand others added 2 commits March 21, 2024 14:11

Update core/src/components/button/button.tsx
5b5851c
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>

[feat](button): Feedback improvements.
8a75ecf

style(button): align Sass comments with md and ios vars
5f89bf2

brandyscarney previously requested changes Mar 21, 2024
View reviewed changes

brandyscarney reviewed Mar 21, 2024
View reviewed changes

Comment threadcore/src/components/button/button.ionic.scss Outdated

Update core/src/components/button/button.ionic.scss
d6f05f6
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

brandyscarney reviewed Mar 21, 2024
View reviewed changes

Comment threadcore/src/components/button/button.ionic.scss Outdated

Update core/src/components/button/button.tsx
6a0fb94
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

brandyscarney reviewed Mar 21, 2024
View reviewed changes

Comment threadcore/src/components/button/button.ionic.scss Outdated

joselrioand others added 4 commits March 21, 2024 16:10

Update core/src/components/button/button.ionic.scss
98629a5
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

Update core/src/components/button/button.ionic.scss
8d16fd5
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

Update core/src/components/button/button.ionic.scss
af32d25
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

Update core/src/components/button/button.ionic.scss
f3ecd62
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

[style](button): Changed the way border is hide to avoid flickering.
c1c0e76

thetaPC requested changes Mar 21, 2024
View reviewed changes

sean-perkinsand others added 4 commits March 21, 2024 16:49

Merge remote-tracking branch 'origin/next' into ROU-4815
2436860

Update core/src/components/button/button.ionic.scss
6753ba7
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

Update core/src/components/button/button.tsx
2e872b2
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

[fix](button): typo
bedc6e9

joselrio requested review from brandyscarney and thetaPC March 22, 2024 15:27

joselrioand others added 2 commits March 22, 2024 15:58

[fix](button): lint
ac4d8ec

Update checkbox.ios.scss
6fae295

thetaPC requested changes Mar 22, 2024
View reviewed changes

joselrioand others added 3 commits March 25, 2024 09:53

[fix](button): Removed unneeded tests.
94f6303

Merge branch 'ROU-4815' ofhttps://github.com/ionic-team/ionic-framework
7bfb483
into ROU-4815

joselrio requested a review from averyrousseau as a code owner March 25, 2024 12:23

sean-perkins changed the title ~~[feat](button): Add new button features under the scope for the new ionic theme.~~feat(button): add ionic theme implementationMar 25, 2024

sean-perkins added 2 commits March 25, 2024 14:10

chore: link tech-debt task
1a9e85a

fix: use border-radius mixin, update comment blocks
0e4fb4d

joselrio requested a review from thetaPC March 25, 2024 18:52

chore: remove diff
76903b0
This whitespace change should not exist.

sean-perkins approved these changes Mar 25, 2024
View reviewed changes

thetaPC approved these changes Mar 25, 2024
View reviewed changes

sean-perkins merged commit 4cf1b97 into nextMar 26, 2024

sean-perkins deleted the ROU-4815 branch March 26, 2024 02:17

joselrio mentioned this pull request Apr 4, 2024
fix(button): update icon size to the default size #29255
Merged

Uh oh!

Conversation

joselrio commented Mar 20, 2024• edited by sean-perkins Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the new behavior?

Does this introduce a breaking change?

Preview

Uh oh!

Uh oh!

Uh oh!

OS-giulianasilva left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sean-perkins left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

joselrio commented Mar 21, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

joselrio commented Mar 25, 2024

Uh oh!

sean-perkins left a comment

Choose a reason for hiding this comment

Uh oh!

thetaPC commented Mar 25, 2024

Uh oh!

sean-perkins commented Mar 25, 2024

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

joselrio commented Mar 20, 2024•
edited by sean-perkins
Loading