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: add checkbox id name if not available based on label #1466

Merged
merged 4 commits into from Aug 2, 2023

Conversation

a0m0rajab
Copy link
Contributor

@a0m0rajab a0m0rajab commented Aug 1, 2023

Description

This PR fixes the similar IDs for the checkboxes in the whole repo, the previous behavior was using the same name for each checkbox, this PR will allow to generate a unique id based on the label.

Important note:: The GitHub UI is showing unnecessary changes due to changing spaces in the file, hiding spaces would show a better changes:

image

Another option would be going to github.dev to review this.
to go to github.dev you need to do one of the next:

  • click . dot in the keyboard
  • change the .com in the URL to .dev

What type of PR is this? (check all applicable)

  • πŸ• Feature
  • πŸ› Bug Fix
  • πŸ“ Documentation Update
  • 🎨 Style
  • πŸ§‘β€πŸ’» Code Refactor
  • πŸ”₯ Performance Improvements
  • βœ… Test
  • πŸ€– Build
  • πŸ” CI
  • πŸ“¦ Chore (Release)
  • ⏩ Revert

Related Tickets & Documents

fixes #1448

Mobile & Desktop Screenshots/Recordings

The checkbox elements and labels are connected to their related inputs:
image

To Test you need to do the next:

Added tests?

  • πŸ‘ yes
  • πŸ™… no, because they aren't needed
  • πŸ™‹ no, because I need help

Added to documentation?

  • πŸ“œ README.md
  • πŸ““ docs.opensauced.pizza
  • πŸ• dev.to/opensauced
  • πŸ“• storybook
  • πŸ™… no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

@netlify
Copy link

netlify bot commented Aug 1, 2023

βœ… Deploy Preview for design-insights ready!

Name Link
πŸ”¨ Latest commit ce81764
πŸ” Latest deploy log https://app.netlify.com/sites/design-insights/deploys/64ca9caf8d62950008205a3d
😎 Deploy Preview https://deploy-preview-1466--design-insights.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.

@netlify
Copy link

netlify bot commented Aug 1, 2023

βœ… Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name Link
πŸ”¨ Latest commit ce81764
πŸ” Latest deploy log https://app.netlify.com/sites/oss-insights/deploys/64ca9cafd962390008e7b03c
😎 Deploy Preview https://deploy-preview-1466--oss-insights.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.

@a0m0rajab a0m0rajab changed the title fix: add id name if not avaiabile based on label fix: add checkbox id name if not available based on label Aug 1, 2023
Copy link
Contributor

@OgDev-01 OgDev-01 left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link

@ppaul ppaul left a comment

Choose a reason for hiding this comment

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

there will be 2 calls of getId inside the JSX. I would rather suggest determining the id only once in a const, then return the JSX.

@a0m0rajab
Copy link
Contributor Author

@ppaul thanks for the feedback, your suggestion were the previous implementation of this PR,

You should turn this to a function that returns the conditional statements here

Suggested change
id = id ? id : label?.replaceAll(" ", "").toLowerCase();
const getId = ()=> id ? id : label?.replaceAll(" ", "
").toLowerCase();

Then in the component attributes, set it to id={getId()}

#1449 (review)

@brandonroberts brandonroberts merged commit 68f66a7 into open-sauced:beta Aug 2, 2023
11 checks passed
github-actions bot pushed a commit that referenced this pull request Aug 2, 2023
## [1.58.0-beta.5](v1.58.0-beta.4...v1.58.0-beta.5) (2023-08-02)

### πŸ• Features

* update redirect to feed page for unauthenticated users ([#1464](#1464)) ([6d8505f](6d8505f))

### πŸ› Bug Fixes

* add checkbox id name if not available based on label ([#1466](#1466)) ([68f66a7](68f66a7))
@github-actions
Copy link

github-actions bot commented Aug 2, 2023

πŸŽ‰ This PR is included in version 1.58.0-beta.5 πŸŽ‰

The release is available on GitHub release

Your semantic-release bot πŸ“¦πŸš€

github-actions bot pushed a commit that referenced this pull request Aug 2, 2023
## [1.58.0](v1.57.0...v1.58.0) (2023-08-02)

### πŸ§‘β€πŸ’» Code Refactoring

*  merge `authSession` function into `useSession` hook ([#1391](#1391)) ([d6c230d](d6c230d))

### 🎨 Styles

* add width and max width for created at in contributor-profile-tab ([#1429](#1429)) ([5614886](5614886))
* remove irrelevant padding in page divider ([#1427](#1427)) ([5faaa4e](5faaa4e))

### πŸ• Features

* add devcard button to user profile ([#1339](#1339)) ([6a1dbdc](6a1dbdc))
* new contributor highlight card ([#1443](#1443)) ([c88000b](c88000b))
* update redirect to feed page for unauthenticated users ([#1464](#1464)) ([6d8505f](6d8505f))

### πŸ› Bug Fixes

* add checkbox id name if not available based on label ([#1466](#1466)) ([68f66a7](68f66a7))
* add navigation to improve accessibility ([#1436](#1436)) ([d1d85f7](d1d85f7))
* contributor profile tab click state flicker ([#1432](#1432)) ([c9cf8ed](c9cf8ed))
* Deleted page button changed to delete highlight ([#1419](#1419)) ([d502605](d502605))
* fixed bug on chatbot button overlay ([#1420](#1420)) ([2a94583](2a94583))
* hide onboarding button on mobile ([#1460](#1460)) ([f63f240](f63f240))
* Improve Keyboard Accessibility for Notification Icon ([#1435](#1435)) ([05291c0](05291c0))
* improve layout design for large screens [#1231](#1231) ([#1437](#1437)) ([d8ae808](d8ae808))
* misaligned chat button close icon ([#1422](#1422)) ([60f22bd](60f22bd))
* mismatched selection color ([#1430](#1430)) ([8a1d37b](8a1d37b))
* reduce tab font size in contributors profile page ([#1413](#1413)) ([238dc2f](238dc2f))
* show repo filters on initial `feeds` route visit ([#1426](#1426)) ([833ee30](833ee30))
* tab inconsistency in user profile matching the url ([#1403](#1403)) ([f8c6766](f8c6766))
@github-actions
Copy link

github-actions bot commented Aug 2, 2023

πŸŽ‰ This PR is included in version 1.58.0 πŸŽ‰

The release is available on GitHub release

Your semantic-release bot πŸ“¦πŸš€

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: user settings checkbox IDs are not set
5 participants