Skip to content

Commit

Permalink
feat: allow to change selected color on toggle chip group (#1057)
Browse files Browse the repository at this point in the history
Co-authored-by: JonnCh <[email protected]>
  • Loading branch information
JonnCharpentier and JonnCh authored Aug 5, 2024
1 parent 76270e6 commit 0a9922c
Showing 1 changed file with 10 additions and 5 deletions.
15 changes: 10 additions & 5 deletions src/inputs/ToggleChipGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import { useCheckboxGroup, useCheckboxGroupItem, useFocusRing, VisuallyHidden }
import { CheckboxGroupState, useCheckboxGroupState } from "react-stately";
import { maybeTooltip, resolveTooltip } from "src/components";
import { Label } from "src/components/Label";
import { Css } from "src/Css";
import { Css, Palette, Xss } from "src/Css";
import { useTestIds } from "src/utils/useTestIds";
import { PresentationFieldProps, usePresentationContext } from "src/components/PresentationContext";

type ToggleChipXss = Xss<"color" | "backgroundColor">;

type ToggleChipItemProps = {
label: string;
value: string;
Expand All @@ -23,12 +25,13 @@ export interface ToggleChipGroupProps extends Pick<PresentationFieldProps, "labe
options: ToggleChipItemProps[];
values: string[];
onChange: (values: string[]) => void;
xss?: ToggleChipXss;
}

export function ToggleChipGroup(props: ToggleChipGroupProps) {
const { fieldProps } = usePresentationContext();
const { labelLeftFieldWidth = "50%" } = fieldProps ?? {};
const { values, label, labelStyle = fieldProps?.labelStyle ?? "above", options } = props;
const { values, label, labelStyle = fieldProps?.labelStyle ?? "above", options, xss } = props;
const state = useCheckboxGroupState({ ...props, value: values });
const { groupProps, labelProps } = useCheckboxGroup(props, state);
const tid = useTestIds(props, "toggleChip");
Expand All @@ -52,6 +55,7 @@ export function ToggleChipGroup(props: ToggleChipGroupProps) {
selected={state.value.includes(o.value)}
label={o.label}
disabled={o.disabled}
xss={xss}
{...tid[o.value]}
/>
))}
Expand All @@ -71,10 +75,11 @@ interface ToggleChipProps {
* If a ReactNode, it's treated as a "disabled reason" that's shown in a tooltip.
*/
disabled?: boolean | ReactNode;
xss?: ToggleChipXss;
}

function ToggleChip(props: ToggleChipProps) {
const { label, value, groupState, selected: isSelected, disabled = false, ...others } = props;
const { label, value, groupState, selected: isSelected, disabled = false, xss, ...others } = props;
const isDisabled = !!disabled;
const ref = useRef(null);
const { inputProps } = useCheckboxGroupItem({ value, "aria-label": label, isDisabled }, groupState, ref);
Expand All @@ -90,8 +95,8 @@ function ToggleChip(props: ToggleChipProps) {
...Css.relative.dib.br16.sm.px1.cursorPointer.pyPx(4).bgGray200.if(isDisabled).cursorNotAllowed.gray600.pr1.$,
...(isSelected
? {
...Css.white.bgBlue700.$,
":hover:not([data-disabled='true'])": Css.bgBlue800.$,
...Css.color(xss?.color ?? Palette.White).bgColor(xss?.backgroundColor ?? Palette.Blue700).$,
":hover:not([data-disabled='true'])": Css.bgColor(xss?.backgroundColor ?? Palette.Blue800).$,
}
: { ":hover:not([data-disabled='true'])": Css.bgGray300.$ }),
...(isFocusVisible ? Css.bshFocus.$ : {}),
Expand Down

0 comments on commit 0a9922c

Please sign in to comment.