CHANGELOG.md

v5.0.0

5.0.0 Breaking Changes

• [Button] The button component has been changed to a web component. (#4390)
  • Markup has changed to a custom element <ids-button id="my-button" type="primary"></ids-button>
  • Can now be imported as a single JS file and used with encapsulated styles.
  • Some button properties are now attributes - "type", "text", "icon", "disabled", "focusable", etc.
• [Card] The Card/Widget component has been changed to a web component and renamed to ids-card.
  • Markup has changed to a custom element <ids-card></ids-card> and has slots for the header and body content
  • Can now be imported as a single JS file and used with encapsulated styles
• [Checkbox] The Checkbox component has been changed to a web component and renamed to ids-checkbox.
  • Markup has changed to a custom element <ids-checkbox></ids-checkbox>
  • If using events, events are now plain JS events.
  • Can now be imported as a single JS file and used with encapsulated styles
• [Datagrid] The Datagrid component has been changed to a web component ids-data-grid.
  • If using events events are now plain JS events for example: sorted, rendered
  • If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll
  • Markup has changed to a custom element <ids-data-grid></ids-data-grid>
  • Can now be imported as a single JS file and used with encapsulated styles
• [Icons] The icons are now a web component called ids-icon. You no longer need the huge block of svg in the page
  • The icon and size are set via properties/attributes
  • Can now be imported as a single JS file and used with encapsulated styles
• [Input] The Input component has been changed to a web component and renamed to ids-input.
  • Markup has changed to a custom element <ids-input></ids-input>
  • If using events, events are now plain JS events.
  • Can now be imported as a single JS file and used with encapsulated styles
  • If using a clearable X on the input the x is now tabbable by default for accessibility
• [Loader] The Busy Indicator component has been changed to a web component and renamed to ids-loader.
  • If using properties/settings these are now attributes: dismissible, color
  • Markup has changed to a custom element <ids-loader></ids-loader>
  • Can now be imported as a single JS file and used with encapsulated styles
• [ListView] The List View component has been changed to a web component and renamed to ids-list-view.
  • If using properties/settings these are now attributes.
  • Markup has changed to a custom element <ids-list-view></ids-list-view>
  • If using events events are now plain JS events for example
  • The template is now a template element that uses simple string substitution
  • Can now be imported as a single JS file and used with encapsulated styles
• [Menu Button] Added the Menu Button WebComponent
  • Now exists as its own component
  • Markup is <ids-menu-button></ids-menu-button>
  • Implicitly linked to a menu by using menu="my-menu" CSS selector attribute, or direct element reference in JS
• [Popup] Added the Popup WebComponent. (#4259)
  • This is the new base component to be used for building Popupmenu, Tooltip, Modal, and any other component that requires placement of a fixed-position element.
  • If using properties/settings, these are now attributes: x, y, align, alignX, alignY, alignEdge, alignTarget, animated, visible.
  • Popup is now driven by its own HTMLElement rather than a being a behavior applied to any element: <ids-popup x="0" y="0" align="top, left">My Popup</ids-popup>
  • Can now be imported as a single JS file and used with encapsulated styles
• [Popup Menu] The Popup Menu is now a web component called ids-popup-menu.
  • Markup has been changed to a custom element <ids-popup-menu></ids-popup-menu>.
  • Events triggered by the Popup Menu are now plain JS (for example selected/deselected)
  • Selection of items is now divided up by Menu Groups <ids-menu-group></ids-menu-group>. Multiple menu groups in each Popup Menu are supported, and selection in one group will not affect selection in other groups.
  • Many previous settings are now attribute-friendly (for example closeOnSelect is now a keep-open attribute on menu groups).
  • Made dynamic menus possible by using IdsDataSource
• [Radio] The Radio component has been changed to a web component and use with ids-radio and ids-radio-group.
  • Markup has changed to a custom element <ids-radio-group><ids-radio></ids-radio></ids-radio-group>
  • If using events, events are now plain JS events.
  • Can now be imported as a single JS file and used with encapsulated styles
• [RenderLoop] The RenderLoop component has been implemented as a mixin.
  • Added IdsRenderLoopMixin for access to a global renderLoop instance from within WebComponents.
  • API has been simplified and made more user-friendly.
• [Switch] The Switch component has been changed to a web component and renamed to ids-switch.
  • Markup has changed to a custom element <ids-switch></ids-switch>
  • If using events, events are now plain JS events.
  • Can now be imported as a single JS file and used with encapsulated styles
• [Tags] The Tag component has been changed to a web component.
  • If using events events are now plain JS events. beforetagremoved, tagremoved, aftertagremoved
  • If using properties/settings these are now attributes: dismissible, color
  • Markup has changed to a custom element <ids-tag color="error">Text</ids-tag>
  • Can now be imported as a single JS file and used with encapsulated styles
• [Upload] The file upload component has been changed to a web component and renamed to ids-upload.
  • Markup has changed to a custom element <ids-upload></ids-upload>
  • If using events, events are now plain JS events.
  • Can now be imported as a single JS file and used with encapsulated styles
• [Textarea] The Textarea component has been changed to a web component and renamed to ids-textarea.
  • Markup has changed to a custom element <ids-textarea></ids-textarea>
  • If using events, events are now plain JS events.
  • Can now be imported as a single JS file and used with encapsulated styles
  • If using a clearable X on the textarea the x is now tabbable by default for accessibility