diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3408b521a..eaaedc0fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,6 @@
** Represent a version as second level heading and write the version number inside a square bracket, eg: ## [3.3.2]
--->
-
# Changelog
All notable changes to this project will be documented in this file.
@@ -17,17 +16,29 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
Each change is prefixed with one of these keywords::
-- _Added_: Describes new features.
-- _Changed_: Highlights modifications to existing functionality.
-- _Deprecated_: Marks features that will be removed in the future.
-- _Removed_: Indicates features that have been taken out.
-- _Fixed_: Denotes bug fixes.
-- _Security_: Pertains to actions taken in response to vulnerabilities.
+- *Added*: Describes new features.
+- *Changed*: Highlights modifications to existing functionality.
+- *Deprecated*: Marks features that will be removed in the future.
+- *Removed*: Indicates features that have been taken out.
+- *Fixed*: Denotes bug fixes.
+- *Security*: Pertains to actions taken in response to vulnerabilities.
-## 6.5.11 - 2024-04-11
+## 6.5.13 - 2024-04-16
+
+Fixes the occasional scrollbar that appears when the input height is calculated based on the content in the value change handler.
+
+## 6.5.12 - 2024-04-15
-Fixed: `antd` Datepicker not validating minDate and maxDate on input date
-changes.
+- Added: Customizable border to Popover arrow.
+
+
+
+
+
+Darkmode
+
+## 6.5.11 - 2024-04-11
+Fixed: `antd` Datepicker not validating minDate and maxDate on input date changes.
## 6.5.10 - 2024-04-11
@@ -48,7 +59,7 @@ Fixed: DatePicker unable to switch to different month or year.
## 6.5.3 - 2024-03-27
-Added: Styles for _ActionBlock_ wrapper
+Added: Styles for *ActionBlock* wrapper
## 6.5.2 - 2024-03-27
@@ -62,13 +73,11 @@ Added: `bulkSelectAllRowsProps` for tables to allow selecting all rows for multi
## 6.4.0 - 2024-03-21
Added: minDateTime and maxDateTime prop.
## 6.3.10 - 2024-03-20
-
While changing the page for multi-paged table, the selected rows will not be
deselected.
-
## 6.3.9 - 2024-03-20
-- Added: Support for overriding the dropdown props in the _ColorPicker_
+- Added: Support for overriding the dropdown props in the *ColorPicker*
component so that it can be further customised.
## 6.3.8 - 2024-03-13
@@ -83,7 +92,7 @@ deselected.
- Added: support for resize, suffix, prefix and sizing for textarea.
-@ajmaln \_a Please review.
+@ajmaln _a Please review.
## 6.3.5 - 2024-03-06
@@ -107,6 +116,7 @@ After
+
---
Before
@@ -246,9 +256,7 @@ Added: `Add` button in *Select*
Added: *Stepper* component.
## 5.2.27 - 2023-11-08
Changed: Updated instances of `@reach/autoid` with React `useId`
-
## 5.2.26 - 2023-11-08
-
- Changed: pagination button size from `32px` to `28px`.
- Changed: reduced pagination margin top and margin bottom values to make it
more compact.
@@ -280,7 +288,7 @@ Added: Support for lazy loading for the `Select` component
## 5.2.17 - 2023-10-24
-Added: New _TreeSelect_ component.
+Added: New *TreeSelect* component.
## 5.2.15 - 2023-10-23
@@ -360,11 +368,11 @@ Fixed: scroll to error is not triggered on submitting form with enter key.
## 5.1.8 - 2023-08-24
-Added `type = "button"` attribute to _Tab.Item_ component
+Added `type = "button"` attribute to *Tab.Item* component
## 5.1.7 - 2023-08-21
-Added: `rejectCharsRegex` prop to _Input_ component.
+Added: `rejectCharsRegex` prop to *Input* component.
## 5.1.6 - 2023-08-17
@@ -373,11 +381,11 @@ Added: `rejectCharsRegex` prop to _Input_ component.
## 5.1.5 - 2023-08-08
-- Added: `initialFocusRef` prop to _Alert_
+- Added: `initialFocusRef` prop to *Alert*
## 5.1.4 - 2023-08-04
-- Fixed: Handled dot paths in _ScrollToErrorField_.
+- Fixed: Handled dot paths in *ScrollToErrorField*.
## 5.1.3 - 2023-08-02
@@ -389,7 +397,7 @@ Added: `rejectCharsRegex` prop to _Input_ component.
## 5.1.1 - 2023-08-02
-- Fixed: issue with onClose in _Dropdown_ not getting called on trigger click.
+- Fixed: issue with onClose in *Dropdown* not getting called on trigger click.
## 5.1.0 - 2023-08-02
@@ -417,15 +425,15 @@ Fixed warnings in jest tests.
## 5.0.12 - 2023-06-29
-- Changed: Default value of`scrollToErrorField` prop of formik _Form_ to false.
+- Changed: Default value of`scrollToErrorField` prop of formik *Form* to false.
## 5.0.11 - 2023-06-27
-- Added: `hasScrollToErrorField` prop to formik _Form_ component.
+- Added: `hasScrollToErrorField` prop to formik *Form* component.
## 5.0.10 - 2023-06-20
-- Removed: condition to disable _FormikButton_ when the form is invalid.
+- Removed: condition to disable *FormikButton* when the form is invalid.
## 5.0.9 - 2023-06-17
@@ -446,30 +454,30 @@ Fixed warnings in jest tests.
## 5.0.6 - 2023-06-06
-- Fixes janky animation in _Pane_ when form fields have the `autoFocus` prop.
+- Fixes janky animation in *Pane* when form fields have the `autoFocus` prop.
## 5.0.5 - 2023-06-05
Added: `optionRemapping` prop to map the label and value properties of `options`
-prop in _Select_ component.
+prop in *Select* component.
## 5.0.4 - 2023-05-29
- Fixed: Overrided `onChange` function to output empty array if value is null in
- _DatePicker_
+ *DatePicker*
## 5.0.3 - 2023-05-29
- Fixed: the issue of filter invalid emails link for valid emails in
- _MultiEmailInput_ component
+ *MultiEmailInput* component
## 5.0.2 - 2023-05-23
-- Added: `required` prop to _MultiEmailInput_.
+- Added: `required` prop to *MultiEmailInput*.
## 5.0.1 - 2023-05-07
-- Added: resize and reorder columns functionality to _Table_ component.
+- Added: resize and reorder columns functionality to *Table* component.
## 5.0.0 - 2023-04-28
@@ -487,7 +495,7 @@ Removed following components from `neetoui`:
## 4.4.27 - 2023-04-24
-- Added: `unlmitedChars` prop to _Input_ and _Textarea_ and reverted the
+- Added: `unlmitedChars` prop to *Input* and *Textarea* and reverted the
behaviour of maxlength prop to the native one.
## 4.4.26 - 2023-04-14
@@ -509,7 +517,7 @@ Removed following components from `neetoui`:
## 4.4.22 - 2023-04-04
-Added: Support for children array in _Tooltip_ component.
+Added: Support for children array in *Tooltip* component.
## 4.4.21 - 2023-03-28
@@ -526,11 +534,11 @@ Added: `children` prop for button and tag components
## 4.4.18 - 2023-03-24
- Changed: -the default row size to 30 and hidden the page size changer in the
- _Table_ component.
+ *Table* component.
## 4.4.17 - 2023-03-22
-- Fixed: weird behavior or create new option in _MultiEmailInput_.
+- Fixed: weird behavior or create new option in *MultiEmailInput*.
## 4.4.16 - 2023-03-20
@@ -552,15 +560,15 @@ Added terser plugin to rollup config to minimise bundle size.
## 4.4.12 - 2023-03-15
-This PR adds the following changes to the _Switch_ component.
+This PR adds the following changes to the *Switch* component.
-- Added `forwardRef` to the _Switch_ component so that it supports adding
- _Tooltip_ to it, as per this
+- Added `forwardRef` to the *Switch* component so that it supports adding
+ *Tooltip* to it, as per this
[guide](https://github.com/atomiks/tippyjs-react#component-children).
## 4.4.11 - 2023-03-14
-- Added: `liveChat` prop to _HelpSection_ component.
+- Added: `liveChat` prop to *HelpSection* component.
- Added: data-cy to `helpLink` prop.
- Changed: label into an optional value in LinkType.
@@ -990,9 +998,9 @@ Changes documentations to sentence case from title casing.
- Added: new variant **nano**
#### Modal
- Added: `description` prop in header
-- Added: `initialFocusRef` and `finalFocusRef` to programmatically add focus to
+- Added: `initialFocusRef` and `finalFocusRef` to programmatically add focus to
custom components.
-- Added: `blockScrollOnMount` prop to enable/disable body scrolling when the
+- Added: `blockScrollOnMount` prop to enable/disable body scrolling when the
modal opens.
- Added: focus trapping to focusable elements in Modal.
#### Sidebar
@@ -1026,15 +1034,13 @@ Changes documentations to sentence case from title casing.
- Fixed: issue with closeOnEsc prop when the Pane is controlled.
## 3.5.9 - 2022-07-05
- Fixed: Checkbox in *Table* component cut off in lower screen resolutions.
-
## 3.5.8 - 2022-07-01
-
- Fixed: Error when handling `axios` error objects with `undefined` response in
`Toastr.error`
## 3.5.7 - 2022-06-24
-- Added: `startsFrom` to `counter` prop of _EmailInput_ component.
+- Added: `startsFrom` to `counter` prop of *EmailInput* component.
## 3.5.6 - 2022-06-13
@@ -1042,20 +1048,20 @@ Changes documentations to sentence case from title casing.
## 3.5.5 - 2022-06-09
-- Fixed: issue with `onClose` function reference when closing the _Modal_ using
+- Fixed: issue with `onClose` function reference when closing the *Modal* using
`Esc`.
## 3.5.4 - 2022-06-08
-Fixed: `TypeError` issue in _Toastr_ component.
+Fixed: `TypeError` issue in *Toastr* component.
## 3.5.3 - 2022-06-07
-- Fixed: issue with `closeOnEsc` prop when the _Dropdown_ is controlled.
+- Fixed: issue with `closeOnEsc` prop when the *Dropdown* is controlled.
## 3.5.2 - 2022-06-07
-- Fixed : placeholder content extending into multiple lines in _Select_
+- Fixed : placeholder content extending into multiple lines in *Select*
component.
## 3.5.1 - 2022-06-07
@@ -1076,22 +1082,22 @@ Fixed: `TypeError` issue in _Toastr_ component.
## 3.4.3
-- Added: `prefix` and `suffix` to _EmailInput_.
+- Added: `prefix` and `suffix` to *EmailInput*.
## 3.4.2
-- Fixed: issue with search not working with `isCreatable` _Select_.
+- Fixed: issue with search not working with `isCreatable` *Select*.
## 3.4.1
-- Fixed: issue with `autoFocus` not working on _Input_ when inside _Dropdown_.
+- Fixed: issue with `autoFocus` not working on *Input* when inside *Dropdown*.
## 3.4.0
- Removed: all instances of TailwindCSS.
-- Added: `label` prop in _Tags_ molecule.
-- Changed: Added `neetoCal` into _AppSwitcher_ app list .
-- Removed: `count` limiting (to 99) logic from _MenuBar.Block_.
+- Added: `label` prop in *Tags* molecule.
+- Changed: Added `neetoCal` into *AppSwitcher* app list .
+- Removed: `count` limiting (to 99) logic from *MenuBar.Block*.
## 3.3.13
@@ -1099,20 +1105,20 @@ Fixed: `TypeError` issue in _Toastr_ component.
## 3.3.12
-- Fixed: loading state in _ActionBlock_ component.
+- Fixed: loading state in *ActionBlock* component.
## 3.3.11
-- Added: New input format for the _EmailInput_ component.
+- Added: New input format for the *EmailInput* component.
## 3.3.10
-- Fixed: Removed unnecessary scrollbar in _Table_ component.
-- Added: `maxHeight` prop to the _EmailInput_ component.
+- Fixed: Removed unnecessary scrollbar in *Table* component.
+- Added: `maxHeight` prop to the *EmailInput* component.
## 3.3.9
-- Fixed: _ActionDropdown_ issues with common props for button and dropdown
+- Fixed: *ActionDropdown* issues with common props for button and dropdown
## 3.3.7
@@ -1120,47 +1126,47 @@ Fixed: `TypeError` issue in _Toastr_ component.
## 3.3.6
-- Fixed: Reset Formik data on continue action in _BlockNavigation_ component.
+- Fixed: Reset Formik data on continue action in *BlockNavigation* component.
## 3.3.5
-- Added: active state to `NavLink` in _Sidebar_ component.
+- Added: active state to `NavLink` in *Sidebar* component.
## 3.3.4
-- Added: `hideOnTargetExit` prop to _Tooltip_ component
+- Added: `hideOnTargetExit` prop to *Tooltip* component
## 3.3.3
-- Added: data-cy for in _Alert_ component elements
+- Added: data-cy for in *Alert* component elements
## 3.3.2
-- Fixed: Added override for `onClick` prop in _Dropdown_ component
+- Fixed: Added override for `onClick` prop in *Dropdown* component
## 3.3.1
-- Fixed: Typography of Header in _Alert_ component.
-- Fixed: Max width issue in _Dropdown_ component.
+- Fixed: Typography of Header in *Alert* component.
+- Fixed: Max width issue in *Dropdown* component.
## 3.3.0
-- Changed: **BREAKING** `isLoading` prop of _Table_ to `loading`.
-- Changed: Implemented _Dropdown_ component with Tippy.js and removed
+- Changed: **BREAKING** `isLoading` prop of *Table* to `loading`.
+- Changed: Implemented *Dropdown* component with Tippy.js and removed
`react-popper`
-- Deprecated: **BREAKING** `loading` prop of _Pane_, _Modal_ and _Alert_
+- Deprecated: **BREAKING** `loading` prop of *Pane*, *Modal* and *Alert*
components.
-- Removed: **BREAKING** `placement` prop from _Tooltip_ (Use position instead).
+- Removed: **BREAKING** `placement` prop from *Tooltip* (Use position instead).
#### UI
-- Changed: colors of `$neeto-ui-warning` and `$neeto-ui-error` in _Color
- Palette_
-- Changed: the text color in _Table_ to `$neeto-ui-black`
-- Changed: UI of _Tag_ of component
-- Changed: look and feel of _Danger Button_
-- Changed: Contrast of _Avatar_, _Accordian_, _Toastr_ and _Callout_
-- Changed: Made _Modal_ Header text and Close icon aligned in a line
-- Added: new variant for _Danger Button_ -`danger-text`
+- Changed: colors of `$neeto-ui-warning` and `$neeto-ui-error` in *Color
+ Palette*
+- Changed: the text color in *Table* to `$neeto-ui-black`
+- Changed: UI of *Tag* of component
+- Changed: look and feel of *Danger Button*
+- Changed: Contrast of *Avatar*, *Accordian*, *Toastr* and *Callout*
+- Changed: Made *Modal* Header text and Close icon aligned in a line
+- Added: new variant for *Danger Button* -`danger-text`
- Added: new accent colors
- 
diff --git a/package.json b/package.json
index 3bf22b8e3..cbfaf7a69 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@bigbinary/neetoui",
- "version": "6.5.11-beta.1",
+ "version": "6.5.14-beta.0",
"author": "BigBinary",
"license": "MIT",
"description": "neetoUI drives the experience at all neeto products",
diff --git a/src/components/Textarea.jsx b/src/components/Textarea.jsx
index 3185e568e..3bcbc74b0 100644
--- a/src/components/Textarea.jsx
+++ b/src/components/Textarea.jsx
@@ -56,7 +56,7 @@ const Textarea = forwardRef(
textareaRef.current.style.minHeight = "22px";
textareaRef.current.style.height = "auto";
const scrollHeight = textareaRef.current.scrollHeight;
- textareaRef.current.style.height = `${scrollHeight}px`;
+ textareaRef.current.style.height = `${scrollHeight + 1}px`;
}, [value]);
return (
diff --git a/src/styles/components/_tooltip.scss b/src/styles/components/_tooltip.scss
index e7455c09a..05567c308 100644
--- a/src/styles/components/_tooltip.scss
+++ b/src/styles/components/_tooltip.scss
@@ -1,4 +1,6 @@
-:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
+:root,
+.neeto-ui-theme--light,
+.neeto-ui-theme--dark {
--neeto-ui-tooltip-max-width: calc(100vw - 10px);
--neeto-ui-tooltip-font-size: var(--neeto-ui-text-xs);
--neeto-ui-tooltip-bg-color: rgb(var(--neeto-ui-gray-800));
@@ -12,6 +14,8 @@
// Arrow
--neeto-ui-tooltip-arrow-color: rgb(var(--neeto-ui-gray-800));
+ --neeto-ui-tooltip-arrow-size: 6px;
+ --neeto-ui-tooltip-arrow-offset: 12px;
// Light theme
--neeto-ui-tooltip-light-theme-bg-color: rgb(var(--neeto-ui-white));
@@ -200,7 +204,8 @@
border-top-color: var(--neeto-ui-tooltip-light-theme-arrow-border-color);
}
-.tippy-box[data-theme~="light"][data-placement^="bottom"] > .tippy-arrow:before {
+.tippy-box[data-theme~="light"][data-placement^="bottom"]
+ > .tippy-arrow:before {
border-bottom-color: var(--neeto-ui-tooltip-light-theme-arrow-border-color);
}
@@ -225,3 +230,61 @@
--neeto-ui-tooltip-arrow-color: rgb(var(--neeto-ui-primary-800));
--neeto-ui-tooltip-light-theme-color: rgb(var(--neeto-ui-primary-800));
}
+
+// Adding border to popover
+
+.tippy-box[data-theme~="light"] {
+ .tippy-arrow {
+ transform-style: preserve-3d;
+ width: 0;
+ height: 0;
+ border: var(--neeto-ui-tooltip-arrow-size) solid transparent;
+ color: rgb(var(--neeto-ui-white));
+
+ &::before {
+ transform: translateZ(-1px);
+ border: var(--neeto-ui-tooltip-arrow-size) solid transparent;
+ }
+ }
+ &[data-placement^="right"] .tippy-arrow {
+ border-right-color: rgb(var(--neeto-ui-white));
+ left: calc(-1 * var(--neeto-ui-tooltip-arrow-offset));
+
+ &::before {
+ left: calc(-1 * (var(--neeto-ui-tooltip-arrow-size) + 1px));
+ top: calc(-1 * var(--neeto-ui-tooltip-arrow-size));
+ border-right-color: var(--neeto-ui-popover-light-theme-border-color);
+ }
+ }
+ &[data-placement^="left"] .tippy-arrow {
+ border-left-color: rgb(var(--neeto-ui-white));
+ right: calc(-1 * var(--neeto-ui-tooltip-arrow-offset));
+
+ &::before {
+ right: calc(-1 * (var(--neeto-ui-tooltip-arrow-size) + 1px));
+ top: calc(-1 * var(--neeto-ui-tooltip-arrow-size));
+ border-left-color: var(--neeto-ui-popover-light-theme-border-color);
+ }
+ }
+ &[data-placement^="bottom"] .tippy-arrow {
+ border-bottom-color: rgb(var(--neeto-ui-white));
+ top: calc(-1 * var(--neeto-ui-tooltip-arrow-offset));
+
+ &::before {
+ top: calc(-1 * (var(--neeto-ui-tooltip-arrow-size) + 1px));
+ left: calc(-1 * var(--neeto-ui-tooltip-arrow-size));
+ bottom: auto;
+ border-bottom-color: var(--neeto-ui-popover-light-theme-border-color);
+ }
+ }
+ &[data-placement^="top"] .tippy-arrow {
+ border-top-color: rgb(var(--neeto-ui-white));
+ bottom: calc(-1 * var(--neeto-ui-tooltip-arrow-offset));
+
+ &::before {
+ left: calc(-1 * var(--neeto-ui-tooltip-arrow-size));
+ top: calc(-1 * (var(--neeto-ui-tooltip-arrow-size) - 1px));
+ border-top-color: var(--neeto-ui-popover-light-theme-border-color);
+ }
+ }
+}