Misc - Add fixes and tests for popups and fix text color

doc/CHANGELOG.md

@@ -30,16 +30,19 @@
 - `[Datagrid]` Fixed bug editor dropdown can't be re-opened after closing. ([#2589](https://github.com/infor-design/enterprise-wc/issues/2589))
 - `[Dropdown]` Made the `typeahead` setting true by default. ([#2770](https://github.com/infor-design/enterprise-wc/issues/2770))
 - `[Homepage]` Converted home page tests to playwright. ([#1940](https://github.com/infor-design/enterprise-wc/issues/1940))
+- `[Input]` Fixed position of password button and text color in dark mode. ([#4665](https://inforwiki.atlassian.net/browse/IDS-4665))
 - `[LayoutGrid]` Fixed recursion issue in maxWidth setter. ([#2470]https://github.com/infor-design/enterprise-wc/issues/2470)
 - `[Listbuilder]` Fixed buggy builder styles. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
 - `[Listbuilder]` Fixed an issue where clicking the row in the wrong spot would edit the wrong row. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
 - `[Locale]` Fixed translation issue of `small` into Spanish. ([#8962](https://github.com/infor-design/enterprise-wc/issues/8962))
 - `[Locale]` Fixed translation issue of `Available` into Thai and Italian. ([#8786](https://github.com/infor-design/enterprise-wc/issues/8786))
 - `[Listbuilder]` Fixed buggy builder styles. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
 - `[Listbuilder]` Fixed an issue where clicking the row in the wrong spot would edit the wrong row. ([#2701](https://github.com/infor-design/enterprise-wc/issues/2701))
+- `[Modal]` Fixed missing border between modal buttons. ([#4660](https://inforwiki.atlassian.net/browse/IDS-4660))
 - `[Multiselect]` Added `placeholder` attribute to `ids-multiselect` to allow for a placeholder value. ([#2758](https://github.com/infor-design/enterprise-wc/issues/2758))
 - `[Multiselect]` Converted multiselect tests to playwright. ([#1957](https://github.com/infor-design/enterprise-wc/issues/1957))
 - `[Popup]` Fixed an issue where the popup took up space when initially loaded. ([#2777](https://github.com/infor-design/enterprise-wc/issues/2777))
+- `[PopupMenu/Datagrid]` Fixed an issue where popupmenu is not in the correct position on modals or action panels. ([#4264](https://inforwiki.atlassian.net/browse/IDS-4264))
 - `[Pager]` Fixed an issue where the disabled attribute of navigation buttons was overridden by the pager. ([#2738](https://github.com/infor-design/enterprise-wc/issues/2738))
 - `[Radio]` Fixed an issue where the radio group could not set checked for radio elements when using Angular's FormControl and value binding. ([#2700](https://github.com/infor-design/enterprise-wc/issues/2700))
 - `[Splitter]` Converted datagrid popups to fixed to go over splitter panes. ([#2499](https://github.com/infor-design/enterprise-wc/issues/2499))

src/components/ids-button/ids-button-base.scss

@@ -111,10 +111,6 @@
     margin-inline: var(--ids-space-none);
   }
 
-  &:not(.no-margins) {
-    margin: var(--ids-button-alt-margin);
-  }
-
   &.field-height-xxs:not(.btn-secondary):not(.no-margins) {
     margin-block-start: 3px;
     margin-inline-end: -2px;
@@ -734,4 +730,3 @@
     }
   }
 }
-

src/components/ids-button/ids-button.scss

@@ -146,7 +146,7 @@ button {
     border-radius: var(--ids-border-radius-none);
   }
 
-  .ids-icon {
+  .ids-icon:not(.dropdown-icon) {
     display: block;
     padding-inline-start: var(--ids-space-3xs);
     font-size: 0;

src/components/ids-data-grid/ids-data-grid-filters.scss

@@ -43,4 +43,16 @@
       }
     }
   }
+
+
+  [data-filter-conditions-button] {
+    --ids-button-icon-height: 32px;
+    --ids-button-icon-width: 38px;
+
+    margin-inline-end: 2px;
+
+    ids-icon-button {
+      padding-inline-start: 0;
+    }
+  }
 }

src/components/ids-data-grid/ids-data-grid-filters.ts

@@ -169,6 +169,7 @@ export default class IdsDataGridFilters {
 
     const filterButton = `${this.#filterButtonTemplate(TYPE, column)}`;
     const trigger = `${this.#triggerFieldTemplate(TYPE, column, 'calendar', 'DatePickerTriggerButton')}`;
+
     const popup = `<ids-date-picker-popup
       attachment=".ids-data-grid-wrapper"
       data-filter-type="${TYPE}"

src/components/ids-input/ids-input.scss

@@ -314,6 +314,7 @@ $input-size-full: 100%;
     box-sizing: border-box;
     background-color: var(--ids-color-transparent);
     border: none;
+    color: inherit;
     font-family: var(--ids-font-family-default), var(--ids-font-family-system-sans);
     padding-block-start: var(--ids-space-2xs);
     padding-block-end: var(--ids-space-2xs);
@@ -407,7 +408,7 @@ $input-size-full: 100%;
     .validation-message {
       width: $border-input-size-xs;
     }
-  } 
+  }
 
   &.sm {
     .field-container,
@@ -906,6 +907,10 @@ $input-size-full: 100%;
   padding-inline-end: var(--ids-space-xs);
 }
 
+.show-hide-password {
+  padding-inline-end: var(--ids-space-3xs);
+}
+
 .is-uppercase {
   text-transform: uppercase;
 }

src/components/ids-popup-menu/demos/in-action-panel.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+  <%= htmlWebpackPlugin.options.font %>
+</head>
+
+<body>
+  <ids-container role="main" padding="8" hidden>
+    <ids-theme-switcher mode="light"></ids-theme-switcher>
+    <ids-layout-grid auto-fit="true" padding="md">
+      <ids-text font-size="12" type="h1">Dropdowns (in action panel)</ids-text>
+    </ids-layout-grid>
+
+    <ids-layout-grid auto-fit="true" padding-x="md">
+      <ids-layout-grid-cell>
+        <ids-button id="popup-trigger-btn" appearance="secondary">
+          <span>Trigger an Action Panel</span>
+        </ids-button>
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+
+    <ids-action-panel id="abc">
+      <ids-toolbar slot="toolbar">
+        <ids-toolbar-section type="title">
+          <ids-text font-size="20" type="h2">Action Panel Dropdown</ids-text>
+        </ids-toolbar-section>
+      </ids-toolbar>
+      <ids-layout-grid auto-fit="true" padding="md">
+        <ids-layout-grid-column>
+          <ids-menu-button id="menu-button" icon="settings" appearance="tertiary" menu="my-menu" dropdown-icon>
+            <span>Settings</span>
+          </ids-menu-button>
+          <ids-popup-menu id="my-menu" target="menu-button" trigger-type="click">
+            <ids-menu-group>
+              <ids-menu-item>Personalize Columns...</ids-menu-item>
+            </ids-menu-group>
+            <ids-separator></ids-separator>
+            <ids-menu-group select="single" id="sizes">
+              <ids-menu-header>Row Height</ids-menu-header>
+              <ids-menu-item disabled="true" value="extra-small">Extra Small</ids-menu-item>
+              <ids-menu-item value="small">Small</ids-menu-item>
+              <ids-menu-item value="medium">Medium</ids-menu-item>
+              <ids-menu-item value="large" selected="true">Large</ids-menu-item>
+            </ids-menu-group>
+            <ids-separator></ids-separator>
+            <ids-menu-group select="multiple" keep-open="true">
+              <ids-menu-header>Filtering Options</ids-menu-header>
+              <ids-menu-item selected="true">Show Filter Row</ids-menu-item>
+              <ids-menu-item value="run-filter">Run Filter</ids-menu-item>
+              <ids-menu-item value="clear-filter">Clear Filter</ids-menu-item>
+            </ids-menu-group>
+          </ids-popup-menu>
+        </ids-layout-grid-column>
+      </ids-layout-grid>
+    </ids-action-panel>
+
+  </ids-container>
+</body>
+
+</html>

src/components/ids-popup-menu/demos/in-action-panel.ts

@@ -0,0 +1,19 @@
+import '../../ids-menu-button/ids-menu-button';
+import '../../ids-input/ids-input';
+import '../../ids-list-box/ids-list-box';
+import '../../ids-list-box/ids-list-box-option';
+import '../../ids-popup/ids-popup';
+import '../../ids-layout-flex/ids-scroll-container';
+import '../../ids-action-panel/ids-action-panel';
+import type IdsActionPanel from '../../ids-action-panel/ids-action-panel';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const triggerId = '#popup-trigger-btn';
+  const triggerBtn = document.querySelector(triggerId);
+  const actionPanel = document.querySelector<IdsActionPanel>('ids-action-panel');
+
+  // Toggle action panel
+  triggerBtn?.addEventListener('click', async () => {
+    await actionPanel?.show();
+  });
+});

src/components/ids-popup-menu/demos/in-modal.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+  <%= htmlWebpackPlugin.options.font %>
+</head>
+
+<body>
+  <ids-container role="main" padding="8" hidden>
+    <ids-theme-switcher mode="light"></ids-theme-switcher>
+    <ids-layout-grid auto-fit="true" padding="md">
+      <ids-text font-size="12" type="h1">Dropdowns (in a modal)</ids-text>
+    </ids-layout-grid>
+
+    <ids-layout-grid auto-fit="true" padding-x="md">
+      <ids-layout-grid-cell>
+        <ids-button id="modal-trigger-btn" appearance="secondary">
+          <span>Trigger a Modal</span>
+        </ids-button>
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+
+    <ids-modal id="my-modal" aria-labelledby="my-modal-title" scrollable>
+      <ids-text slot="title" font-size="24" type="h2" id="my-modal-title">Example modal</ids-text>
+
+      <ids-layout-grid auto-fit="true" gap="md" no-margins="true" row-height="300px">
+         <ids-layout-grid-cell>
+          <ids-menu-button id="menu-button" icon="settings" appearance="tertiary" menu="my-menu" dropdown-icon>
+            <span>Settings</span>
+          </ids-menu-button>
+          <ids-popup-menu id="my-menu" target="menu-button" trigger-type="click">
+            <ids-menu-group>
+              <ids-menu-item>Personalize Columns...</ids-menu-item>
+            </ids-menu-group>
+            <ids-separator></ids-separator>
+            <ids-menu-group select="single" id="sizes">
+              <ids-menu-header>Row Height</ids-menu-header>
+              <ids-menu-item disabled="true" value="extra-small">Extra Small</ids-menu-item>
+              <ids-menu-item value="small">Small</ids-menu-item>
+              <ids-menu-item value="medium">Medium</ids-menu-item>
+              <ids-menu-item value="large" selected="true">Large</ids-menu-item>
+            </ids-menu-group>
+            <ids-separator></ids-separator>
+            <ids-menu-group select="multiple" keep-open="true">
+              <ids-menu-header>Filtering Options</ids-menu-header>
+              <ids-menu-item selected="true">Show Filter Row</ids-menu-item>
+              <ids-menu-item value="run-filter">Run Filter</ids-menu-item>
+              <ids-menu-item value="clear-filter">Clear Filter</ids-menu-item>
+            </ids-menu-group>
+          </ids-popup-menu>
+        </ids-layout-grid-cell>
+      </ids-layout-grid>
+
+      <ids-modal-button slot="buttons" id="modal-close-btn" appearance="secondary">
+        <span>Cancel</span>
+      </ids-modal-button>
+      <ids-modal-button slot="buttons" id="modal-close-apply" appearance="primary">
+        <span>Apply</span>
+      </ids-modal-button>
+    </ids-modal>
+
+  </ids-container>
+</body>
+
+</html>

src/components/ids-popup-menu/demos/in-modal.ts

@@ -0,0 +1,40 @@
+import '../../ids-menu-button/ids-menu-button';
+import '../../ids-input/ids-input';
+import '../../ids-list-box/ids-list-box';
+import '../../ids-modal/ids-modal';
+import '../../ids-list-box/ids-list-box-option';
+import '../../ids-popup/ids-popup';
+import '../../ids-layout-flex/ids-scroll-container';
+import css from '../../../assets/css/ids-popup/index.css';
+
+const cssLink = `<link href="${css}" rel="stylesheet">`;
+const head = document.querySelector('head');
+if (head) {
+  head.insertAdjacentHTML('afterbegin', cssLink);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const triggerId = '#modal-trigger-btn';
+  const triggerBtn: any = document.querySelector(triggerId);
+  const modal: any = document.querySelector('ids-modal');
+
+  // Links the Modal to its trigger button (sets up click/focus events)
+  modal.target = triggerBtn;
+  modal.triggerType = 'click';
+
+  // Disable the trigger button when showing the Modal.
+  modal.addEventListener('beforeshow', () => {
+    triggerBtn.disabled = true;
+    return true;
+  });
+
+  // Close the modal when its inner button is clicked.
+  modal.onButtonClick = () => {
+    modal.hide();
+  };
+
+  // After the modal is done hiding, re-enable its trigger button.
+  modal.addEventListener('hide', () => {
+    triggerBtn.disabled = false;
+  });
+});

src/components/ids-popup-menu/demos/in-popup.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <%= htmlWebpackPlugin.options.font %>
+</head>
+<body>
+  <ids-container role="main" padding="8" hidden>
+    <ids-theme-switcher mode="light"></ids-theme-switcher>
+    <ids-layout-grid auto-fit="true" padding="md">
+      <ids-text font-size="12" type="h1">Menu Button (In a popup)</ids-text>
+    </ids-layout-grid>
+    <ids-layout-grid auto-fit="true" padding-x="md">
+      <ids-layout-grid-cell>
+        <ids-button id="popup-trigger-btn" appearance="secondary">
+          <span>Trigger a Popup</span>
+        </ids-button>
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+
+    <ids-popup x="15" y="0" align-target="#popup-trigger-btn" align="right" animated="true" type="menu" id="popup-1">
+      <div slot="content">
+        <ids-scroll-container class="scrollable">
+          <ids-layout-grid gap="md" padding="md">
+            <ids-layout-grid-cell>
+              <ids-menu-button id="menu-button" icon="settings" appearance="tertiary" menu="my-menu" dropdown-icon>
+                <span>Settings</span>
+              </ids-menu-button>
+              <ids-popup-menu id="my-menu" target="menu-button" trigger-type="click">
+                <ids-menu-group>
+                  <ids-menu-item>Personalize Columns...</ids-menu-item>
+                </ids-menu-group>
+                <ids-separator></ids-separator>
+                <ids-menu-group select="single" id="sizes">
+                  <ids-menu-header>Row Height</ids-menu-header>
+                  <ids-menu-item disabled="true" value="extra-small">Extra Small</ids-menu-item>
+                  <ids-menu-item value="small">Small</ids-menu-item>
+                  <ids-menu-item value="medium">Medium</ids-menu-item>
+                  <ids-menu-item value="large" selected="true">Large</ids-menu-item>
+                </ids-menu-group>
+                <ids-separator></ids-separator>
+                <ids-menu-group select="multiple" keep-open="true">
+                  <ids-menu-header>Filtering Options</ids-menu-header>
+                  <ids-menu-item selected="true">Show Filter Row</ids-menu-item>
+                  <ids-menu-item value="run-filter">Run Filter</ids-menu-item>
+                  <ids-menu-item value="clear-filter">Clear Filter</ids-menu-item>
+                </ids-menu-group>
+              </ids-popup-menu>
+            </ids-layout-grid-cell>
+          </ids-layout-grid>
+        </ids-scroll-container>
+      </div>
+    </ids-popup>
+  </ids-container>
+</body>
+</html>

src/components/ids-popup-menu/demos/in-popup.ts

@@ -0,0 +1,31 @@
+import '../../ids-menu-button/ids-menu-button';
+import '../../ids-popup/ids-popup';
+import css from '../../../assets/css/ids-popup/index.css';
+
+const cssLink = `<link href="${css}" rel="stylesheet">`;
+const head = document.querySelector('head');
+if (head) {
+  head.insertAdjacentHTML('afterbegin', cssLink);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const triggerId = '#popup-trigger-btn';
+  const triggerBtn = document.querySelector(triggerId);
+  const popup: any = document.querySelector('#popup-1');
+  if (!popup) {
+    return;
+  }
+  popup.arrow = 'right';
+
+  // Toggle the Popup
+  triggerBtn?.addEventListener('click', () => {
+    if (!popup.visible) popup.visible = true; // closes automatically on click out
+  });
+
+  popup.addEventListener('hide', () => {
+    console.info('Hide event fired');
+  });
+  popup.addEventListener('show', () => {
+    console.info('Show event fired');
+  });
+});

src/components/ids-popup-menu/demos/index.yaml

@@ -29,6 +29,15 @@
   - link: position-style.html
     type: Test
     description: Shows the effect of changing position style
+  - link: in-action-panel.html
+    type: Example
+    description: Showing a menu button in an action panel
+  - link: in-modal.html
+    type: Example
+    description: Showing a menu button in a modal
+  - link: in-popup.html
+    type: Example
+    description: Showing a menu button in a popup
   - link: in-offset-container.html
     type: Test
     description: Shows the effect of setting `offset-container` to adjust popup's fixed position