Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(NcActions): NcActionCheckbox and NcActionRadio icon alignment #5958

Merged
merged 1 commit into from
Aug 14, 2024

Conversation

GretaD
Copy link
Contributor

@GretaD GretaD commented Aug 14, 2024

☑️ Resolves

🖼️ Screenshots

🏚️ Before | 🏡 After
Screenshot from 2024-08-14 10-42-45
|
Screenshot from 2024-08-14 11-36-43

🚧 Tasks

  • Change the margin of both ncactioncheckbox and ncactionradio so they align. I decreased the margin because they dont fit with the other elements, like 'remove attendee' in the screenshot. I think that comes from making icons smaller.

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 3️⃣ Backport to next requested with a Vue 3 upgrade

Signed-off-by: greta <gretadoci@gmail.com>
@GretaD GretaD added bug Something isn't working 3. to review Waiting for reviews labels Aug 14, 2024
@GretaD GretaD self-assigned this Aug 14, 2024
@ShGKme ShGKme changed the title fix:fix ncactioncheckbox and ncactionradio alignment fix(NcActions): NcActionCheckbox and NcActionRadio icon alignment Aug 14, 2024
@ShGKme ShGKme added this to the 8.16.1 milestone Aug 14, 2024
@susnux
Copy link
Contributor

susnux commented Aug 14, 2024

/backport to next

@@ -206,8 +206,7 @@ export default {

&::before {
margin-block: 0 !important;
// 16px is the width of the checkbox including the border
margin-inline: calc((var(--default-clickable-area) - 16px) / 2) !important;
margin-inline: calc((var(--default-clickable-area) - 14px) / 2) !important;
Copy link
Contributor

Choose a reason for hiding this comment

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

Probably, we should either add CSS variable for it, or change layout here to not use this number to avoid magic numbers.

P.S. On all supported versions on server it is 14px, not 16px

https://github.com/nextcloud/server/blob/stable28/core/css/inputs.scss#L414

@GretaD GretaD merged commit 34f5c70 into master Aug 14, 2024
19 checks passed
@GretaD GretaD deleted the fix/radiobutton-alignment branch August 14, 2024 15:31
@susnux susnux mentioned this pull request Aug 20, 2024
@susnux susnux modified the milestones: 8.16.1, 8.17.0 Aug 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

NcActionRadio does not align with NcActionButton, NcActionCheckbox, etc
3 participants