@salesforcedevs/dx-components 1.3.194-langpicker7-alpha → 1.3.194-langpicker8-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.194-langpicker7-alpha",
+    "version": "1.3.194-langpicker8-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -79,6 +79,22 @@
     -webkit-box-orient: vertical;
 }
 
+.option-docoption {
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.option-docoption .option_label {
+    color: var(--dx-g-gray-10);
+    font-weight: normal !important;
+}
+
+.option-docoption.option-active .option_label {
+    color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
+    font-weight: var(--dx-g-font-bold);
+}
+
 .option_label > *:last-child {
     margin-left: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -69,16 +69,16 @@
             ></dx-empty-state>
         </template>
 
-        <div if:false={mobile} class="footer-nav">
-            <doc-footer-nav
-                class="footer_lang-dropdown"
-                lang-value-path={langValuePath}
-                language={language}
-                languages={languages}
-                bail-href={bailHref}
-                bail-label={bailLabel}
-            >
-            </doc-footer-nav>
-        </div>
+        <template if:true={hasSidebarFooter}>
+            <div if:false={mobile} class="footer-nav">
+                <doc-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></doc-footer-nav>
+            </div>
+        </template>
     </div>
 </template>

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -5,7 +5,6 @@ import { TreeNode } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { SidebarBase } from "dxBaseElements/sidebarBase";
 import type { OptionWithLink } from "typings/custom";
-import get from "lodash.get";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";
@@ -198,24 +197,10 @@ export default class Sidebar extends SidebarBase {
         }
     }
 
-    private get hasLanguages(): boolean {
-        return !!(this.languages && this.languages.length);
-    }
-
-    private get languageLabel(): string {
-        return (
-            (this.language &&
-                this.languages.find(
-                    (lang) => get(lang, this.langValuePath) === this.language
-                )?.label) ||
-            this.languages[0].label
+    private get hasSidebarFooter(): boolean {
+        return !!(
+            (this.languages && toJson(this.languages).length > 1) ||
+            Boolean(this.bailHref)
         );
     }
-
-    private onLangChange(event: CustomEvent<string>): void {
-        const { detail } = event;
-        this._language = detail;
-
-        this.dispatchEvent(new CustomEvent("langchange", { detail }));
-    }
 }

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -13,16 +13,13 @@
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
-dx-tree:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
 dx-tree {
     border-top: 1px solid var(--dx-g-gray-90);
 }
 
 dx-tree:last-child {
     border-bottom: 1px solid var(--dx-g-gray-90);
+    margin-bottom: var(--dx-g-spacing-sm);
 }
 
 .header {
@@ -77,32 +74,10 @@ dx-tree:last-child {
     border-right: 1px solid var(--dx-g-gray-90);
     box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
-    padding: var(--dx-c-sidebar-vertical-padding) 0
-        var(--dx-c-sidebar-vertical-padding) 0;
+    padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
     position: relative;
 }
 
-.footer_lang-dropdown {
-    --button-primary-color: var(--dx-g-blue-vibrant-50);
-    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
-
-    padding: var(--dx-g-spacing-2xs) var(--dx-g-spacing-md);
-}
-
-.footer_lang-dropdown > dx-button {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-slot-empty-width: min-content;
-    --border-color: var(--button-primary-color);
-}
-
-.footer_lang-dropdown:hover,
-.footer_lang-dropdown:active,
-.footer_lang-dropdown:focus {
-    background-color: var(--button-primary-color-hover);
-
-    --border-color: var(--button-primary-color-hover);
-}
-
 .collapsed.container:not(.container-mobile) {
     background-color: transparent;
 }