Merge branch 'develop' into fix-vercel-storybook-esbuild-issue

coronasafe · Jul 22, 2023 · 442d9e4 · 442d9e4
2 parents 3980d26 + d19b608
commit 442d9e4
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 21 deletions.
diff --git a/src/CAREUI/icons/CareIcon.tsx b/src/CAREUI/icons/CareIcon.tsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 
 export interface CareIconProps {
   className?: string | undefined;
-  onClick?: () => void;
+  onClick?: React.MouseEventHandler<HTMLSpanElement> | undefined;
 }
 
 /**

diff --git a/src/Components/Common/BloodPressureFormField.tsx b/src/Components/Common/BloodPressureFormField.tsx
@@ -52,9 +52,21 @@ export default function BloodPressureFormField(props: Props) {
           labelClassName="hidden"
           errorClassName="hidden"
           thresholds={[
-            { value: 0, label: "Low", className: "text-danger-500" },
-            { value: 100, label: "Normal", className: "text-primary-500" },
-            { value: 140, label: "High", className: "text-warning-500" },
+            {
+              value: 0,
+              label: "Low",
+              className: "hidden md:block text-danger-500",
+            },
+            {
+              value: 100,
+              label: "Normal",
+              className: "hidden md:block text-primary-500",
+            },
+            {
+              value: 140,
+              label: "High",
+              className: "hidden md:block text-warning-500",
+            },
           ]}
         />
         <span className="text-lg font-medium text-gray-400 px-2">/</span>
@@ -69,9 +81,21 @@ export default function BloodPressureFormField(props: Props) {
           labelClassName="hidden"
           errorClassName="hidden"
           thresholds={[
-            { value: 0, label: "Low", className: "text-danger-500" },
-            { value: 50, label: "Normal", className: "text-primary-500" },
-            { value: 90, label: "High", className: "text-warning-500" },
+            {
+              value: 0,
+              label: "Low",
+              className: "hidden md:block text-danger-500",
+            },
+            {
+              value: 50,
+              label: "Normal",
+              className: "hidden md:block text-primary-500",
+            },
+            {
+              value: 90,
+              label: "High",
+              className: "hidden md:block text-warning-500",
+            },
           ]}
         />
       </div>

diff --git a/src/Components/Form/FormFields/Autocomplete.tsx b/src/Components/Form/FormFields/Autocomplete.tsx
@@ -6,6 +6,7 @@ import { dropdownOptionClassNames } from "../MultiSelectMenuV2";
 import { FormFieldBaseProps, useFormFieldPropsResolver } from "./Utils";
 import FormField from "./FormField";
 import { classNames } from "../../../Utils/utils";
+import { useTranslation } from "react-i18next";
 
 type OptionCallback<T, R> = (option: T) => R;
 
@@ -89,6 +90,7 @@ type AutocompleteProps<T, V = T> = {
  * customizability.
  */
 export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
+  const { t } = useTranslation();
   const [query, setQuery] = useState(""); // Ensure lower case
   useEffect(() => {
     props.onQuery?.(query);
@@ -160,25 +162,28 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
             <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
               <div className="absolute right-0 top-1 mr-2 flex h-full items-center gap-1 pb-2 text-lg text-gray-900">
                 <span>{value?.icon}</span>
+
+                {value && !props.isLoading && !props.required && (
+                  <div className="tooltip">
+                    <CareIcon
+                      className="care-l-times-circle h-4 w-4 text-gray-800 hover:text-gray-500 transition-colors duration-200 ease-in-out"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        props.onChange(undefined);
+                      }}
+                    />
+                    <span className="tooltip-text tooltip-bottom -translate-x-1/2 text-xs">
+                      {t("clear_selection")}
+                    </span>
+                  </div>
+                )}
+
                 {props.isLoading ? (
                   <CareIcon className="care-l-spinner animate-spin" />
                 ) : (
                   <CareIcon className="care-l-angle-down" />
                 )}
               </div>
-              {value && (
-                <div
-                  className="absolute right-0 top-1 mr-7 flex h-full items-center gap-1 pb-2 text-lg text-gray-900 hover:text-gray-500"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    if (!props.required) props.onChange(undefined);
-                  }}
-                >
-                  {!props.isLoading && (
-                    <CareIcon className="care-l-times-circle h-4 w-4" />
-                  )}
-                </div>
-              )}
             </Combobox.Button>
           </div>
 

diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
@@ -151,5 +151,6 @@
   "not_specified": "Not Specified",
   "all_changes_have_been_saved": "All changes have been saved",
   "no_data_found": "No data found",
-  "edit": "Edit"
+  "edit": "Edit",
+  "clear_selection": "Clear selection"
 }