Skip to content

Commit

Permalink
Replace aria checkbox with hui checkbox, rename hui and delete aria.
Browse files Browse the repository at this point in the history
  • Loading branch information
@salamca
salamca committed Dec 1, 2023
1 parent 7c1aa07 commit dd7921d
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 181 deletions.
6 changes: 3 additions & 3 deletions src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-route-list/crag-route.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { useContext } from "react";
import { Crag, Route } from "../../../../../../../graphql/generated";
import RouteLink from "../../../../../../../components/route-link";
import AscentIcon from "../../../../../../../components/ui/ascent-icon";
import Checkbox from "../../../../../../../components/ui/checkbox";
import { IconSize } from "@/components/ui/icons/icon-size";
import IconComment from "../../../../../../../components/ui/icons/comment";
import IconStarEmpty from "../../../../../../../components/ui/icons/star-empty";
Expand All @@ -11,6 +10,7 @@ import Link from "../../../../../../../components/ui/link";
import { CragRoutesContext } from "../../crag-routes";
import { pluralizeNoun } from "../../../../../../../utils/text-helpers";
import RouteGrade from "./crag-route/route-grade";
import Checkbox from "@/components/ui/checkbox";

interface Props {
crag: Crag;
Expand All @@ -31,7 +31,7 @@ function CragRoute({ crag, route, ascent }: Props) {
>
{/* # (checkbox) */}
<td>
<Checkbox aria-label="Označi kot plezano" />
<Checkbox label="Označi kot plezano" hideLabel />
</td>

{/* Route name */}
Expand Down Expand Up @@ -120,7 +120,7 @@ function CragRouteCompact({ crag, route, ascent }: Props) {
className="mt-2 flex items-center border-b border-neutral-200 pb-2 last:border-none"
>
<div className="w-7">
<Checkbox aria-label="Označi kot plezano" />
<Checkbox label="Označi kot plezano" hideLabel />
</div>
<div className="w-full pr-4">
<div className="flex justify-between font-medium">
Expand Down
41 changes: 22 additions & 19 deletions src/app/[lang]/crag/[cragSlug]/components/crag-routes/crag-routes-actions/filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import GradeRangeSlider, {
minSliderValue,
sliderValueToDifficultyMap,
} from "../../../../../../../components/ui/grade-range-slider";
import Checkbox from "../../../../../../../components/ui/checkbox";
import {
Radio,
RadioGroup,
} from "../../../../../../../components/ui/radio-group";
import Checkbox from "@/components/ui/checkbox";

function Filter() {
const { cragRoutesState, setCragRoutesState } = useContext(CragRoutesContext);
Expand Down Expand Up @@ -146,24 +146,27 @@ function Filter() {
<div className="flex flex-col">
<div>Glede na lepoto</div>
<div className="mt-2">
<Checkbox
isSelected={marvelousFilterValue}
onChange={setMarvelousFilterValue}
>
Čudovita
</Checkbox>
<Checkbox
isSelected={beautifulFilterValue}
onChange={setBeautifulFilterValue}
>
Lepa
</Checkbox>
<Checkbox
isSelected={unremarkableFilterValue}
onChange={setUnremarkableFilterValue}
>
Nič posebnega
</Checkbox>
<div>
<Checkbox
label="Čudovita"
checked={marvelousFilterValue}
onChange={setMarvelousFilterValue}
/>
</div>
<div className="mt-1">
<Checkbox
label="Lepa"
checked={beautifulFilterValue}
onChange={setBeautifulFilterValue}
/>
</div>
<div className="mt-1">
<Checkbox
label="Nič posebnega"
checked={unremarkableFilterValue}
onChange={setUnremarkableFilterValue}
/>
</div>
</div>
</div>

Expand Down
51 changes: 7 additions & 44 deletions src/app/sandbox/checkbox/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
"use client";

import CheckboxHUI from "@/components/ui/checkboxhui";
import Checkbox from "../../../components/ui/checkbox";
import Checkbox from "@/components/ui/checkbox";
import { useState } from "react";

function CheckboxPage() {
Expand All @@ -13,22 +12,22 @@ function CheckboxPage() {

{/* hui */}
<div className="mt-10">
<CheckboxHUI label="Check me out" />
<Checkbox label="Check me out" />
</div>

<div className="mt-1">
<CheckboxHUI label="Uncheck me" checked />
<Checkbox label="Uncheck me" checked />
</div>

<div className="mt-1">
<CheckboxHUI label="Cannot check me" disabled />
<Checkbox label="Cannot check me" disabled />
</div>
<div className="mt-1">
<CheckboxHUI label="Cannot uncheck me" disabled checked />
<Checkbox label="Cannot uncheck me" disabled checked />
</div>

<div className="mt-1">
<CheckboxHUI
<Checkbox
label="Check and control me"
onChange={(value) => setChecked(value)}
checked={checked}
Expand All @@ -39,47 +38,11 @@ function CheckboxPage() {
{checked ? <span>checked</span> : <span>not checked</span>}
</div>

{/* aria */}
<div className="mt-10">
<Checkbox>Check me, I am unchecked</Checkbox>
</div>

<div>
<Checkbox defaultSelected>Uncheck me, I am checked</Checkbox>
</div>

<div>
<Checkbox isDisabled>Cannot check me</Checkbox>
</div>

<div>
<Checkbox isDisabled defaultSelected>
Cannot uncheck me
</Checkbox>
</div>

<div>
<Checkbox aria-label="A checkbox with no visible label"></Checkbox>
</div>

<div>
<Checkbox aria-labelledby="labelDiv"></Checkbox>
</div>

<div id="labelDiv">I am a detached label for the last checkbox</div>

<div className="mt-16">
<h3 className="text-lg">Notes</h3>
<div className="pl-4">
<ul className="mt-2 list-outside list-disc">
<li>
Click area should be at least 48x48px. Theoretically, and goes for
all other ui elements as well ... :)
</li>
<li>
The last checkbox has no label but is labeled by another div. One
before last has no label at all, but has aria-label set.
</li>
<li>Click area for checkbox is expanded with negative margins</li>
<li>
Indeterminate and error states are not defined (designed). They
will be added if/when needed.
Expand Down
106 changes: 52 additions & 54 deletions src/components/ui/checkbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,60 @@
import { useRef } from "react";
import {
AriaCheckboxProps,
mergeProps,
useCheckbox,
useFocusRing,
VisuallyHidden,
} from "react-aria";
import { useToggleState } from "@react-stately/toggle";
import { Switch } from "@headlessui/react";

function Checkbox(props: AriaCheckboxProps) {
const { isDisabled, children } = props;
const inputRef = useRef(null);
const state = useToggleState(props);
const { inputProps } = useCheckbox(props, state, inputRef);
const { isFocusVisible, focusProps } = useFocusRing();
type TCheckboxProps = {
disabled?: boolean;
label: string;
onChange?: (value: boolean) => void;
checked?: boolean;
hideLabel?: boolean;
};

function Checkbox({
disabled = false,
label,
onChange,
checked = false,
hideLabel = false,
}: TCheckboxProps) {
return (
<label
className={`group -my-0.5 -ml-1.5 flex items-center ${
!isDisabled && "cursor-pointer"
}`}
>
<VisuallyHidden>
<input {...mergeProps(inputProps, focusProps)} ref={inputRef} />
</VisuallyHidden>

<div
aria-hidden="true"
className={`my-1.5 mx-1.5 flex-initial rounded ${
isFocusVisible && "ring ring-blue-100"
}`}
<div className="flex h-6 items-center">
<Switch
defaultChecked={!onChange ? checked : undefined}
checked={onChange ? checked : undefined}
onChange={onChange}
className="group -my-0.5 -ml-1.5 flex items-center outline-none"
disabled={disabled}
>
{!state.isSelected && (
<div
className={` h-4 w-4 rounded border border-neutral-400
${!isDisabled && "group-active:border-neutral-500"}
${isDisabled && "border-neutral-300 bg-neutral-100"}`}
></div>
)}

{state.isSelected && (
<div
className={`h-4 w-4 rounded bg-blue-500
${!isDisabled && "group-active:bg-blue-600"}
${isDisabled && "bg-neutral-300"}`}
>
<svg width="16" height="16" viewBox="0 0 16 16">
<path
d="M6.36668 12.1333L2.43335 8.19998L3.51668 7.11664L6.36668 9.96664L12.4834 3.84998L13.5667 4.93331L6.36668 12.1333Z"
fill="white"
/>
</svg>
</div>
{({ checked }) => (
<>
<div
className={`mx-1.5 my-1.5 h-4 w-4 rounded ring-blue-100 group-focus-visible:ring
${
checked
? `${
!disabled
? "bg-blue-500 group-active:bg-blue-600"
: "bg-neutral-300"
}`
: `border ${
!disabled
? "border-neutral-400 bg-white group-active:border-neutral-600"
: "border-neutral-300 bg-neutral-100"
}`
}
`}
>
<svg width="16" height="16" viewBox="0 0 16 16">
<path
d="M6.36668 12.1333L2.43335 8.19998L3.51668 7.11664L6.36668 9.96664L12.4834 3.84998L13.5667 4.93331L6.36668 12.1333Z"
fill="white"
/>
</svg>
</div>
<span className={`${hideLabel ? "sr-only" : ""}`}>{label}</span>
</>
)}
</div>

<span>{children}</span>
</label>
</Switch>
</div>
);
}

Expand Down
61 changes: 0 additions & 61 deletions src/components/ui/checkboxhui.tsx
View file

This file was deleted.

0 comments on commit dd7921d

Please sign in to comment.