Merge pull request #1624 from mendix/feat/WC_1289_internal-feedback-for-language-selector

[WC-1289] internal feedback for language selector

Author: raffiar

packages/pluggableWidgets/language-selector-web/src/LanguageSelector.editorConfig.ts

@@ -15,20 +15,20 @@ export function getPreview(__values: LanguageSelectorPreviewProps, isDarkMode: b
         children: [
             {
                 type: "Text",
-                content: "Current language",
+                content: "Selected language",
                 fontColor: isDarkMode ? "#DEDEDE" : "#899499"
             },
             { type: "Container", grow: 0.001 }, // small space between items
             {
                 type: "Container",
-                padding: 6,
+                padding: 4,
                 children: [
                     {
                         type: "Image",
                         document: decodeURIComponent(
                             (isDarkMode ? ArrowLight : ArrowDark).replace("data:image/svg+xml,", "")
                         ),
-                        height: 8
+                        height: 14
                     }
                 ]
             },

packages/pluggableWidgets/language-selector-web/src/LanguageSelector.editorPreview.tsx

@@ -5,7 +5,7 @@ import { LanguageSwitcher } from "./components/LanguageSwitcher";
 export const preview = (props: LanguageSelectorPreviewProps): ReactElement => {
     return (
         <LanguageSwitcher
-            preview={false}
+            preview
             currentLanguage={{ _guid: "1", value: "Current language" }}
             languageList={[{ _guid: "1", value: "Current language" }]}
             position={props.position}

packages/pluggableWidgets/language-selector-web/src/LanguageSelector.xml

@@ -12,9 +12,10 @@
                     <caption>Data source</caption>
                     <description>Recommended: Database data source with System.Language as entity.</description>
                 </property>
-                <property key="languageCaption" type="textTemplate" dataSource="languageOptions" required="true">
+                <property key="languageCaption" type="expression" dataSource="languageOptions" required="true">
                     <caption>Language caption</caption>
-                    <description>Recommended: {1} with attribute Language.Description as parameter.</description>
+                    <description>Recommended: $currentObject/Description.</description>
+                    <returnType type="String" />
                 </property>
             </propertyGroup>
             <propertyGroup caption="General">

packages/pluggableWidgets/language-selector-web/src/assets/arrow_black.svg

@@ -14,6 +14,7 @@ import {
 } from "../utils/document";
 import { PositionEnum, TriggerEnum } from "../../typings/LanguageSelectorProps";
 import { LanguageItem } from "../LanguageSelector";
+import ArrowIcon from "../assets/arrow_black.svg";
 
 export interface LanguageSwitcherProps {
     preview: boolean;
@@ -25,12 +26,11 @@ export interface LanguageSwitcherProps {
     className: string;
 }
 export const LanguageSwitcher = (props: LanguageSwitcherProps): ReactElement => {
-    const preview = !!props.preview;
     const { languageList, trigger } = props;
     const [visibility, setVisibility] = useState(false);
     const ref = useRef<HTMLDivElement>(null);
 
-    if (!preview) {
+    if (!props.preview) {
         handleOnClickOutsideElement(ref, () => setVisibility(false));
     }
 
@@ -67,16 +67,17 @@ export const LanguageSwitcher = (props: LanguageSwitcherProps): ReactElement =>
         <div ref={ref} className={classNames(props.className, "widget-language-selector", "popupmenu")} {...onHover}>
             <div className={"popupmenu-trigger popupmenu-trigger-alignment"} {...onClick}>
                 <span className="current-language-text">{props.currentLanguage?.value || ""}</span>
-                <span
-                    className={`language-arrow glyphicon glyphicon-chevron-${visibility ? "up" : "down"}`}
-                    aria-hidden="true"
-                ></span>
+                <span className="language-arrow" aria-hidden="true">
+                    <img className={`${visibility ? "arrow-up" : "arrow-down"}`} src={ArrowIcon} alt="" />
+                </span>
             </div>
             <div className={classNames("popupmenu-menu", `popupmenu-position-${props.position}`)}>
                 {languageList.map(item => (
                     <div
                         key={item._guid}
-                        className={"popupmenu-basic-item"}
+                        className={`popupmenu-basic-item ${
+                            item._guid === props.currentLanguage?._guid ? "active" : ""
+                        }`}
                         onClick={() => {
                             if (props.onSelect) {
                                 return props.onSelect(item);

packages/pluggableWidgets/language-selector-web/src/assets/arrow_dark.svg

@@ -13,8 +13,13 @@ exports[`Language switcher renders the structure with empty language list 1`] =
       />
       <span
         aria-hidden="true"
-        class="language-arrow glyphicon glyphicon-chevron-down"
-      />
+        class="language-arrow"
+      >
+        <img
+          alt=""
+          class="arrow-down"
+        />
+      </span>
     </div>
     <div
       class="popupmenu-menu popupmenu-position-left"
@@ -38,14 +43,19 @@ exports[`Language switcher renders the structure with language list and selected
       </span>
       <span
         aria-hidden="true"
-        class="language-arrow glyphicon glyphicon-chevron-down"
-      />
+        class="language-arrow"
+      >
+        <img
+          alt=""
+          class="arrow-down"
+        />
+      </span>
     </div>
     <div
       class="popupmenu-menu popupmenu-position-left"
     >
       <div
-        class="popupmenu-basic-item"
+        class="popupmenu-basic-item active"
       >
         En us
       </div>

packages/pluggableWidgets/language-selector-web/src/assets/arrow_light.svg

@@ -3,19 +3,36 @@
         .current-language-text,
         .language-arrow {
             color: white;
+            img {
+                filter: invert(1);
+            }
         }
     }
 }
 
 .widget-language-selector {
-    .popupmenu-trigger-alignement {
-        display: flex;
-        align-items: center;
+    .language-arrow {
+        transition: transform 0.2s ease-in-out 50ms;
+        img {
+            height: 14px !important;
+            &.arrow-up {
+                transform: rotate(180deg);
+            }
+        }
     }
     .current-language-text {
         margin-right: 6px;
+        font-size: 14px;
     }
-    .popupmenu-basic-item {
-        border: 1px solid #ced0d3;
+    .popupmenu-menu {
+        background: #f8f8f8;
+        .popupmenu-basic-item {
+            &.active {
+                font-weight: 600;
+            }
+            &:hover {
+                background: #ffffff;
+            }
+        }
     }
 }