AllComponents: Check working in prod build via single import #1146
Labels
Comments
tmcconechy
added
type: bug 🐛
tmcconechy
changed the title
|
Modal Example (Showing some errors)... <!DOCTYPE html>
<html lang="en-US">
<head>
<title>IDS Modal Component</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="Cache-control" content="max-age=31536000">
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-container/ids-container.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-tag/ids-tag.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-modal/ids-modal.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-text/ids-text.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-theme-switcher/ids-theme-switcher.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-layout-grid/ids-layout-grid.js"></script>
</head>
<body>
<ids-container role="main" padding="8" hidden>
<ids-theme-switcher mode="light"></ids-theme-switcher>
<ids-modal id="my-modal" aria-labelledby="my-modal-title">
<ids-text slot="title" font-size="24" type="h2" id="my-modal-title">Active IDS Modal</ids-text>
<ids-modal-button slot="buttons" id="modal-close-btn" type="primary">
<span>OK</span>
</ids-modal-button>
<ids-text align="left">This is an active IDS Modal component</ids-text>
</ids-modal>
<ids-layout-grid auto="true">
<ids-text font-size="12" type="h1">Modal</ids-text>
</ids-layout-grid>
<ids-layout-grid auto="true">
<ids-layout-grid-cell>
<ids-button id="modal-trigger-btn" type="secondary">
<span>Trigger a Modal</span>
</ids-button>
</ids-layout-grid-cell>
</ids-layout-grid>
</ids-container>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
const triggerId = '#modal-trigger-btn';
const triggerBtn = document.querySelector(triggerId);
const modal = 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;
});
});
</script>
</html> |
tmcconechy
added
[5]
|
Multiselect example (showing some errors as extra imports are needed) <!DOCTYPE html>
<html lang="en-US">
<head>
<title>IDS Multiselect Component</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="Cache-control" content="max-age=31536000">
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-container/ids-container.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-dropdown/ids-dropdown.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-checkbox/ids-checkbox.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-text/ids-text.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-list-box/ids-list-box.js"></script>
<script type="module" src="/node_modules/ids-enterprise-wc/components/ids-multiselect/ids-multiselect.js"></script>
</head>
<body>
<ids-container role="main" padding="0" hidden>
<ids-multiselect id="dropdown-1" label="Multiselect (with max 3 choices and dirty tracker)" max="3"
dirty-tracker="true">
<ids-list-box>
<ids-list-box-option id="al2" value="al" tooltip="The State of Alabama"><ids-checkbox
label="Alabama"></ids-checkbox></ids-list-box-option>
<ids-list-box-option id="ak2" value="ak" tooltip="The State of Alaska"><ids-checkbox
label="Alaska"></ids-checkbox></ids-list-box-option>
<ids-list-box-option id="az2" value="az" tooltip="The State of Arizona"><ids-checkbox
label="Arizona"></ids-checkbox></ids-list-box-option>
<ids-list-box-option id="ar2" value="ar" tooltip="The State of Arkansas"><ids-checkbox
label="Arkansas"></ids-checkbox></ids-list-box-option>
<ids-list-box-option id="ca2" value="ca" tooltip="The State of California"><ids-checkbox
label="California"></ids-checkbox></ids-list-box-option>
<ids-list-box-option id="co2" value="co" tooltip="The State of Colorado"><ids-checkbox
label="Colorado"></ids-checkbox></ids-list-box-option>
<ids-list-box-option id="nj2" value="nj" tooltip="The State of New Jersey" selected><ids-checkbox
label="New Jersey"></ids-checkbox></ids-list-box-option>
</ids-list-box>
</ids-multiselect>
</ids-container>
</body>
</html> |
|
Wanted to call out something i read here evanw/esbuild#2014 (comment) in case we need it. If we find the dependencies are not in the right order due to that issue then maybe a workaround is to do like that.. then make a new file componentCDependencies with: And import that... More for later if we need this... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
Should make sure each component can be used by itself with a single import.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Each component will work via a single import for it. May need to add missing imports or add guards for errors
Related Information
#1141 -> has a fix for calendar to show the type of issues
evanw/esbuild#399 -> should need to be fixed
The text was updated successfully, but these errors were encountered: