fix: various issues (#136)

mitrotasios · web-flow · commit 6c59d42f3b59 · 2022-10-21T23:08:08.000+01:00
* Fix Barlist key

* add type="button" to all buttons

* Datepicker CalendarIcon flex-none

* fix SelectBox button spacing

* add form to input elem stories

* move resize-observer-polyfill tp devDependencies

* Update BarList.tsx

* Update package-lock.json

* Update SelectBox.tsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,8 +27,7 @@
   "dependencies": {
     "@tippyjs/react": "^4.2.6",
     "date-fns": "^2.28.0",
-    "recharts": "^2.1.13",
-    "resize-observer-polyfill": "^1.5.1"
+    "recharts": "^2.1.13"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
@@ -59,6 +58,7 @@
     "jest": "^27.5.1",
     "postcss": "^8.4.12",
     "react-dom": "^18.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
diff --git a/src/components/input-elements/Datepicker/Datepicker.tsx b/src/components/input-elements/Datepicker/Datepicker.tsx
@@ -165,6 +165,7 @@ const Datepicker = ({
             ) }
             >
                 <button
+                    type="button"
                     ref={ datePickerRef }
                     onClick={ () => setShowDatePickerModal(!showDatePickerModal) }
                     className={ classNames(
@@ -184,7 +185,7 @@ const Datepicker = ({
                 >
                     <CalendarIcon
                         className={ classNames(
-                            'flex-none',
+                            'tr-flex-none',
                             getColorVariantsFromColorThemeValue(defaultColors.lightText).textColor,
                             sizing.lg.height,
                             sizing.lg.width,
@@ -206,6 +207,7 @@ const Datepicker = ({
                 </button>
                 { enableRelativeDates ? (
                     <button
+                        type="button"
                         ref={ dropdownRef }
                         onClick={ () => setShowDropdownModal(!showDropdownModal) }
                         className={ classNames(
@@ -424,6 +426,7 @@ const Datepicker = ({
                 { relativeFilterOptions.map((filterOption) => (
                     <button
                         key={ filterOption.value }
+                        type="button"
                         onClick={ () => {
                             setSelectedRelativeFilterOption(filterOption.value);
                             handleRelativeFilterOptionClick(filterOption.value);
diff --git a/src/components/input-elements/Dropdown/Dropdown.tsx b/src/components/input-elements/Dropdown/Dropdown.tsx
@@ -72,6 +72,7 @@ const Dropwdown = ({
             ) }
         >
             <button
+                type="button"
                 className={ classNames(
                     'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',
                     'focus:tr-ring-2 focus:tr-outline-0',
diff --git a/src/components/input-elements/Dropdown/DropdownItem.tsx b/src/components/input-elements/Dropdown/DropdownItem.tsx
@@ -28,6 +28,7 @@ const DropdownItem = ({
     const Icon = icon ? icon : null;
     return (
         <button
+            type="button"
             onClick={() => privateProps!.handleDropdownItemClick(value)}
             className={classNames(
                 'input-elem tr-flex tr-items-center tr-justify-between tr-w-full',
diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
@@ -104,6 +104,7 @@ const MultiSelectBox = ({
             ) }
         >
             <button
+                type="button"
                 className={ classNames(
                     'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',
                     'focus:tr-ring-2 focus:tr-outline-0',
diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBoxItem.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBoxItem.tsx
@@ -27,6 +27,7 @@ const MultiSelectBoxItem = ({
     privateProps,
 }: MultiSelectBoxItemProps) => (
     <button
+        type="button"
         onClick={ () => privateProps!.handleMultiSelectBoxItemClick(value) }
         className={ classNames(
             'input-elem tr-flex tr-items-center tr-justify-between tr-w-full',
diff --git a/src/components/input-elements/SelectBox/SelectBox.tsx b/src/components/input-elements/SelectBox/SelectBox.tsx
@@ -110,8 +110,10 @@ const SelectBox = ({
                 onClick={ () => setShowModal(!showModal) }
             />
             <button
+                type="button"
                 className={ classNames(
-                    'input-elem tr-absolute tr-top-1/2 -tr-translate-y-1/2',
+                    'tr-absolute tr-top-1/2 -tr-translate-y-1/2',
+                    'tr-m-0 tr-p-0',
                     spacing.twoXl.right,
                 ) }
                 onClick={ () => setShowModal(!showModal) }
diff --git a/src/components/input-elements/SelectBox/SelectBoxItem.tsx b/src/components/input-elements/SelectBox/SelectBoxItem.tsx
@@ -25,6 +25,7 @@ const SelectBoxItem = ({
     const Icon = icon ? icon : null;
     return (
         <button
+            type="button"
             onClick={() => privateProps!.handleSelectBoxItemClick(value)}
             className={classNames(
                 'input-elem tr-flex tr-items-center tr-justify-between tr-w-full',
diff --git a/src/components/input-elements/Tab/Tab.tsx b/src/components/input-elements/Tab/Tab.tsx
@@ -42,6 +42,7 @@ const Tab = ({
     return(
         <li>
             <button
+                type="button"
                 className={ classNames(
                     'input-elem tr-flex tr-whitespace-nowrap tr-max-w-xs tr-truncate',
                     spacing.twoXs.paddingRight,
diff --git a/src/components/input-elements/Toggle/ToggleItem.tsx b/src/components/input-elements/Toggle/ToggleItem.tsx
@@ -45,6 +45,7 @@ const ToggleItem = ({
     const Icon = icon ? icon : null;
     return (
         <button
+            type="button"
             className={classNames(
                 'input-elem tr-flex tr-items-center tr-ring-1',
                 spacing.lg.paddingLeft,
diff --git a/src/components/layout-elements/Accordion/AccordionHeader.tsx b/src/components/layout-elements/Accordion/AccordionHeader.tsx
@@ -17,6 +17,7 @@ const AccordionHeader = ({
 }: AccordionHeaderProps) => {
     return(
         <button
+            type="button"
             className={ classNames(
                 'input-elem tr-w-full tr-flex tr-items-center tr-justify-between',
                 spacing.threeXl.paddingLeft,
diff --git a/src/components/vis-elements/BarList/BarList.tsx b/src/components/vis-elements/BarList/BarList.tsx
@@ -60,7 +60,7 @@ const BarList = ({
             <div className="tr-relative tr-w-full">
                 { data.map((item, idx) => (
                     <div
-                        key={ item.value }
+                        key={ item.name }
                         className={ classNames(
                             'tr-flex tr-items-center',
                             rowHeight,
@@ -84,7 +84,7 @@ const BarList = ({
             <div className="tr-text-right tr-min-w-min">
                 { data.map((item, idx) => (
                     <div
-                        key={ item.value }
+                        key={ item.name }
                         className={ classNames(
                             'tr-flex tr-justify-end tr-items-center',
                             rowHeight,
diff --git a/src/stories/input-elements/Dropdown.stories.tsx b/src/stories/input-elements/Dropdown.stories.tsx
@@ -14,7 +14,7 @@ export default {
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
 const ResponsiveTemplate: ComponentStory<typeof Dropdown> = (args) => (
-    <>
+    <form>
         <Title>Mobile</Title>
         <div className="tr-w-64">
             <Card>
@@ -25,7 +25,7 @@ const ResponsiveTemplate: ComponentStory<typeof Dropdown> = (args) => (
         <Card>
             <SimpleDropdown { ...args } />
         </Card>
-    </>
+    </form>
 );
 
 const FlexTemplate: ComponentStory<typeof Dropdown> = (args) => (
diff --git a/src/stories/input-elements/MultiSelectBox.stories.tsx b/src/stories/input-elements/MultiSelectBox.stories.tsx
@@ -14,7 +14,7 @@ export default {
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
 const ResponsiveTemplate: ComponentStory<typeof MultiSelectBox> = (args) => (
-    <>
+    <form>
         <Title>Mobile</Title>
         <div className="tr-w-64">
             <Card>
@@ -25,7 +25,7 @@ const ResponsiveTemplate: ComponentStory<typeof MultiSelectBox> = (args) => (
         <Card>
             <SimpleMultiSelectBox { ...args } />
         </Card>
-    </>
+    </form>
 );
 
 const FlexTemplate: ComponentStory<typeof MultiSelectBox> = (args) => (
diff --git a/src/stories/input-elements/SelectBox.stories.tsx b/src/stories/input-elements/SelectBox.stories.tsx
@@ -4,6 +4,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { Card, Flex, SelectBox, Text, Title } from 'components';
 import { SelectElementsFlexTemplate } from './helpers/SelectElementsFlexTemplate';
+import { SimpleDropdown } from 'stories/input-elements/helpers/SimpleDropdown';
 import { SimpleSelectBox } from './helpers/SimpleSelectBox';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -14,18 +15,19 @@ export default {
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
 const ResponsiveTemplate: ComponentStory<typeof SelectBox> = (args) => (
-    <>
+    <form>
         <Title>Mobile</Title>
         <div className="tr-w-64">
             <Card>
                 <SimpleSelectBox { ...args } />
+                <SimpleDropdown />
             </Card>
         </div>
         <Title marginTop="mt-5">Desktop</Title>
         <Card>
             <SimpleSelectBox { ...args } />
         </Card>
-    </>
+    </form>
 );
 
 const FlexTemplate: ComponentStory<typeof SelectBox> = (args) => (

Original file line number	Diff line number	Diff line change
`@@ -72,6 +72,7 @@ const Dropwdown = ({`
`72`	`72`	`) }`
`73`	`73`	`>`
`74`	`74`	`<button`
	`75`	`+ type="button"`
`75`	`76`	`className={ classNames(`
`76`	`77`	`'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',`
`77`	`78`	`'focus:tr-ring-2 focus:tr-outline-0',`
Original file line number	Diff line number	Diff line change
`@@ -104,6 +104,7 @@ const MultiSelectBox = ({`
`104`	`104`	`) }`
`105`	`105`	`>`
`106`	`106`	`<button`
	`107`	`+ type="button"`
`107`	`108`	`className={ classNames(`
`108`	`109`	`'input-elem tr-flex tr-justify-between tr-items-center tr-w-full',`
`109`	`110`	`'focus:tr-ring-2 focus:tr-outline-0',`