From 8a06f50b159686d4b413ee8fada64993466a9ea3 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 16 Apr 2024 16:41:31 -0400 Subject: [PATCH 1/5] usage of hopper icon in metric score --- .changeset/khaki-glasses-crash.md | 5 ++ packages/Metric/src/Metric.tsx | 4 +- packages/Metric/src/Score.tsx | 78 ++++++++++++++++++++++++------- 3 files changed, 70 insertions(+), 17 deletions(-) create mode 100644 .changeset/khaki-glasses-crash.md diff --git a/.changeset/khaki-glasses-crash.md b/.changeset/khaki-glasses-crash.md new file mode 100644 index 00000000..23bbd363 --- /dev/null +++ b/.changeset/khaki-glasses-crash.md @@ -0,0 +1,5 @@ +--- +"@igloo-ui/metric": patch +--- + +Fixed Metric Score Icon size diff --git a/packages/Metric/src/Metric.tsx b/packages/Metric/src/Metric.tsx index 3e6b9c94..b1399c02 100644 --- a/packages/Metric/src/Metric.tsx +++ b/packages/Metric/src/Metric.tsx @@ -54,6 +54,8 @@ const Metric: React.FunctionComponent = ({ return document.documentElement.getAttribute("data-brand") ?? "igloo"; }; + const isWorkleap = getBrand() === "workleap"; + const { buttonProps } = useButton(rest, btnRef); const classes = cx("ids-metric", className, { @@ -106,7 +108,7 @@ const Metric: React.FunctionComponent = ({ > {tooltip && appearance !== "selected" && ( - {getBrand() === "workleap" ? ( + {isWorkleap ? ( ) : } )} diff --git a/packages/Metric/src/Score.tsx b/packages/Metric/src/Score.tsx index 11ed0e08..77f22131 100644 --- a/packages/Metric/src/Score.tsx +++ b/packages/Metric/src/Score.tsx @@ -3,6 +3,8 @@ import cx from "classnames"; import ArrowUp from "@igloo-ui/icons/dist/ArrowUp"; import ArrowDown from "@igloo-ui/icons/dist/ArrowDown"; +import { ArrowUpIcon, ArrowDownIcon } from "@hopper-ui/icons-react16"; + import { useLocalizedStringFormatter, useLocale } from "@igloo-ui/provider"; import intlMessages from "./intl"; @@ -36,6 +38,30 @@ const Score: React.FunctionComponent = ({ }: ScoreProps) => { const stringFormatter = useLocalizedStringFormatter(intlMessages); const { locale } = useLocale(); + + const getBrand = (): string => { + return document.documentElement.getAttribute("data-brand") ?? "igloo"; + }; + + const isWorkleap = getBrand() === "workleap"; + + const sizeAdapter = (size: "small" | "medium" | "large"): "sm" | "md" | "lg" => { + if (isWorkleap) { + switch (size) { + case "small": + return "sm"; + case "medium": + return "md"; + case "large": + return "lg"; + default: + return "sm"; + } + } else { + return size; + } + }; + if (!isVariation && (value === undefined || value === null)) { return = ({ if (forceDecimal) { displayValue = metricValue.toFixed(1); } + const arrow = isNegative ? ( - + isWorkleap ? ( + + ) : ( + + ) ) : ( - + isWorkleap ? ( + + ) : ( + + ) ); - let postFix = absoluteValue === 1 ? - ` ${stringFormatter.format("pt")}` : + + let postFix = absoluteValue === 1 ? + ` ${stringFormatter.format("pt")}` : ` ${stringFormatter.format("pts")}`; if (locale === "fr-CA") { - postFix = absoluteValue === 1 || absoluteValue === 0 ? - ` ${stringFormatter.format("pt")}` : + postFix = absoluteValue === 1 || absoluteValue === 0 ? + ` ${stringFormatter.format("pt")}` : ` ${stringFormatter.format("pts")}`; } From 301cac531f0ed13397b8fbf0b3e5e66af6674acb Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 17 Apr 2024 09:22:08 -0400 Subject: [PATCH 2/5] reworked score code --- packages/Metric/src/Score.tsx | 69 ++++++++++++----------------------- 1 file changed, 23 insertions(+), 46 deletions(-) diff --git a/packages/Metric/src/Score.tsx b/packages/Metric/src/Score.tsx index 77f22131..e8c7d6b3 100644 --- a/packages/Metric/src/Score.tsx +++ b/packages/Metric/src/Score.tsx @@ -3,7 +3,7 @@ import cx from "classnames"; import ArrowUp from "@igloo-ui/icons/dist/ArrowUp"; import ArrowDown from "@igloo-ui/icons/dist/ArrowDown"; -import { ArrowUpIcon, ArrowDownIcon } from "@hopper-ui/icons-react16"; +import { ArrowUpIcon, ArrowDownIcon, type IconProps } from "@hopper-ui/icons-react16"; import { useLocalizedStringFormatter, useLocale } from "@igloo-ui/provider"; import intlMessages from "./intl"; @@ -45,23 +45,28 @@ const Score: React.FunctionComponent = ({ const isWorkleap = getBrand() === "workleap"; - const sizeAdapter = (size: "small" | "medium" | "large"): "sm" | "md" | "lg" => { - if (isWorkleap) { - switch (size) { - case "small": - return "sm"; - case "medium": - return "md"; - case "large": - return "lg"; - default: - return "sm"; - } - } else { - return size; - } + const sizeMap = { + small: "sm", + medium: "md", + large: "lg" }; + const arrowPositiveClass = cx("ids-score__arrow", "ids-score__arrow--positive", { + "ids-score__arrow--selected": isSelected + }); + + const arrowNegativeClass = cx("ids-score__arrow", "ids-score__arrow--negative", { + "ids-score__arrow--selected": isSelected + }); + + const ArrowUpIconElement = isWorkleap ? + : + ; + + const ArrowDownIconElement = isWorkleap ? + : + ; + if (!isVariation && (value === undefined || value === null)) { return = ({ } const arrow = isNegative ? ( - isWorkleap ? ( - - ) : ( - - ) + ArrowDownIconElement ) : ( - isWorkleap ? ( - - ) : ( - - ) + ArrowUpIconElement ); let postFix = absoluteValue === 1 ? From 96263ecf4d9145535a60471e7364f2b7384ef882 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 17 Apr 2024 10:57:16 -0400 Subject: [PATCH 3/5] pr fixes --- packages/Metric/src/Metric.tsx | 5 +++-- packages/Metric/src/Score.tsx | 16 ++++++++-------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/Metric/src/Metric.tsx b/packages/Metric/src/Metric.tsx index b1399c02..1e981c36 100644 --- a/packages/Metric/src/Metric.tsx +++ b/packages/Metric/src/Metric.tsx @@ -3,10 +3,11 @@ import cx from "classnames"; import { useButton, type AriaButtonProps, FocusRing } from "react-aria"; import HelpSolid from "@igloo-ui/icons/dist/HelpSolid"; -import Help from "@igloo-ui/icons/dist/Help"; import Alignment from "@igloo-ui/icons/dist/Alignment"; import Checkmark from "@igloo-ui/icons/dist/Checkmark"; +import { QuestionIcon } from "@hopper-ui/icons-react16"; + import Tooltip from "@igloo-ui/tooltip"; import Score from "./Score"; @@ -109,7 +110,7 @@ const Metric: React.FunctionComponent = ({ {tooltip && appearance !== "selected" && ( {isWorkleap ? ( - ) : } + ) : } )} {type !== "subMetric" && appearance === "selected" && ( diff --git a/packages/Metric/src/Score.tsx b/packages/Metric/src/Score.tsx index e8c7d6b3..fd5a39ce 100644 --- a/packages/Metric/src/Score.tsx +++ b/packages/Metric/src/Score.tsx @@ -27,6 +27,12 @@ export interface ScoreProps extends React.ComponentProps<"div"> { value?: number | null; } +const sizeMap = { + small: "sm", + medium: "md", + large: "lg" +} as const; + const Score: React.FunctionComponent = ({ arrowSize = "small", className, @@ -45,12 +51,6 @@ const Score: React.FunctionComponent = ({ const isWorkleap = getBrand() === "workleap"; - const sizeMap = { - small: "sm", - medium: "md", - large: "lg" - }; - const arrowPositiveClass = cx("ids-score__arrow", "ids-score__arrow--positive", { "ids-score__arrow--selected": isSelected }); @@ -60,11 +60,11 @@ const Score: React.FunctionComponent = ({ }); const ArrowUpIconElement = isWorkleap ? - : + : ; const ArrowDownIconElement = isWorkleap ? - : + : ; if (!isVariation && (value === undefined || value === null)) { From ac6834bb2cd42b3a6bfec948ccd2257006124da1 Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 17 Apr 2024 11:03:39 -0400 Subject: [PATCH 4/5] removed unused import --- packages/Metric/src/Score.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/Metric/src/Score.tsx b/packages/Metric/src/Score.tsx index fd5a39ce..0f986891 100644 --- a/packages/Metric/src/Score.tsx +++ b/packages/Metric/src/Score.tsx @@ -3,7 +3,7 @@ import cx from "classnames"; import ArrowUp from "@igloo-ui/icons/dist/ArrowUp"; import ArrowDown from "@igloo-ui/icons/dist/ArrowDown"; -import { ArrowUpIcon, ArrowDownIcon, type IconProps } from "@hopper-ui/icons-react16"; +import { ArrowUpIcon, ArrowDownIcon } from "@hopper-ui/icons-react16"; import { useLocalizedStringFormatter, useLocale } from "@igloo-ui/provider"; import intlMessages from "./intl"; From 950a82f2563c3b2470695fd71ccfb752440afd7c Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Wed, 17 Apr 2024 11:07:40 -0400 Subject: [PATCH 5/5] moved getBrand outside of component --- packages/Metric/src/Score.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/Metric/src/Score.tsx b/packages/Metric/src/Score.tsx index 0f986891..0455ab20 100644 --- a/packages/Metric/src/Score.tsx +++ b/packages/Metric/src/Score.tsx @@ -33,6 +33,10 @@ const sizeMap = { large: "lg" } as const; +const getBrand = (): string => { + return document.documentElement.getAttribute("data-brand") ?? "igloo"; +}; + const Score: React.FunctionComponent = ({ arrowSize = "small", className, @@ -45,10 +49,6 @@ const Score: React.FunctionComponent = ({ const stringFormatter = useLocalizedStringFormatter(intlMessages); const { locale } = useLocale(); - const getBrand = (): string => { - return document.documentElement.getAttribute("data-brand") ?? "igloo"; - }; - const isWorkleap = getBrand() === "workleap"; const arrowPositiveClass = cx("ids-score__arrow", "ids-score__arrow--positive", {