Skip to content

Commit

Permalink
fix: various issues (#136)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@mitrotasios
mitrotasios authored Oct 21, 2022
1 parent 6a67cf2 commit 6c59d42
Show file tree
Hide file tree
Showing 16 changed files with 35 additions and 18 deletions.
14 changes: 8 additions & 6 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
5 changes: 4 additions & 1 deletion src/components/input-elements/Datepicker/Datepicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ const Datepicker = ({
) }
>
<button
type="button"
ref={ datePickerRef }
onClick={ () => setShowDatePickerModal(!showDatePickerModal) }
className={ classNames(
Expand All @@ -184,7 +185,7 @@ const Datepicker = ({
>
<CalendarIcon
className={ classNames(
'flex-none',
'tr-flex-none',
getColorVariantsFromColorThemeValue(defaultColors.lightText).textColor,
sizing.lg.height,
sizing.lg.width,
Expand All @@ -206,6 +207,7 @@ const Datepicker = ({
</button>
{ enableRelativeDates ? (
<button
type="button"
ref={ dropdownRef }
onClick={ () => setShowDropdownModal(!showDropdownModal) }
className={ classNames(
Expand Down Expand Up @@ -424,6 +426,7 @@ const Datepicker = ({
{ relativeFilterOptions.map((filterOption) => (
<button
key={ filterOption.value }
type="button"
onClick={ () => {
setSelectedRelativeFilterOption(filterOption.value);
handleRelativeFilterOptionClick(filterOption.value);
Expand Down
1 change: 1 addition & 0 deletions src/components/input-elements/Dropdown/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions src/components/input-elements/Dropdown/DropdownItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions src/components/input-elements/MultiSelectBox/MultiSelectBoxItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 3 additions & 1 deletion src/components/input-elements/SelectBox/SelectBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) }
Expand Down
1 change: 1 addition & 0 deletions src/components/input-elements/SelectBox/SelectBoxItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions src/components/input-elements/Tab/Tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/components/input-elements/Toggle/ToggleItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/components/layout-elements/Accordion/AccordionHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/components/vis-elements/BarList/BarList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions src/stories/input-elements/Dropdown.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -25,7 +25,7 @@ const ResponsiveTemplate: ComponentStory<typeof Dropdown> = (args) => (
<Card>
<SimpleDropdown { ...args } />
</Card>
</>
</form>
);

const FlexTemplate: ComponentStory<typeof Dropdown> = (args) => (
Expand Down
4 changes: 2 additions & 2 deletions src/stories/input-elements/MultiSelectBox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -25,7 +25,7 @@ const ResponsiveTemplate: ComponentStory<typeof MultiSelectBox> = (args) => (
<Card>
<SimpleMultiSelectBox { ...args } />
</Card>
</>
</form>
);

const FlexTemplate: ComponentStory<typeof MultiSelectBox> = (args) => (
Expand Down
6 changes: 4 additions & 2 deletions src/stories/input-elements/SelectBox.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) => (
Expand Down

1 comment on commit 6c59d42

@Mrahmani71
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think "add type="button" to all buttons" is a good idea. We need buttons with type="submit" for forms. 🤔

Please sign in to comment.