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.

Sign up for GitHub

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

Jump to bottom

fix: add id to checkbox, add link to profiles #1449

Closed
wants to merge 6 commits into from
Closed

fix: add id to checkbox, add link to profiles #1449

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a7afd7
fix: add id to checkbox, add link to profiles
a0m0rajab Jul 30, 2023
5331847
Typos everywhere :3
a0m0rajab Jul 30, 2023
42a0442
Update components/atoms/Checkbox/checkbox.tsx
a0m0rajab Jul 31, 2023
655b2ac
chore: convert id to function
a0m0rajab Jul 31, 2023
de21e67
Merge branch 'beta' into fix--checkbox-accesiability,-links-to-pages
a0m0rajab Jul 31, 2023
9a90431
Merge branch 'beta' into fix--checkbox-accesiability,-links-to-pages
a0m0rajab Jul 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
51 changes: 27 additions & 24 deletions components/atoms/Checkbox/checkbox.tsx
View file
Open in desktop
Expand Up @@ -9,31 +9,34 @@ interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPr
}

const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
({ className, label, id = "checkbox", ...props }, ref) => (
<div className="flex items-center">
<CheckboxPrimitive.Root
ref={ref}
className={clsx(
"peer h-4 w-4 shrink-0 rounded-[4px] cursor-pointer bg-white border border-light-slate-8 hover:border-orange-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500",
className
)}
{...props}
id={id}
>
<CheckboxPrimitive.Indicator className={clsx("flex items-center justify-center text-white")}>
<FiCheck className="w-full h-full" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
{label && (
<label
htmlFor={id}
className="ml-3 text-sm font-medium leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
({ className, label, id, ...props }, ref) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

the id had checkbox as default value, I removed it from here.

id = id ? id : label?.replaceAll(" ", "_").toLowerCase();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This line is the line that I changed here, plus the ID call in the function, yet git did not detect it only (not sure why)

Copy link
Contributor

Choose a reason for hiding this comment

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

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()}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I am going to implement this, but was wondering why we would take this approach?

Copy link
Contributor

Choose a reason for hiding this comment

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

The variable name needs updating to avoid conflicts with the reserved id keyword from the props.

We could have easily said const newId = id ? id : label?.replaceAll(" ", "_").toLowerCase(); but it makes more sense with a function since we are performing some checks to determine the used id.

return (
<div className="flex items-center">
<CheckboxPrimitive.Root
ref={ref}
className={clsx(
"peer h-4 w-4 shrink-0 rounded-[4px] cursor-pointer bg-white border border-light-slate-8 hover:border-orange-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-orange-500 data-[state=checked]:bg-orange-500",
a0m0rajab marked this conversation as resolved.
Show resolved Hide resolved
className
)}
{...props}
id={id}
>
{label}
</label>
)}
</div>
)
<CheckboxPrimitive.Indicator className={clsx("flex items-center justify-center text-white")}>
<FiCheck className="w-full h-full" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
{label && (
<label
htmlFor={id}
className="ml-3 text-sm font-medium leading-none cursor-pointer text-light-slate-12 peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
{label}
</label>
)}
</div>
);
}
);
Checkbox.displayName = CheckboxPrimitive.Root.displayName;

Expand Down
4 changes: 2 additions & 2 deletions components/atoms/UserCard/user-card.tsx
View file
Open in desktop
Expand Up @@ -32,9 +32,9 @@ const UserCard = ({ username, name, meta, loading }: UserCardProps) => {
src={avatarUrl}
alt={`${username}'s avatar image`}
/>
<div>
<div className="text-center">
<h3 className="text-base text-center">{name}</h3>
<p className="text-center text-light-slate-9">{`@${username}`}</p>
<a className="text-center text-light-slate-9" href={`/user/${username}`}>{`@${username}`}</a>
</div>
</div>
<div className="flex items-center gap-5 text-base text-center ">
Expand Down
2 changes: 1 addition & 1 deletion components/molecules/ContributorProfileInfo/contributor-profile-info.tsx
View file
Open in desktop
Expand Up @@ -54,7 +54,7 @@ const ContributorProfileInfo = ({
{isConnected && <Badge text="beta" />}
</div>
<div className="flex items-center text-sm gap-3">
<span className="text-light-slate-11 text-sm">{`@${githubName}`}</span>
<a className="text-light-slate-11 text-sm" href={`https://github.coom/${githubName}`}>{`@${githubName}`}</a>

{isConnected && (
<>
Expand Down