Skip to content

Conversation

@thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Nov 12, 2024

Issue number: internal


What is the current behavior?

The footer buttons (confirm, clear, and cancel) do not match the ionic theme styles.

What is the new behavior?

  • Update the styles to mimic the design.
  • Footer buttons render full width when the theme is ionic.
  • The confirm button renders as a solid fill when the theme is ionic.
  • Added snapshots.

Does this introduce a breaking change?

  • Yes
  • No

Other information

Preview

@vercel
Copy link

vercel bot commented Nov 12, 2024

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 Nov 13, 2024 10:05pm

@github-actions github-actions bot added the package: core @ionic/core package label Nov 12, 2024

::slotted(*) .button-clear {
--color: globals.$ion-primitives-neutral-1200;
--color: #{globals.$ion-primitives-neutral-1200};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noticed this while updating the styles.

Comment on lines 163 to 179
:host .datetime-action-buttons ion-buttons {
display: flex;

justify-content: space-between;
}

/**
* The confirm and clear buttons are grouped in a
* container so that they appear on the end opposite
* of the cancel button.
* We use display: flex so that the
* wrapper only takes up as much
* height as it needs.
*/
.datetime-action-buttons .datetime-action-buttons-container {
display: flex;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These only apply to the native styles.

@thetaPC thetaPC marked this pull request as ready for review November 12, 2024 21:57
@thetaPC thetaPC requested a review from a team as a code owner November 12, 2024 21:57
Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good besides the missing gap!

Copy link
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! 👍

@thetaPC thetaPC merged commit c3a804d into next Nov 14, 2024
46 checks passed
@thetaPC thetaPC deleted the ROU-11363 branch November 14, 2024 18:53
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