Updates

Changelog

Discover the latest updates, enhancements and bug fixes

v1.6.0May 11, 2024

🚀 Prismane Version 1.6.0

🧾 Release Notes

This new version introduces new props and features to components and hooks and provides numerous improvements and bug fixes throughout the codebase.

💎 Improvements

Components

- Portal: Improved performance by reducing unnecessary use of hooks.
- Table: The table now occupies the entire width of its parent.
- Dialog: Improved default animations by making them related to the value of the position prop.
- Field: Every field component now occupies the entire width of its parent.
- Menu: Improved spacing of Menu.Label by providing a margin when the label isn't the first child in the menu container.

✨ New

Components

- Progress: Now can change its color using the color prop.
- Table:
- - Now can change the lines between the columns and rows using the lines prop.
- - Now can toggle the table border using the bordered prop.
- - Now can make the table appear as 'striped' using the striped prop.
- - Now can automatically change the padding and font-size of the table using the size prop, making the table appear smaller or bigger.
- Tabs: Now each Tabs.Tab can be disabled using the disabled prop.
- Spinner: Now the color of the spinner can be changed using the color prop.
- TextareaField: Now can be resized using the resize prop.
- All:
- - The fs prop now supports both Prismane's predefined values and any other valid value for the font-size CSS property.
- - The fw prop now supports both Prismane's predefined values and any other valid value for the font-weight CSS property.

Hooks

- useClickOutside: Now accepts a third parameter - an array of DOM event names that will trigger the callback. By default, the hook listens for mousedown and touchstart events.

🐛 Bug Fixes

- Table: Fixed a border appearing above the Table.Head component.
- TextField: Fixed an issue where the prefix wasn't shown properly, due to prop inheritance.

v1.5.1May 8, 2024

🚀 Prismane Version 1.5.1

🧾 Release Notes

This new version fixes multiple issues across field components, styling issues, type issues, and some functionality issues.

🐛 Bug Fixes

Components

- NativeSelectField: Fixed the functionality of the disabled and readOnly props.
- NumberField: Fixed the functionality of the disabled and readOnly props.
- PinField: Fixed the functionality of the disabled and readOnly props.
- SelectField:
- - Fixed the functionality of the disabled and readOnly props.
- - Fixed an issue where the dropdown container made the field higher than others.
- SegmentedField: Fixed the functionality of the disabled and readOnly props.
- NativeDateField: Fixed the functionality of the disabled and readOnly props.
- PasswordField:
- - Fixed the functionality of the disabled and readOnly props.
- - Fixed an issue where the hidden input obstructed the layout of the fields.
- - Fixed an issue where only a given set of properties were passed to each field.
- TextField: Fixed the functionality of the disabled and readOnly props.
- TextareaField: Fixed the functionality of the disabled and readOnly props.
- Button:
- - Fixed inconsistent background color on secondary variant in dark mode.
- - Fixed the border color when having a variant of tertiary and the button is hovered.
- Transition: Fixes an issue where the property prop did not change the transition-property style.
- Menu: Fixed an issue where the menu was not scrollable if it exceeded a given height.

Typescript

- Accordion.Icon: Fixed the prop type for the active parameter of the children prop if provided as a function.
- Container: Fixed the prop type for the maxSize prop to allow any valid numeric or string value too.
- Gradient: Fixed the prop types for the from, to, and deg props making them not required.
- Grid: Fixed the prop types for the templateColumns and templateRows props.
- AutocompleteField: Fixed the prop type for the function passed to the filter prop.
- Fixed the type of the sx prop.

v1.5.0March 22, 2024

🚀 Prismane Version 1.5.0

🧾 Release Notes

This new version introduces new props and features to components and provides numerous improvements and bug fixes throughout the codebase.

💎 Improvements

Components

- Badge: Improved badge positions.
- Button: Loading state spinner is now shown as an icon, without removing the button's text, and now has a smaller stroke width.
- Form: Removed type declarations for onSubmit and onReset props as they conflicted with default ones.
- Alert: Custom actions passed to the action prop now close the alert.

Hooks

- useForm: Improved error handling that provides concise error messages.

✨ New

Components

- Text: Now has predefined colors and respects the current theme mode.
- Radio.Group: Now can show a label and error for the whole group using the newly added label and error props.
- Checkbox: Now can replace the default icon using the newly added icon prop.
- Grid: Now can handle grid-template-areas using the newly added templateAreas prop.
- Grid.Item: Now can handle grid-area using the newly added area prop.
- All: Now the theme object is passed to all properties of the sx prop, not only top-level ones, including media queries, pseudo-classes, and more.

TypeScript

- Added CSS type declarations to all Styling Props of Prismane.

🐛 Bug Fixes

- TextareaField: Fixed layer classNames not following the naming convention.
- Grid.Item: Fixed an issue with the columnSpan and rowSpan props.

v1.4.3February 26, 2024

🚀 Prismane Version 1.4.3

🧾 Release Notes

This new version fixes multiple very important styling issues and fixes type declaration conflicts.

🐛 Bug Fixes

Components

- Dialog: Fixed dialog closing when clicked inside.
- Container: Fixed maxSize prop type to support sizes up to 6xl.
- Button: Fixed border-radius not scaling consistently on larger sizes.
- Button: Fixed inconsistent background color on secondary variant in light and dark theme mode.
- Checkbox: Fixed indeterminate state not being shown if the checkbox is not checked.

Typescript

- Fixed TypeScript type declaration conflicts with JSDoc comments by removing all JSDoc comments.

v1.4.2January 8, 2024

🚀 Prismane Version 1.4.2

🧾 Release Notes

This new version fixes issues with the Toast component and the autocomplete color on all fields.

🐛 Bug Fixes

- Toast: Fixed toasts not being removed from DOM after hiding.
- All Fields: Fixed color after autocompleting on Chrome-based browsers.

v1.4.1December 11, 2023

🚀 Prismane Version 1.4.1

🧾 Release Notes

This new version fixes an important issue with the checkable fields' labels. Before this version, label font-sizes were not proportional to checkbox sizes in larger sizes.

🐛 Bug Fixes

- Checkbox: Fixed label font-size on larger sizes.
- Switch: Fixed label font-size on larger sizes.
- Radio: Fixed label font-size on larger sizes.

v1.4.0November 27, 2023

🚀 Prismane Version 1.4.0

🧾 Release Notes

This new version provides 3 new components and a new hook. The components help in achieving semantic HTML and the hook automatically switches between values for dark and light mode.

✨ New

Hooks

- useThemeModeValue: This hook simplifies the logic for using two style properties for dark and light modes.

Components

- Main: This component renders a main element, helping to achieve semantic HTML.
- Header: This component renders a header element, helping to achieve semantic HTML.
- Footer: This component renders a footer element, helping to achieve semantic HTML.

v1.3.1October 31, 2023

🚀 Prismane Version 1.3.1

🧾 Release Notes

This new version fixes an important issue in the useFocusTrap hook, which didn't search in-depth for the focusable element when a data-initialfocus attribute is used. Thus meaning that if for example a complex input component is used and the data-initialfocus attribute is passed to the wrapper, the hook would try to focus the wrapper. Also the issue where the isOpen boolean didn't toggle the hook is fixed with this version. This version also fixes a small bug in the TextField component, which passed the rest of the props to the label, instead of the wrapper.

🐛 Bug Fixes

- useFocusTrap: Fixed in-depth search for focusable element and hook toggling.
- TextField: Fixed spread of props onto wrapper instead of label.

v1.3.0October 30, 2023

🚀 Prismane Version 1.3.0

🧾 Release Notes

This new version provides 5 new hooks and improvements. These hooks significantly help in providing a better user experience and simplify handling big sets of data.

💎 Improvements

- Dropdown is hidden on selectable fields when no options are available.

✨ New

- useFocusTrap: This hook traps the user's focus by focusing the first focusable element in a given container or a specific element instead.
- useNetworkStatus: This hook provides an easy way of handling changes in the internet connection.
- useScroll: This hook provides a set of tools that simplify handling scrolling.
- useSorting: This hook simplifies sorting big chunks of data by key and direction.
- useSearch: This hook provides an easy way to search through different types of data.

v1.2.1October 3, 2023

🚀 Prismane Version 1.2.1

🧾 Release Notes

This release fixes important bugs and introduces small improvements.

💎 Improvements

- Changed Tabs.Tab component background on hover to a lighter color when the theme is in light mode
- Date validators have improved target date format that results in a shorter and more readable message

🐛 Bug Fixes

- Fixed Radio component not being able to be toggled after a few clicks

v1.2.0October 2, 2023

🚀 Prismane Version 1.2.0

🧾 Release Notes

This release introduces an impressive set of 21 new form validators. These additions encompass a diverse range of validators for strings, numbers, and dates, further enriching Prismane's comprehensive validator list.

✨ New

String Validators

- uuid: This validator checks if a string is a valid id.
- trimmed: This validator checks if a string has no more than one consecutive spaces.
- uppercase: This validator checks if a string has only uppercase characters.
- lowercase: This validator checks if a string has only lowercase characters.
- alphanumeric: This validator checks if a string has only alphanumeric characters.
- starts: This validator checks if a string starts with a given substring.
- ends: This validator checks if a string ends with a given substring.
- contains: This validator checks if a string contains a given substring.
- substring: This validator checks if a string is a substring of a given string.
- regex: This validator checks if a string matches a regular expression pattern.

Number Validators

- less: This validator checks if a number is less than a given number.
- more: This validator checks if a number is more than a given number.
- positive: This validator checks if a number is positive.
- negative: This validator checks if a number is negative.
- between: This validator checks if a number is between an interval of two numbers.
- multiple: This validator checks if a number is a multiple of a given number.

Date Validators

- before: This validator checks if a date is before a given date.
- after: This validator checks if a date is after a given date.
- future: This validator checks if a date is in the future.
- past: This validator checks if a date is in the past.

Validate Function

The validate function is used to asynchronously validate a given set of validators and on the first occurrence of an error, to return the returned error.

v1.1.0September 25, 2023

🚀 Prismane Version 1.1.0

🧾 Release Notes

This release introduced two new hooks. The useCopyToClipboard and usePresence hooks. The useCopyToClipboard provides a simple and effective way to handle copying to the clipboard. The usePresence hook provides a simple way to await an element's animation, before removing it from the DOM and vice versa.

✨ New

- Introduced useCopyToClipboard hook
- Introduced usePresence hook

v1.0.2September 17, 2023

🚀 Prismane Version 1.0.2

🧾 Release Notes

This release fixes a very important issue that occured when we extended a component that had the same prop as the component that we were building. This resulted in incorrect prop types and TypeScript error. This issue has now been fixed and all of the overlapping props are being removed in favor of the props in the component that we are building.