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

Checkboxes, Radios, Cards and Links #121

Merged
merged 8 commits into from
May 10, 2024

Conversation

josue2591
Copy link
Contributor

@josue2591 josue2591 commented Apr 10, 2024

Summary

  • This PR updates the styles integrating the tokens into some of the components
  • A sr-only mixin was creating for reusing it when an element needs to be visually hidden but still accessible with screen readers

Tickets

https://app.clickup.com/t/36718269/EMULSIF-84
https://app.clickup.com/t/36718269/EMULSIF-85
https://app.clickup.com/t/36718269/EMULSIF-86
https://app.clickup.com/t/36718269/EMULSIF-76

Notes

This branch was based on the emulsify-fonts-fixed branch so it would be better to merge it after #119

How to review this pull request

@josue2591 josue2591 added the 👍 Ready for Review Work is ready for review. label Apr 10, 2024
@josue2591 josue2591 self-assigned this Apr 10, 2024
@josue2591 josue2591 changed the base branch from main to emulsify-fonts-fixed April 10, 2024 19:38
@amazingrando amazingrando added 🎉 Passes Functional Review Functionality is approved by the reviewer. 🎉 Passes Code Review Code is approved by the reviewer. 🎉 Ready to Merge Functionality is approved by the reviewer. labels Apr 10, 2024
Copy link
Contributor

@amazingrando amazingrando left a comment

Choose a reason for hiding this comment

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

I left a couple of comments for you to consider, but they aren't blockers.

:shipit: Approved!

@@ -1,8 +1,8 @@
{% set labelClasses = checkbox_item_disabled ? 'form-item--checkbox__item--label__disabled' : '' %}

<li class="form-item--checkbox__item">
<input id="checkbox{{ key }}" name="checkbox" type="checkbox" {% if checkbox_item_checked %} checked="{{ checkbox_item_checked }}" {% endif %} {% if checkbox_item_disabled %} disabled="{{ checkbox_item_disabled }}" {% endif %}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Consider rewriting your if statements for checked and disabled like this:
{{ (checkbox_item_checked) ? 'checked' : '' }}.

Since both checked and disabled are booleans, you can only add them to the HTML if they are needed.

<label for="radio{{ key }}">
<input id="radio{{ key }}" name="radio" type="radio" class="radio" {% if radio_item_checked %} checked="{{ radio_item_checked }}" {% endif %} {% if radio_item_disabled %} disabled="{{ radio_item_disabled }}" {% endif %}>
<li class="form-item--radio__item">
<input id="radio{{ key }}" name="radio" type="radio" class="radio" {% if radio_item_checked %} checked="{{ radio_item_checked }}" {% endif %} {% if radio_item_disabled %} disabled="{{ radio_item_disabled }}" {% endif %}>
Copy link
Contributor

Choose a reason for hiding this comment

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

See my comment about checked and disabled on the checkbox twig file.

@amazingrando amazingrando removed the 👍 Ready for Review Work is ready for review. label Apr 18, 2024
Base automatically changed from emulsify-fonts-fixed to main May 10, 2024 20:43
…ULSIF-82-checkboxes-radios-cards-and-links
Copy link

netlify bot commented May 10, 2024

Deploy Preview for emulsify-ui-kit ready!

Name Link
🔨 Latest commit 7ad218c
🔍 Latest deploy log https://app.netlify.com/sites/emulsify-ui-kit/deploys/663e87b04f25b10008918ce1
😎 Deploy Preview https://deploy-preview-121--emulsify-ui-kit.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@mariannuar mariannuar merged commit ce1bf64 into main May 10, 2024
4 checks passed
@mariannuar mariannuar deleted the EMULSIF-82-checkboxes-radios-cards-and-links branch May 10, 2024 20:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎉 Passes Code Review Code is approved by the reviewer. 🎉 Passes Functional Review Functionality is approved by the reviewer. 🎉 Ready to Merge Functionality is approved by the reviewer.
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants