# CHANGELOG: @instawork/design-system ## 4.9.0 - 08/07/2024 - Applied background color on html to ensure entire page has the same base background color ## 4.7.0 - 03/18/2024 - Synced latest published changes from Figma to design-system [PR](https://github.com/Instawork/design-system/pull/193). - Import IWDS colors into theme ## 4.7.0 - 02/23/2024 - Synced latest published changes from Figma to design-system [PR](https://github.com/Instawork/design-system/pull/193) ## 4.6.1 - 02/05/2024 - fix border color for invalid unchecked pills - fix `.bg-primary-dark` for marketing theme ## 4.6.0 - 08/30/2023 - `.full-bleed` modifier for cards - Add support for left, up and right opening dropdowns-dots - Semantic dark colors for bg ## 4.5.1 - 06/22/2023 - `.font-serif` for applying serif font face - Add support for `disabled` state in form-tag - Banner updates to support all theme colors - Marketing theme based on the new brand guidelines - More semantic components - MVP version of `.slide` component - Update swatches to use the new design-system colors - Separate out primary and accent color terminology - Update color vars to use consistent names - Update demo to use new semantic classes - Add header font sizes to the demo - Fix broken fonts on the [design site](design.instawork.com) ## 4.4.2 - 04/05/2023 - Upgraded luxon and made updates to handle breaking changes due to this package upgrade ## 4.3.3 - 02/01/2023 - Fix entry point with new directory structure ## 4.3.2 - 02/01/2023 - Fix packaging and move css into subdirectory so fonts are referenced correctly ## 4.3.1 - 02/01/2023 - Fix to prevent path resolution for url() references in css ## 4.3.0 - 01/10/2023 - Add semantic "light" variants for `.bg`, `.highlight`, and `.badge` components - Fix `.floating-label` for `.custom-select` - Add microinteraction to links with a `.link-hover` modifier - Added new `.banner` component with semantic variants for all theme colors and "light" variants ## 4.2.1 - 10/31/2022 - Fix CTA colors in the marketing theme - Improve alert-collapsible handling ## 4.2.0 - 10/14/2022 Lay the foundation for css-theming. - Use css vars for theming the design system components - Align components to the new color scheme - Introduce scss wrappers for css vars - Override "primary" themes for bg, button, and other components ## 4.1.0 - 10/06/2022 - Streamline supported colors - Fix up colors, and bring naming in sync with the design system - Reduce the text options to make it easier to move to semantic names - Add focus borders on buttons & links using `:focus-visible` to improve a11y - Add `.custom-tag-control-sm` modifier for small form tags - Add `.form-control-xl` modifier for extra-large input boxes - Handle collapsible alerts in a better way ## 4.0.0 - 09/19/2022 Revamp styles to implement the new design language - Define new color scheme in `_colors.scss` - Only partially mapped to the old colors (❗️ breaking change) - Add shadows to `.cards` (and a `.flat` class to remove the shadow) - Add `.interactive` modifier to `.cards` which enables form validation states - Add focus, error and success shadows to standard inputs - Add focus, error and success shadows to custom controls (radio, checkbox, tag, etc) - Update button sizes across all variants - Add `.chip` component - Add `.form-floating` modifier to enable floating labels for select & input elements - Use scss variables extensively in custom styles - Use rem instead of px ## 3.21.0 - 08/19/2022 - Moved component styles to individual files in scss/components/ ## 3.20.0 - 7/7/2022 - Added default `:focus-visible` pseudo-class selector to buttons for tab selection highlighting. ## 3.19.0 - 7/1/2022 - Added `:focus-visible` pseudo-class selector to buttons for tab selection highlighting. ## 3.18.0 - 6/29/2022 - Added missing icon classes (manually generated for now). ## 3.17.0 - 6/23/2022 - Add new highlights design (for use as nudges). ## 3.16.0 - 6/15/2022 - Add new alert classes in css (primary,secondary,dark,light). ## 3.15.0 - 2/10/2022 - Add support for avatar pro-level rings for avatars (for new shift list design). ## 3.14.0 - 2/7/2022 - No changes, published due to versioning mistake ## 3.9.0 - 1/31/2022 - Add support for a new Pie Fill component that can be filled based on the given percentage. ## 3.8.0 - 1/31/2022 - Add support for all IW colors as text colors. - Add `gray` badge styles ## 3.7.0 - 8/13/2021 - Add `bronze`, `silver` and `platinum` pro level badges styles ## 3.6.0 - 7/20/2021 - Add `max` attribute option to `TimeRangeComponent` to prevent incorrectly incrementing dates of start or end values past a valid time - Bump Luxon to 1.28.0 ## 3.5.0 - 5/13/2021 - Add `avatar-xxxxl` size to support Falcon using the `user_avatar` template tag ## 3.4.0 - 4/19/2021 ### NestedInputComponent - add `show-disabled-value` attribute, which allows the value to continue being shown when the component is disabled ### TimeInputComponent - update hour part styling to not align left when disabled and `show-disabled-value` is set ## 3.3.0 - 4/16/2021 - Add `SelectAllComponent` - "indeterminate"- enabled checkbox component that controls the checked state of matched checkbox inputs ## 3.2.0 *skipped due to NPM publishing issues* ### TimeInputComponent - Improve empty state support - add support for multi-part placeholders - remove error thrown when incrementing a part value from no value - allows using arrow keys to increment/decrement an empty part ## 3.1.0 - 3/22/2021 - `TimeRangeComponent`: add `auto-adjust` attribute to allow disabling the functionality that automatically increments or decrements the date of the time component when times are selected that would put the end before the start ## 3.0.0 - 3/18/2021 ### Components - Refactor source code to TypeScript - Package name is now `@instawork/design-system` - Add `@instawork/testing` sub-project and package to expose `DomTesting` and related utilities - Add configuration and scripting to support publishing to the npm registry - First versions published to the npm registry - Add `initComponents` helper to assist in loading and initializing component plugins in the required order **Breaking Changes** - Plugin initialization: to prevent side effects on component modules, jQuery plugins must be registered within the static `loadPlugin` function instead of extending the `$.fn` object within the base module - `CustomInputComponent` - lifecycle hooks have changed, what was previously done in `initDom` may need to be moved to `initDomRefs` - `TimeInputComponent` - it is now possible for `luxonValue` to have an invalid value given invalid input - `undefined` is now reserved for completely empty input ### `CustomComponent` - Automatically initialize the component's template if specified via `TEMPLATE` static property - Add helper methods for creating attribute validation errors ### `CustomInputComponent` - Add `hasFocus` and `required` properties ### `NestedInputComponent` - Updated and added lifecycle hooks - Add passthrough accessors for HTML validation API members ### `TemporalComponent` - Base class containing shared logic for time-based components - Use HTML validation API to report validation errors ### `TimeInputComponent` - Refactor to subclass `TemporalComponent` - Improve handling of invalid values and partial or missing input ### `TimeSelectorComponent` - Initial implementation - Similar to `TimeInputComponent`, but based on a `