-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2805 from infor-design/lookup-fixes
Misc - Add fixes and tests for popups and fix text color
- Loading branch information
Showing
17 changed files
with
329 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.