@engie-group/fluid-design-system - npm Package Compare versions

Comparing version 5.0.0-alpha.2 to 5.0.0-alpha.3

CHANGELOG.md

@@ -8,2 +8,22 @@ # Changelog
 
+## 📦 v5.0.0-alpha.3 - 2022-05-17
+### 🚀 Added
+* Add new select with native and custom variants
+### 🖍 Changed
+* Rename form-control folder and class to form-item
+* `nj-toggle` new size: `nj-toggle--lg`
+* `nj-toggle` minor changes: animation
+### ❌ Removed
+* /!\ Breaking changes `nj-toggle` 
+  * `nj-toggle` theme colors removed (`nj-toggle--primary`, `nj-toggle--success`, `nj-toggle--warning`, `nj-toggle--danger`, `nj-toggle--light`)
+  * `nj-toggle` deprecation of the utility classes (`mr-1`, `ml-1`) on label. Replaced with flex and gap behaviour.
+
+## 📦 v4.10.0 - 2022-05-16
+### 🖍 Changed
+* Remove class `.nj-radio--inline`, `.nj-radio-group` now handles display of radios, it is by default set to column you can toggle row display by adding class `.nj-radio-group--row`
+* Remove margin from `.nj-radio` spacing is now handled by parent class `.nj-radio-group`
+### 🐛 Fixed
+* Fix radio not working properly with custom content
+* Fix radio focus not showing
+
 ## 📦 v5.0.0-alpha.2 - 2022-04-22
@@ -10,0 +30,0 @@ ### 🐛 Fixed

lib-esm/components/v5-select/index.d.ts

@@ -14,27 +14,27 @@ /**
     private static readonly ESCAPE_KEYCODE;
+    private static readonly CLASS_NAME;
     private static readonly ATTRIBUTE;
-    private static readonly CLASS_NAME;
     protected static readonly SELECTOR: {
         default: string;
+        toggle: string;
         input: string;
-        label: string;
         options: string;
+        option: string;
+        selectedOption: string;
     };
     private static readonly EVENT;
+    private isOpen;
     value: string;
     constructor(element: HTMLElement);
-    closeMenu(): void;
     dispose(): void;
-    static handleCollapseShow(event: any): void;
-    static handleCollapseHide(event: any): void;
     static getInstance(element: HTMLElement): V5Select;
     static init(options?: {}): V5Select[];
-    private addTouchEvent;
+    private addToggleEvent;
+    private addDismissEvent;
     private addBlurEvent;
-    /**
-     * ------------------------------------------------------------------------
-     * Data Api implementation
-     * ------------------------------------------------------------------------
-     */
-    private registerEvents;
+    private blur;
+    private selectOptionEvent;
+    private closeMenu;
+    private openMenu;
+    private toggleMenu;
 }

lib-esm/components/v5-select/index.js

@@ -8,3 +8,2 @@ /**
 import AbstractComponent from '../../globals/ts/abstract-component';
-import CollapseComponent from '../collapse';
 import Data from '../../globals/ts/data';
@@ -15,13 +14,10 @@ import EventHandler from '../../globals/ts/event-handler';
         super(V5Select, element);
+        this.isOpen = false;
         Data.setData(element, V5Select.DATA_KEY, this);
+        this.isOpen = this.element.classList.contains(V5Select.CLASS_NAME.isOpen);
+        this.addToggleEvent();
         this.addBlurEvent();
-        this.addTouchEvent();
-        this.registerEvents();
+        this.selectOptionEvent();
+        this.addDismissEvent();
     }
-    closeMenu() {
-        // trigger click to hide options when element has lost focus
-        if (this.element.classList.contains(V5Select.CLASS_NAME.shownCollapse)) {
-            this.element.click();
-        }
-    }
     dispose() {
@@ -31,8 +27,2 @@ Data.removeData(this.element, V5Select.DATA_KEY);
     }
-    static handleCollapseShow(event) {
-        event.target.closest(V5Select.SELECTOR.default).classList.add(V5Select.CLASS_NAME.shownCollapse);
-    }
-    static handleCollapseHide(event) {
-        event.target.closest(V5Select.SELECTOR.default).classList.remove(V5Select.CLASS_NAME.shownCollapse);
-    }
     static getInstance(element) {
@@ -44,3 +34,18 @@ return Data.getData(element, V5Select.DATA_KEY);
     }
-    addTouchEvent() {
+    addToggleEvent() {
+        const toggle = this.element.querySelector(V5Select.SELECTOR.toggle);
+        const options = this.element.querySelector(V5Select.SELECTOR.options);
+        if (toggle) {
+            EventHandler.on(toggle, 'click', event => {
+                const target = event.target;
+                // If we click on list or list item don't toggle
+                if (target === options || options.contains(target)) {
+                    return;
+                }
+                event.preventDefault();
+                this.toggleMenu();
+            });
+        }
+    }
+    addDismissEvent() {
         EventHandler.on(this.element, V5Select.EVENT.keydownDismiss, event => {
@@ -50,2 +55,3 @@ if (event.which === V5Select.ESCAPE_KEYCODE) {
                 this.closeMenu();
+                this.blur();
             }
@@ -55,53 +61,81 @@ });
     addBlurEvent() {
-        EventHandler.on(this.element, 'blur', () => {
-            this.closeMenu();
-        });
+        const input = this.element.querySelector(V5Select.SELECTOR.input);
+        if (input) {
+            EventHandler.on(input, 'blur', () => {
+                this.closeMenu();
+            });
+        }
     }
-    /**
-     * ------------------------------------------------------------------------
-     * Data Api implementation
-     * ------------------------------------------------------------------------
-     */
-    registerEvents() {
-        EventHandler.on(document, CollapseComponent.EVENT.show, V5Select.SELECTOR.default, event => {
-            V5Select.handleCollapseShow(event);
-        });
-        EventHandler.on(document, CollapseComponent.EVENT.hidden, V5Select.SELECTOR.default, event => {
-            V5Select.handleCollapseHide(event);
-        });
-        EventHandler.on(document, V5Select.EVENT.clickDataApi, V5Select.SELECTOR.options, event => {
+    blur() {
+        const input = this.element.querySelector(V5Select.SELECTOR.input);
+        if (input) {
+            input.blur();
+        }
+    }
+    selectOptionEvent() {
+        EventHandler.on(this.element, V5Select.EVENT.clickDataApi, V5Select.SELECTOR.options, event => {
+            var _a;
             // HTML elements
-            const option = event.target.closest(`[${V5Select.ATTRIBUTE.value}]`);
-            const dropdown = event.target.closest(V5Select.SELECTOR.default);
-            const elemDataContent = option.querySelector(`[${V5Select.ATTRIBUTE.content}]`);
-            const input = dropdown.querySelector(V5Select.SELECTOR.input);
-            // Data
-            const dataSelectedValue = option.getAttribute(V5Select.ATTRIBUTE.value);
-            const dataContent = elemDataContent ? elemDataContent.textContent : option.textContent; // get option content if 'data-content' attribute doesn't exist
-            input.value = dataSelectedValue;
-            dropdown.setAttribute(V5Select.ATTRIBUTE.selectedContent, dataContent);
-            this.value = dataSelectedValue;
-            EventHandler.trigger(this.element, V5Select.EVENT.onchange);
+            const options = event.target.closest(V5Select.SELECTOR.options);
+            const option = event.target.closest(V5Select.SELECTOR.option);
+            const select = event.target.closest(V5Select.SELECTOR.default);
+            if (select && option && options) {
+                const input = select.querySelector(V5Select.SELECTOR.input);
+                const previouslySelectedOption = options.querySelector(`.${V5Select.SELECTOR.selectedOption}`);
+                if (previouslySelectedOption) {
+                    previouslySelectedOption.classList.remove(V5Select.SELECTOR.selectedOption);
+                }
+                const dataSelectedValue = (_a = option.getAttribute(V5Select.ATTRIBUTE.value)) !== null && _a !== void 0 ? _a : option.textContent;
+                option.classList.add(V5Select.SELECTOR.selectedOption);
+                input.value = dataSelectedValue;
+                this.value = dataSelectedValue;
+                EventHandler.trigger(this.element, V5Select.EVENT.onchange, {
+                    selectedOption: option,
+                    selectedValue: dataSelectedValue
+                });
+                this.closeMenu();
+            }
         });
     }
+    closeMenu() {
+        if (this.isOpen) {
+            this.isOpen = false;
+            this.element.classList.remove(V5Select.CLASS_NAME.isOpen);
+            EventHandler.trigger(this.element, V5Select.EVENT.close);
+        }
+    }
+    openMenu() {
+        if (!this.isOpen) {
+            this.isOpen = true;
+            this.element.classList.add(V5Select.CLASS_NAME.isOpen);
+            EventHandler.trigger(this.element, V5Select.EVENT.open);
+        }
+    }
+    toggleMenu() {
+        if (this.isOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu();
+        }
+    }
 }
-V5Select.NAME = `${Core.KEY_PREFIX}-dropdown`;
-V5Select.DATA_KEY = `${Core.KEY_PREFIX}.dropdown`;
+V5Select.NAME = `${Core.KEY_PREFIX}-form-item--custom-list`;
+V5Select.DATA_KEY = `${Core.KEY_PREFIX}.custom-list`;
 V5Select.EVENT_KEY = `.${V5Select.DATA_KEY}`;
 V5Select.DATA_API_KEY = Core.KEY_PREFIX;
 V5Select.ESCAPE_KEYCODE = 27; // KeyboardEventName.which value for Escape
+V5Select.CLASS_NAME = {
+    isOpen: `${Core.KEY_PREFIX}-form-item--open`
+};
 V5Select.ATTRIBUTE = {
-    content: 'data-content',
-    selectedContent: 'data-selected-content',
     value: 'data-value'
 };
-V5Select.CLASS_NAME = {
-    isFilled: `${V5Select.NAME}__label--is-filled`,
-    shownCollapse: `${V5Select.NAME}--shown-collapse`
-};
 V5Select.SELECTOR = {
     default: `.${V5Select.NAME}`,
-    input: 'input',
-    label: `.${V5Select.NAME}__label`,
-    options: `.${V5Select.NAME} [${V5Select.ATTRIBUTE.value}]`
+    toggle: `.${Core.KEY_PREFIX}-form-item__field-wrapper`,
+    input: `.${Core.KEY_PREFIX}-form-item__field`,
+    options: `.${Core.KEY_PREFIX}-form-item__list`,
+    option: `.${Core.KEY_PREFIX}-list-group__item`,
+    selectedOption: 'active'
 };
@@ -111,4 +145,6 @@ V5Select.EVENT = {
     keydownDismiss: `${EventName.keydown}.dismiss${V5Select.EVENT_KEY}`,
-    onchange: `${EventName.onchange}${V5Select.EVENT_KEY}`
+    onchange: `${EventName.onchange}${V5Select.EVENT_KEY}`,
+    open: `${EventName.show}${V5Select.EVENT_KEY}`,
+    close: `${EventName.hide}${V5Select.EVENT_KEY}`
 };
 //# sourceMappingURL=index.js.map

lib-esm/fluid-design-system.d.ts

@@ -19,2 +19,3 @@ import './auto-init';
 import Tooltip from './components/tooltip';
+import V5Select from './components/v5-select';
 /**
@@ -42,2 +43,3 @@ * Main class of Fluid Design System library
     static readonly Password: typeof Password;
+    static readonly V5Select: typeof V5Select;
     /**
@@ -44,0 +46,0 @@ * Initialize the components listed in the AUTOINIT_COMPONENTS variable

lib-esm/fluid-design-system.js

@@ -19,2 +19,3 @@ import './auto-init';
 import Tooltip from './components/tooltip';
+import V5Select from './components/v5-select';
 /**
@@ -57,3 +58,4 @@ * Main class of Fluid Design System library
     Tooltip,
-    Password
+    Password,
+    V5Select
 ];
@@ -79,2 +81,3 @@ // NEW_COMPONENT add component name here
 NJ.Password = Password;
+NJ.V5Select = V5Select;
 if (typeof window !== 'undefined') {
@@ -81,0 +84,0 @@ window.NJ = NJ;

lib/components/v5-select/index.d.ts

@@ -14,27 +14,27 @@ /**
     private static readonly ESCAPE_KEYCODE;
+    private static readonly CLASS_NAME;
     private static readonly ATTRIBUTE;
-    private static readonly CLASS_NAME;
     protected static readonly SELECTOR: {
         default: string;
+        toggle: string;
         input: string;
-        label: string;
         options: string;
+        option: string;
+        selectedOption: string;
     };
     private static readonly EVENT;
+    private isOpen;
     value: string;
     constructor(element: HTMLElement);
-    closeMenu(): void;
     dispose(): void;
-    static handleCollapseShow(event: any): void;
-    static handleCollapseHide(event: any): void;
     static getInstance(element: HTMLElement): V5Select;
     static init(options?: {}): V5Select[];
-    private addTouchEvent;
+    private addToggleEvent;
+    private addDismissEvent;
     private addBlurEvent;
-    /**
-     * ------------------------------------------------------------------------
-     * Data Api implementation
-     * ------------------------------------------------------------------------
-     */
-    private registerEvents;
+    private blur;
+    private selectOptionEvent;
+    private closeMenu;
+    private openMenu;
+    private toggleMenu;
 }

lib/fluid-design-system.d.ts

@@ -19,2 +19,3 @@ import './auto-init';
 import Tooltip from './components/tooltip';
+import V5Select from './components/v5-select';
 /**
@@ -42,2 +43,3 @@ * Main class of Fluid Design System library
     static readonly Password: typeof Password;
+    static readonly V5Select: typeof V5Select;
     /**
@@ -44,0 +46,0 @@ * Initialize the components listed in the AUTOINIT_COMPONENTS variable

package.json

 {
   "name": "@engie-group/fluid-design-system",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.3",
   "description": "The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.",
@@ -68,3 +68,3 @@ "keywords": [
   "dependencies": {
-    "@engie-group/fluid-design-tokens": "^2.0.0-alpha.2"
+    "@engie-group/fluid-design-tokens": "^5.0.0-alpha.0"
   },
@@ -83,3 +83,2 @@ "devDependencies": {
     "caniuse-api": "3.0.0",
-    "caniuse-lite": "1.0.30001154",
     "core-js": "3.14.0",
@@ -122,3 +121,3 @@ "css-vars-ponyfill": "2.3.2",
   },
-  "gitHead": "af929f5c862f6a6b57afe47aa107f56eaf4d3bea"
+  "gitHead": "413fd7b4ff8a46eb2cd4213a78bcacc77b25bb44"
 }

src/fluid-design-system.ts

@@ -20,2 +20,3 @@ import './auto-init';
 import Tooltip from './components/tooltip';
+import V5Select from './components/v5-select';
 
@@ -44,3 +45,4 @@ /**
     Tooltip,
-    Password
+    Password,
+    V5Select
   ];
@@ -67,2 +69,3 @@ // NEW_COMPONENT add component name here
   static readonly Password = Password;
+  static readonly V5Select = V5Select;
 
@@ -69,0 +72,0 @@ // NEW_COMPONENT  add component name here

No alert changes

Improved metrics

Total package byte prevSize

4596184

increased by0.71%

Dev dependency count

47

decreased by-2.08%

Number of package files

475

increased by0.42%

Lines of code

20825

increased by1.22%

Dependency changes

• + Added@engie-group/fluid-design-tokens@5.10.0(transitive)

• + Addedyaml@2.3.4(transitive)

• - Removed@engie-group/fluid-design-tokens@2.0.0-alpha.2(transitive)

• Updated@engie-group/fluid-design-tokens@^5.0.0-alpha.0