@bigbinary/neetoui 3.7.0-beta.8 → 4.0.1

package/CHANGELOG.md

@@ -23,6 +23,268 @@ Prefix the change with one of these keywords:
 - *Fixed*: for any bug fixes.
 - *Security*: in case of vulnerabilities.
 
+## 4.0.1 - 2022-09-12
+
+- Added: `secondary` style variant
+- Added: `info` style variant
+- Removed: `inactive` style variant
+- Fixed issue with custom target in *Dropdown*
+- Fixed alignment issues in Dropdown `sizing` Story
+- Updated select styles of antd table pagination
+- Fixed Menuhorizontal button size in Table
+
+## 4.0.0 - 2022-09-02
+
+- Updated: Color palette
+- Added: CSS variables support
+- Added: Custom theming support
+- Added: Default dark theme support
+- Added: Design preview in Storybook
+- Added: Guidelines to structure content in applications
+- Changed: bundle type to `CJS`
+- Fixed: delay while opening overlays
+- Removed: `framer-motion` from dependencies.
+
+### Color palette 🎨
+
+- Updated color naming convention
+- Added CSS variables support for colors
+- Implemented dynamic color palette to support default dark mode
+- Served color codes as RBG numbers in CSS variables to achieve color transparency
+- Enhanced contrast of status color (info, success, error, warning)
+- Included existing pastel colors as the color swatches of primary, success, error, warning, and info
+- Added new set of pastel colors
+- Removed unused colors from the palette
+- Updated utility classes to match the new variable naming
+- Restructured documentation and created new documentation for color palette
+- Deprecated `neeto-ui-accent1`, `neeto-ui-accent2`, `neeto-ui-accent3`, `neeto-ui-accent4` colors and utility classes
+- Deprecated `neeto-ui-secondary-indigo`, `neeto-ui-secondary-green`, `neeto-ui-secondary-teal` colors and utility classes
+- Deprecated `neeto-ui-pastel-teal`
+- Renamed `neeto-ui-success` to `neeto-ui-success-500`
+- Renamed `neeto-ui-info` to `neeto-ui-info-500`
+- Renamed `neeto-ui-error` to `neeto-ui-error-500`
+- Renamed `neeto-ui-warning` to `neeto-ui-warning-500`
+- Renamed `neeto-ui-pastel-blue` to `neeto-ui-info-100`
+- Renamed `neeto-ui-pastel-green` to `neeto-ui-success-100`
+- Renamed `neeto-ui-pastel-yellow` to `neeto-ui-warning-100`
+- Renamed `neeto-ui-pastel-red` to `neeto-ui-error-100`
+
+### Cosmetic changes 👁
+
+#### Button
+
+- Updated primary button color to `neeto-ui-primary-500`
+- Added `:focus` rings to buttons for accessibility
+- Updated `:focus-visible` styles to match the new design
+- Updated border radius to `5px`
+- Updated CSS transition from `all .3s ease-in-out` to `all .3s linear`
+- Deprecated variants story in Storybook doc
+- Created independent stories for `Styles`, `Sizes`, `Icon only` etc
+
+#### Checkbox
+
+- Replaced checked state icon with neetoIcon
+- Updated checked state color to `neeto-ui-primary-500`
+- Changed default state border color from `grey 300` to `grey 400`
+- Updated `:hover` border color to `grey 500`
+- Updated `:focus-visible` border color to `neeto-ui-primary-500`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Improved spacing in component
+
+#### Radio
+
+- Replaced checked state icon with neetoIcon
+- Updated checked state color to `neeto-ui-primary-500`
+- Changed default state border color from `grey 300` to `grey 400`
+- Updated `:hover` border color to `grey 500`
+- Updated `:focus-visible` border color to `neeto-ui-primary-500`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Improved spacing in component
+
+#### Input
+
+- Updated border-radius to `5px`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Fixed unwanted spacing in maxLength label
+- Fixed alignment issues in Input with maxLength and no label text
+- Fixed spacing inconsistencies in error test and helper text - used same margin value for both
+- Fixed alignment issues in naked inputs
+- Deprecate `variants` story in Storybook and created individual stories for `Input sizing`
+
+#### Textarea
+
+- Updated border-radius to `5px`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Fixed unwanted spacing in the maxLength label
+- Fixed alignment issues in Input with maxLength and no label text
+- Fix spacing inconsistencies in error test and helper text - used the same margin value for both
+- Fixed alignment issues in naked inputs
+- Added size prop to Textarea
+
+#### Select
+
+- Updated border-radius to `5px`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Replaced the default dropdown icons with neetoIcons
+- Added CSS transition to the select options
+- Applied Badge styles to Multi select items
+- Replaced multivalue remove icon with neetoIcon
+- Updated multivalue error styles
+- Increased Story heights for better view
+
+#### Email input
+
+- Updated border radius to `5px`
+- Updated selected values styles to match Tag styles
+- Fixed prefix and suffix spacing
+- Updated prefix icon size to `16px`
+- Updated focus ring styles to match `neeto-ui-primary` color
+- Fixed spacing issues in counter
+- Fixed alignment issues in label row
+- Fixed spacing inconsistencies in error test and helper text - used same margin for both
+- Updated error styles of multivalue select
+
+#### Label
+
+- Updated label bottom margin to 8px
+- Removed letter-spacing in label text
+
+#### Dropdown & Action Dropdown
+
+- Updated border-radius to `5px`
+- Reduced the height of Dropdown options to `32px`
+- Created Storybook examples with semantic markup for easy keyboard win
+- Separated Delete/Remove actions with a border
+- Updated `box-shadow`
+
+#### Date Time picker
+
+- Replaced default icons with neetoIcons
+- Updated selection color to `neeto-ui-primary`
+- Added border to date and time dropdown
+- Updated box shadow of dropdown
+
+#### Accordion
+
+- Updated font weight of Accordion title to `500`
+- Updated `border-radius` to `8px`
+
+#### Avatar
+
+- Updated background colors to new pastel colors
+- Updated square variant `border-radius` to `5px`
+
+#### Table
+
+- Updated column title color to `grey 600`
+- Updated column title font weight to 700
+- Reduced cell padding from `12px 16px` to `8px 16px` to accommodate more number of row in a given height
+- Removed border from pagination items
+- Updated pagination buttons to match neetoUI button style
+- Updated active pagination item styles to `neeto-ui-primary`
+- Replaced default icons with neetoIcons
+
+#### PageLoader
+
+- Updated neeto logo
+
+#### Color picker
+
+- Added border to input
+
+#### Alert & Modal
+
+- Reduced outer padding from `32px ` to `24px` to provide the compact view
+- Updated `border-radius` to `12px`
+
+#### Toast
+
+- Applied `48px` minimum height
+- Applied dark theme to all variants
+- Reduced text font weight to `400`
+
+#### Tooltip
+
+- Changed box shadow of light theme variant to `--neeto-ui-shadow-s`
+
+#### Sidebar
+
+- Increased width from `64px` to `72px`
+- Changed background color from `neeto-ui-gray-200` to `neeto-ui-white`
+- Added border on the right side
+- Updated `padding-top` and `padding-bottom` to `24px`
+
+### Functionality changes 🛠️
+
+#### Input
+
+- Changed: `maxlength` prop logic to allow typing characters beyond the specified maxlength. The character count will be shown only when the input length reaches 90% of maxlength and changes the state to error when input exceeds the maxlength
+
+#### TextArea
+
+- Changed: `maxlength` prop logic to allow typing characters beyond the specified maxlength. Character count will be shown only when the input length reaches 90% of maxlength and changes the state to error when input exceeds the maxlength
+
+#### Dropdown
+
+- Changed: **BREAKING** Renamed `ulProps` prop to `dropdownProps`
+- Added: `buttonSize` prop
+
+#### ActionDropdown
+
+- Changed: **BREAKING** Renamed `size` prop to `buttonSize`
+- Changed: **BREAKING** Renamed `style` prop to `buttonStyle`
+
+#### Tag
+
+- Changed: **BREAKING** Renamed `style` prop to `type`
+- Removed: **BREAKING** Renamed `color` and `indicatorColor` props
+- Added: **BREAKING** `style` and `indicatorStyle` props with options `"success" | "warning" | "danger" | "primary" | "inactive"`
+
+#### ColorPicker
+
+- Added: `Size` prop
+
+#### Typography
+
+- Added: new variant **nano**
+
+#### Modal
+
+- Added: `description` prop in header
+- Added: `initialFocusRef` and `finalFocusRef` to programmatically add focus to custom components.
+- Added: `blockScrollOnMount` prop to enable/disable body scrolling when the modal opens.
+- Added: focus trapping to focusable elements in Modal.
+
+#### Sidebar
+
+- Removed: **BREAKING** `footerLinks` props
+- Removed: **BREAKING** `isCollapsed` prop and **expanded state** of sidebar
+
+## 3.5.17 - 2022-08-25
+
+- Fixed: false positive type errors for tooltip
+
+## 3.5.16 - 2022-08-17
+
+- Changed: avoided showing duplicate toastr when called multiple times with the same arguments.
+
+## 3.5.15 - 2022-08-05
+
+- Fixed: Fixed false positive ts errors which were thrown since some of the fields were not marked optional.
+
+## 3.5.14 - 2022-08-01
+
+- Added: neetoTestify and neetoSite to AppSwitcher
+
+## 3.5.13 - 2022-07-28
+
+- Added: type support for all exported components. IDE will now auto-predict the component props.
+- Changed: Deprecated babel-eslint was replaced with @babel/eslint-parser
+
+## 3.5.12 - 2022-07-25
+
+- Security: Bump moment from 2.29.3 to 2.29.4
+
 ## 3.5.11 - 2022-07-06
 
 - Added: a *Button* component in neetoui/formik that automatically disables itself if the form is not in a submittable state. Example: the form contains any invalid data, the form content has not been changed, or the form is already being submitted. To make this work, you need to import *Button* from "neetoui/formik" as your submit button.

package/README.md

@@ -69,4 +69,4 @@ https://neetoui.onrender.com
 ## Other Libraries
 
 - [neetoIcons](https://github.com/bigbinary/neeto-icons): **NeetoIcons** is the official icons library from BigBinary.
-- [neetoUtils](https://github.com/bigbinary/neeto-utils): **NeetoUtils** is a collection of react hooks and utility functions used at BigBinary.
+- [neetoEditor](https://github.com/bigbinary/neeto-editor-tiptap): **NeetoEditor** is a prose-mirror based rich-text editor used at BigBinary.

package/formik.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import {
+  Input as PlainInput,
+  Radio as PlainRadio,
+  Switch as PlainSwitch,
+  Textarea as PlainTextarea,
+  Checkbox as PlainCheckbox,
+  Select as PlainSelect,
+  EmailInput as PlainEmailInput,
+  Button as PlainButton,
+  ButtonProps,
+} from "./index";
+
+export interface ActionBlockProps {
+  className?: string;
+  submitButtonProps?: ButtonProps;
+  cancelButtonProps?: ButtonProps;
+}
+export interface BlockNavigationProps {
+  isDirty?: boolean;
+}
+
+export const ActionBlock: React.FC<ActionBlockProps>;
+export const BlockNavigation: React.FC<BlockNavigationProps>;
+
+export const Input: typeof PlainInput;
+export const Radio: typeof PlainRadio;
+export const Switch: typeof PlainSwitch;
+export const Textarea: typeof PlainTextarea;
+export const Checkbox: typeof PlainCheckbox;
+export const Select: typeof PlainSelect;
+export const EmailInput: typeof PlainEmailInput;
+export const Button: typeof PlainButton;