v1.2.0

What's new

Sidenav

• New sticky prop to enable the sidenav to sticky to a given --sidenav-sticky-top value (defaults to 0rem);

Pagination

• New showFirstPage showLastPage prop to toggle the visibility of first and/or last page of the component

QuantityToggle

• Prevent the users from entering the negative("-") value or any other alphabets
• Reset the value to 0 when the value is blank (deletion)
• disable button when number reach 0 / minimum / maximum value

Fixes

Pagination

• Added the fallback value for colour css custom variables of pagination component

Datepicker

• Added appropriate aria attributes added for full support to the screen readers' users . Fixes #180
• Focus back to input when calendar closes to allow screenreader to announce date in the input.

v1.1.0

What's new

Datepicker

• Accessibility features and improvements including allowing users to type date from input and keyboard accessible menu
• Previously the Datepicker's input was read-only. From 1.1.0, input masking is implemented on the Datepicker's input to allow users to type dates.
• Validation stylings and validation message for form constraint validation are implemented by default to the Datepicker. invalidFeedback prop is introduced to allow users to customise the error message when an invalid date is typed.
• As Datepicker is typically used in a form context, we have enhanced the datepicker to work in HTML forms through the use of ElementInternals

Fixes

• #170 Console warning for deprecated Lit-element is fixed in 1.1.0
• #171 De-dupe of multiple versions of lit packages

v1.0.2

We are live !

Storybook documentation:
https://www.webcomponent.designsystem.tech.gov.sg/

v1.0.0-rc.7

• masthead: remove extra title tag

v1.0.0-rc.4

Additional entry points added in this release :

• CDN endpoint for each component
• individual entry points for each component class and its custom element registration side-effects file

Feat

• stepper: update tabindex, add aria-current and aria-disabled
• accordion-item: remove id to prevent duplication, replace summary props with accordion-header slot, replace content with accordion-content slot
• radio: set inner to be unfocusable
• quantitytoggle: add aria-label to quantity input
• mainnav: add aria-label to brand link
• pagination: added tabbable functionality
• pagination: added watch decorator for duplicated event
• pagination: fix ellipsisJump beyond first page and last page and render the active class
• pagination: added prop ellipsisOn functionality for prev and next ellipsis
• pagination: disable click for first page on prev button and last page on next button
• pagination: allows toggling of ellipsisOn prop for next ellipsis
• pagination: added disabled ellipsis for default pagination
• pagination: added basic pagination comp
• modal: add focus to modal heading after opening
• quantitytoggle: add announcer to announce count after every increment or decrement
• quantitytoggle: update aria-label of buttons to include number of steps
• combobox: allow user to define custom filter function via filterFunction prop
• combobox: hide dropdown menu when filtered menuList has no items
• combobox: add slot to allow user to configure own form control icon
• combobox: emit sgds-change event when selected value changes
• combobox: filter menuList according to input value
• combobox: show selected item value in input box
• combobox: first commit
• progress: add progress component

Fix

• combobox: menu item should not be an anchor link based on a11y comments
• frankBuild: update main path to new umd entry point
• alert: remove default svg vertical align stylings for alert
• pagination: add nav wrapper for acc, fix tabindex rendering
• *****: lint fixes
• breadcrumb: add default value for aria-label
• accordionitem: correct accordion item padding-x
• *****: update lib endpoint in storybook
• *****: update path to combobox in components entry point
• combobox: update and fix failing test cases
• *****: import paths after updating branch
• combobox: fix bug to close menu when an item is selected
• dropdown-element: update _getMenuItems() to query slot#default
• dropdown-element: fix _getMenuItems() to correctly obtain dropdown items
• combobox: replace dropdown-item href="#" to href that does nothing
• combobox: always show dropdown when user inputs value
• combobox: fix position of label and hintText to be vertically on top of input box
• dropdown: keyboard bug
• sidenav: remove padding left
• progress-bar: remove part
• progress: remove sgds prefix
• progress: fixed pascal case
• *****: declare bootstrap typings for non typed boostrap src files

Refactor

• pagination: refactor direction button rendering
• pagination: refactor mock pagination comp for sb
• dropdown element: create dropdown-list-element from dropdown element
• combobox: remove unused styles
• combobox: conditional render dropdown menu

v1.0.0-rc.3

v1.0.0-rc.3 (2023-08-17)

New Components added

1. Datepicker

Feat

• datepicker: add reset state for closebutton
• badge: add badgeClasses prop
• stepper: add method to retrieve slot elements
• toast-container: component to position toasts
• toast: add fade animation for show and hide of toast
• alert: add alert-link and header component
• tooltip: add show method, add data-sgds-tooltip attribute for a11y purpose
• link, dropdown: add target attribute for link in dropdown item
• datepicker: added initialValueRange prop for range mode initial load
• datepicker: added datepickerClasses prop
• datepicker: add buttonClasses and inputClasses prop respectively
• datepicker: added initialValue prop functionality and button reset
• datepicker: added new datepicker comp

Fix

• footer: see description
• mainnav: slot end stylings to exclude mainnav-dropdown
• datepicker: initialValue calendar view render
• tooltip: detect attribute changes and initialize tooltip instance
• toast-container: position css token evaluation
• alert: update unit tests
• datepicker: refactor initialValue logic
• datepicker: convert initialvaluerange to initialvalue for both modes
• test: remove variant in mock dropdown
• dropdown: move resetMenu to child dropdowns and fix menuIsOpen on first load feature
• datepicker: allows calendar menu to be hidden when clicked outside el
• datepicker: initialValue and selected date highlighting with cursor pointer
• datepicker: added initialValue and isCurrentDate styling
• datepicker: fix initialValue views rendering

Refactor

• *****: add custom elements typings to HTMLEledmentTagNameMap for typescript users
• stepper, drawer, input, tab: update css property naming to convention
• datepicker: housekeeping
• datepicker: allow passing of initialValue to sync with dateFormat value
• datepicker: added watch decorator for value prop and emit change date event
• datepicker: added sgds-change-date event emitter for onload and closebutton
• datepicker: exposed sgds-change-date event with value prop
• datepicker: cleanup wip
• datepicker: change text-muted to disabled class
• stepper: remove slot and expose return component method
• toast: remove arialabel prop, write static value of aria label for close button
• toast: replace sl-icon with slots icon
• breadcrumb: jsdocs, remove separator css content in favour of slot
• dropdown: bring dropdownButton variant prop to child class
• dropdown: remove style file
• dropdown: make noFlip a state in parent class

v1.0.0-rc.2

This release introduces new components and support for users who require our components unregistered in the custom elements registry.

1. New Components released

• Tab
• Drawer

2. Scoped Elements by open-wc
   We adopted the use of scoped elements and export class components that are not yet registered in the custom element registry. This is useful for users who will be using sgds-web-component library as the building block for their own component library.
   Please see "Import" section of the documentation on how to use it.

Storybook Documentation: https://v1-0-0-rc.d1yxrtldqtp3a0.amplifyapp.com/?path=/story/getting-started-installation--page

v1.0.0-rc.1 release

Additional Components supported in this version

• Tooltip,
• Modal
• Badge
• Alert
• Breadcrumb
• Toast
• Dropdown
• Spinner

Storybook : https://v1-0-0-rc.d1yxrtldqtp3a0.amplifyapp.com/?path=/story/getting-started-installation--page

v1.0.0-rc.0

Release Candidate v1.0.0-rc.0 for sgds-web-component library
https://www.npmjs.com/package/@govtechsg/sgds-web-component/v/1.0.0-rc.0

Web components and React version of web components released are:

• Accordion
• ActionCard
• Button
• Checkbox
• Card
• FileUpload
• Footer
• Input
• Mainnav
• Masthead
• QuantityToggle
• Radio
• Sidenav
• Table
• Textarea

See Storybook documentation (temporary link)