add "reset to default" color option for ColorPicker (#8643)

* add reset to default color option

* Do not show reset button in DOM if resetDefaultValue is undefined

* handle edge case: if invalid hexcode is set for resetDefaultValue

* Do not show the reset button if the color is already set to the default value

* Remove data-testid from Button

---------

Co-authored-by: Praneeth Bhogaraju <praneeth.bhogaraju@ni.com>
Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
pull/8699/head^2
Praneeth Bhogaraju 2023-05-05 17:55:18 +05:30 committed by GitHub
parent 76807a7e70
commit 371e7b024a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 0 deletions

View File

@ -146,6 +146,7 @@ const AppearanceView = () => {
<p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
<ColorPicker
defaultValue={user.brandColor}
resetDefaultValue="#292929"
onChange={(value) => {
if (!checkWCAGContrastColor("#ffffff", value)) {
setLightModeError(true);
@ -167,6 +168,7 @@ const AppearanceView = () => {
<p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
<ColorPicker
defaultValue={user.darkBrandColor}
resetDefaultValue="#fafafa"
onChange={(value) => {
if (!checkWCAGContrastColor("#101010", value)) {
setDarkModeError(true);

View File

@ -151,6 +151,7 @@ const ProfileView = () => {
<p className="text-emphasis mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
<ColorPicker
defaultValue={team.brandColor}
resetDefaultValue="#292929"
onChange={(value) => form.setValue("brandColor", value, { shouldDirty: true })}
/>
</div>
@ -165,6 +166,7 @@ const ProfileView = () => {
<p className="text-emphasis mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
<ColorPicker
defaultValue={team.darkBrandColor}
resetDefaultValue="#fafafa"
onChange={(value) => form.setValue("darkBrandColor", value, { shouldDirty: true })}
/>
</div>

View File

@ -4,6 +4,8 @@ import { HexColorInput, HexColorPicker } from "react-colorful";
import cx from "@calcom/lib/classNames";
import { fallBackHex, isValidHexCode } from "@calcom/lib/getBrandColours";
import { Button } from "@calcom/ui";
import { RotateCcw } from "@calcom/ui/components/icon";
export type ColorPickerProps = {
defaultValue: string;
@ -11,12 +13,18 @@ export type ColorPickerProps = {
container?: HTMLElement;
popoverAlign?: React.ComponentProps<typeof Popover.Content>["align"];
className?: string;
resetDefaultValue?: string;
};
const ColorPicker = (props: ColorPickerProps) => {
const init = !isValidHexCode(props.defaultValue)
? fallBackHex(props.defaultValue, false)
: props.defaultValue;
const resetDefaultValue =
props.resetDefaultValue &&
(!isValidHexCode(props.resetDefaultValue)
? fallBackHex(props.resetDefaultValue, false)
: props.resetDefaultValue);
const [color, setColor] = useState(init);
return (
@ -57,6 +65,22 @@ const ColorPicker = (props: ColorPickerProps) => {
}}
type="text"
/>
{resetDefaultValue && color != resetDefaultValue && (
<div className="px-1">
<Button
color={resetDefaultValue == "#292929" ? "primary" : "secondary"}
target="_blank"
variant="icon"
rel="noreferrer"
StartIcon={RotateCcw}
tooltip="Reset to default"
onClick={() => {
setColor(fallBackHex(resetDefaultValue, false));
props.onChange(resetDefaultValue);
}}
/>
</div>
)}
</div>
);
};