Show the whole Rule on one review card, with quiet flags for missing cards and Continue once each question has one.
This commit is contained in:
1 parent
cc878e3c19
commit
6e2e1915ae
30 files changed
+571
-218
No files matched your search
@@ -21,6 +21,7 @@ const ChipContainer = memo<ChipProps>(
|
||||
onRemove,
|
||||
onCheck,
|
||||
onClose,
|
||||
hasWarning = false,
|
||||
ariaLabel,
|
||||
}) => {
|
||||
const t = useTranslation("controlsChrome");
|
||||
@@ -89,11 +90,19 @@ const ChipContainer = memo<ChipProps>(
|
||||
onRemove={onRemove}
|
||||
onCheck={handleCheck}
|
||||
onClose={handleClose}
|
||||
hasWarning={hasWarning}
|
||||
inputValue={isCustom ? inputValue : undefined}
|
||||
onInputChange={isCustom ? setInputValue : undefined}
|
||||
onInputKeyDown={isCustom ? handleKeyDown : undefined}
|
||||
inputRef={isCustom ? inputRef : undefined}
|
||||
ariaLabel={ariaLabel ?? (isCustom ? undefined : label)}
|
||||
ariaLabel={
|
||||
ariaLabel ??
|
||||
(isCustom
|
||||
? undefined
|
||||
: hasWarning
|
||||
? t("chipMissingWords").replace("{label}", label)
|
||||
: label)
|
||||
}
|
||||
confirmAriaLabel={t("chipConfirm")}
|
||||
typeToAddPlaceholder={t("chipTypeToAdd")}
|
||||
closeAriaLabel={t("chipClose")}
|
||||
|
||||
@@ -48,6 +48,11 @@ export interface ChipProps {
|
||||
* Optional callback when custom chip is closed/removed.
|
||||
*/
|
||||
onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
/**
|
||||
* Figma Has Warning: show a warning icon in place of the selected check.
|
||||
* Used on final review when a card or value is missing its words.
|
||||
*/
|
||||
hasWarning?: boolean;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
@@ -62,6 +67,7 @@ export interface ChipViewProps {
|
||||
onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
onCheck?: (value: string, event: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
hasWarning?: boolean;
|
||||
inputValue?: string;
|
||||
onInputChange?: (value: string) => void;
|
||||
onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { memo, type CSSProperties } from "react";
|
||||
import Icon from "../../asset/icon/Icon";
|
||||
import type { ChipViewProps } from "./Chip.types";
|
||||
|
||||
function chipSurfaceStyle(
|
||||
@@ -87,6 +88,7 @@ function ChipView({
|
||||
onRemove,
|
||||
onCheck,
|
||||
onClose,
|
||||
hasWarning = false,
|
||||
inputValue,
|
||||
onInputChange,
|
||||
onInputKeyDown,
|
||||
@@ -280,7 +282,13 @@ function ChipView({
|
||||
onClick={handleClick}
|
||||
{...sharedA11y}
|
||||
>
|
||||
{isSelected ? (
|
||||
{hasWarning ? (
|
||||
<Icon
|
||||
name="warning"
|
||||
size={isSmall ? 12 : 16}
|
||||
className="shrink-0 text-current"
|
||||
/>
|
||||
) : isSelected ? (
|
||||
<svg
|
||||
aria-hidden
|
||||
viewBox="0 0 12 12"
|
||||
|
||||
Reference in new issue
Block a user