From d477b55947d6235e516a72c093f3b22ce5876079 Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Wed, 6 Nov 2024 10:26:21 +0200
Subject: [PATCH] Convert Embedding icon hook to CSS and use semantic colors
(#49478)
---
.../EmbeddingOption.module.css | 11 +++++++
.../EmbeddingSdkOptionCard/SdkIcon.tsx | 24 +++++++++------
.../InteractiveEmbeddingIcon.tsx | 26 ++++++++++-------
.../StaticEmbeddingIcon.tsx | 29 ++++++++++---------
.../widgets/EmbeddingOption/types.ts | 4 +++
.../use-embedding-settings-icon-colors.tsx | 20 -------------
.../src/metabase/css/core/colors.module.css | 3 ++
7 files changed, 65 insertions(+), 52 deletions(-)
create mode 100644 frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css
delete mode 100644 frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/use-embedding-settings-icon-colors.tsx
diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css
new file mode 100644
index 00000000000..3c2967d48de
--- /dev/null
+++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingOption.module.css
@@ -0,0 +1,11 @@
+.EmbeddingOptionIcon {
+ --mb-color-embedding-option-primary: var(--mb-color-icon-primary);
+ --mb-color-embedding-option-secondary: var(--mb-color-icon-secondary);
+}
+
+.EmbeddingOptionIcon.Disabled {
+ --mb-color-embedding-option-primary: var(--mb-color-icon-primary-disabled);
+ --mb-color-embedding-option-secondary: var(
+ --mb-color-icon-secondary-disabled
+ );
+}
diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx
index 5996630f86b..47ade5950b3 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/EmbeddingSdkOptionCard/SdkIcon.tsx
@@ -1,13 +1,19 @@
-import {
- type UseEmbeddingSettingsIconColorsProps,
- useEmbeddingSettingsIconColors,
-} from "../use-embedding-settings-icon-colors";
+import cx from "classnames";
-export const SdkIcon = ({ disabled }: UseEmbeddingSettingsIconColorsProps) => {
- const { primary, secondary } = useEmbeddingSettingsIconColors({ disabled });
+import EmbeddingOptionS from "../EmbeddingOption.module.css";
+import type { EmbeddingOptionIconProps } from "../types";
+export const SdkIcon = ({ disabled }: EmbeddingOptionIconProps) => {
return (
- <svg width="40" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="40"
+ height="32"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ className={cx(EmbeddingOptionS.EmbeddingOptionIcon, {
+ [EmbeddingOptionS.Disabled]: disabled,
+ })}
+ >
<g clipPath="url(#a)">
<rect
x="1.25"
@@ -15,12 +21,12 @@ export const SdkIcon = ({ disabled }: UseEmbeddingSettingsIconColorsProps) => {
width="37.5"
height="29.5"
rx="2.75"
- stroke={secondary}
+ stroke="var(--mb-color-embedding-option-secondary)"
strokeWidth="2.5"
/>
<path
d="M20 14.11c1.03 0 1.87.84 1.87 1.89 0 1-.84 1.85-1.87 1.85-1.03 0-1.87-.85-1.87-1.85 0-1.05.84-1.89 1.87-1.89ZM15.37 24c.63.38 2.01-.2 3.6-1.7-.52-.59-1.03-1.23-1.51-1.9a22.965 22.965 0 0 1-2.4-.36c-.51 2.14-.32 3.61.31 3.96Zm.71-5.74-.29-.51c-.11.29-.22.58-.29.86.27.06.57.11.88.16l-.3-.51Zm6.54-.76.81-1.5-.81-1.5c-.3-.53-.62-1-.91-1.47C21.17 13 20.6 13 20 13c-.6 0-1.17 0-1.71.03-.29.47-.61.94-.91 1.47l-.81 1.5.81 1.5c.3.53.62 1 .91 1.47.54.03 1.11.03 1.71.03.6 0 1.17 0 1.71-.03.29-.47.61-.94.91-1.47ZM20 10.78c-.19.22-.39.45-.59.72h1.18c-.2-.27-.4-.5-.59-.72Zm0 10.44c.19-.22.39-.45.59-.72h-1.18c.2.27.4.5.59.72ZM24.62 8c-.62-.38-2 .2-3.59 1.7.52.59 1.03 1.23 1.51 1.9.82.08 1.63.2 2.4.36.51-2.14.32-3.61-.32-3.96Zm-.7 5.74.29.51c.11-.29.22-.58.29-.86-.27-.06-.57-.11-.88-.16l.3.51Zm1.45-7.05c1.47.84 1.63 3.05 1.01 5.63 2.54.75 4.37 1.99 4.37 3.68 0 1.69-1.83 2.93-4.37 3.68.62 2.58.46 4.79-1.01 5.63-1.46.84-3.45-.12-5.37-1.95-1.92 1.83-3.91 2.79-5.38 1.95-1.46-.84-1.62-3.05-1-5.63-2.54-.75-4.37-1.99-4.37-3.68 0-1.69 1.83-2.93 4.37-3.68-.62-2.58-.46-4.79 1-5.63 1.47-.84 3.46.12 5.38 1.95 1.92-1.83 3.91-2.79 5.37-1.95ZM25.08 16c.34.75.64 1.5.89 2.26 2.1-.63 3.28-1.53 3.28-2.26 0-.73-1.18-1.63-3.28-2.26-.25.76-.55 1.51-.89 2.26Zm-10.16 0c-.34-.75-.64-1.5-.89-2.26-2.1.63-3.28 1.53-3.28 2.26 0 .73 1.18 1.63 3.28 2.26.25-.76.55-1.51.89-2.26Zm9 2.26-.3.51c.31-.05.61-.1.88-.16-.07-.28-.18-.57-.29-.86l-.29.51Zm-2.89 4.04c1.59 1.5 2.97 2.08 3.59 1.7.64-.35.83-1.82.32-3.96-.77.16-1.58.28-2.4.36-.48.67-.99 1.31-1.51 1.9Zm-4.95-8.56.3-.51c-.31.05-.61.1-.88.16.07.28.18.57.29.86l.29-.51Zm2.89-4.04C17.38 8.2 16 7.62 15.37 8c-.63.35-.82 1.82-.31 3.96a23.018 23.018 0 0 1 2.4-.36c.48-.67.99-1.31 1.51-1.9Z"
- fill={primary}
+ fill="var(--mb-color-embedding-option-primary)"
/>
</g>
</svg>
diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx
index e323cead543..1ee8bde38d8 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/InteractiveEmbeddingOptionCard/InteractiveEmbeddingIcon.tsx
@@ -1,15 +1,21 @@
-import {
- type UseEmbeddingSettingsIconColorsProps,
- useEmbeddingSettingsIconColors,
-} from "../use-embedding-settings-icon-colors";
+import cx from "classnames";
+
+import EmbeddingOptionS from "../EmbeddingOption.module.css";
+import type { EmbeddingOptionIconProps } from "../types";
export const InteractiveEmbeddingIcon = ({
disabled,
-}: UseEmbeddingSettingsIconColorsProps) => {
- const { primary, secondary } = useEmbeddingSettingsIconColors({ disabled });
-
+}: EmbeddingOptionIconProps) => {
return (
- <svg width="40" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="40"
+ height="32"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ className={cx(EmbeddingOptionS.EmbeddingOptionIcon, {
+ [EmbeddingOptionS.Disabled]: disabled,
+ })}
+ >
<g clipPath="url(#clip0_1030_4461)">
<rect
x="1.25"
@@ -17,14 +23,14 @@ export const InteractiveEmbeddingIcon = ({
width="37.5"
height="29.5"
rx="2.75"
- stroke={secondary}
+ stroke="var(--mb-color-embedding-option-secondary)"
strokeWidth="2.5"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.527 17.473 13 16l5.527-1.473L20 9l1.473 5.527L27 16l-5.527 1.473L20 23l-1.473-5.527ZM29.369 8.631 27 8l2.369-.631L30 5l.631 2.369L33 8l-2.369.631L30 11l-.631-2.369ZM29.974 24.026 28 23.5l1.974-.526L30.5 21l.526 1.974L33 23.5l-1.974.526L30.5 26l-.526-1.974ZM8.974 11.026 7 10.5l1.974-.526L9.5 8l.526 1.974L12 10.5l-1.974.526L9.5 13l-.526-1.974Z"
- fill={primary}
+ fill="var(--mb-color-embedding-option-primary)"
/>
</g>
<defs>
diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx
index dd46cb55292..01fae49e9e1 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx
+++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/StaticEmbeddingOptionCard/StaticEmbeddingIcon.tsx
@@ -1,31 +1,34 @@
-import {
- type UseEmbeddingSettingsIconColorsProps,
- useEmbeddingSettingsIconColors,
-} from "../use-embedding-settings-icon-colors";
-
-export const StaticEmbeddingIcon = ({
- disabled,
-}: UseEmbeddingSettingsIconColorsProps) => {
- const { primary, secondary } = useEmbeddingSettingsIconColors({ disabled });
+import cx from "classnames";
+import EmbeddingOptionS from "../EmbeddingOption.module.css";
+import type { EmbeddingOptionIconProps } from "../types";
+export const StaticEmbeddingIcon = ({ disabled }: EmbeddingOptionIconProps) => {
return (
- <svg width="42" height="34" fill="white" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="42"
+ height="34"
+ fill="white"
+ xmlns="http://www.w3.org/2000/svg"
+ className={cx(EmbeddingOptionS.EmbeddingOptionIcon, {
+ [EmbeddingOptionS.Disabled]: disabled,
+ })}
+ >
<rect
x="1.25"
y="1.25"
width="37.5"
height="29.5"
rx="2.75"
- stroke={secondary}
+ stroke="var(--mb-color-embedding-option-secondary)"
strokeWidth="2.5"
/>
<path
d="M14 12a2 2 0 0 1 2-2h17a2 2 0 0 1 2 2v5H14v-5ZM14 19h9v9h-7a2 2 0 0 1-2-2v-7ZM25 19h10v7a2 2 0 0 1-2 2h-8v-9Z"
- fill={primary}
+ fill="var(--mb-color-embedding-option-primary)"
/>
<path
d="M5 10h6v18H7a2 2 0 0 1-2-2V10ZM5 6a2 2 0 0 1 2-2h26a2 2 0 0 1 2 2v2H5V6Z"
- fill={secondary}
+ fill="var(--mb-color-embedding-option-secondary)"
/>
</svg>
);
diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts
index ceab04543ff..339bdf48fa7 100644
--- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts
+++ b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/types.ts
@@ -1,3 +1,7 @@
export type EmbeddingOptionCardProps = {
onToggle: (value: boolean) => void;
};
+
+export type EmbeddingOptionIconProps = {
+ disabled?: boolean;
+};
diff --git a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/use-embedding-settings-icon-colors.tsx b/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/use-embedding-settings-icon-colors.tsx
deleted file mode 100644
index e685bc3dace..00000000000
--- a/frontend/src/metabase/admin/settings/components/widgets/EmbeddingOption/use-embedding-settings-icon-colors.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export type UseEmbeddingSettingsIconColorsProps = {
- disabled: boolean;
-};
-
-/* eslint-disable no-restricted-syntax -- we should find a way to use semantic colors here */
-export const useEmbeddingSettingsIconColors = ({
- disabled,
-}: UseEmbeddingSettingsIconColorsProps) => {
- if (disabled) {
- return {
- primary: "var(--mb-base-color-gray-30)",
- secondary: "var(--mb-base-color-gray-10)",
- };
- }
-
- return {
- primary: "var(--mb-base-color-brand-40)",
- secondary: "var(--mb-base-color-brand-20)",
- };
-};
diff --git a/frontend/src/metabase/css/core/colors.module.css b/frontend/src/metabase/css/core/colors.module.css
index 14c9f6b2b4d..9b7b6872417 100644
--- a/frontend/src/metabase/css/core/colors.module.css
+++ b/frontend/src/metabase/css/core/colors.module.css
@@ -89,6 +89,9 @@
--mb-color-background-inverse: var(--mb-color-bg-black);
--mb-color-background-brand: var(--mb-base-color-brand-40);
--mb-color-icon-primary: var(--mb-base-color-brand-40);
+ --mb-color-icon-primary-disabled: var(--mb-base-color-gray-30);
+ --mb-color-icon-secondary: var(--mb-base-color-brand-20);
+ --mb-color-icon-secondary-disabled: var(--mb-base-color-gray-10);
/**
* Base colors
--
GitLab