From d898dc2f5bdb8db8d2f8e776310a5101cab20249 Mon Sep 17 00:00:00 2001 From: Florian BOUILLON Date: Fri, 5 Mar 2021 10:07:02 +0100 Subject: [PATCH] Fixed problems with Input and Fieldset Signed-off-by: Florian BOUILLON --- .storybook/main.js | 5 +- .storybook/next.js | 1 + .storybook/preview.js | 3 +- src/dzeio/Fieldset/Fieldset.module.styl | 2 +- src/dzeio/Fieldset/Fieldset.stories.tsx | 16 + src/dzeio/Input/Input.module.styl | 78 +- src/dzeio/Input/Input.stories.tsx | 21 +- src/dzeio/Input/index.tsx | 27 +- src/dzeio/general.styl | 3 + tsconfig.json | 3 +- yarn.lock | 1620 ++++++++++------------- 11 files changed, 804 insertions(+), 975 deletions(-) create mode 100644 src/dzeio/Fieldset/Fieldset.stories.tsx diff --git a/.storybook/main.js b/.storybook/main.js index d936a18..9023cb2 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -5,7 +5,6 @@ module.exports = { "../src/dzeio/**/*.stories.@(js|jsx|ts|tsx)", ], "addons": [ - "@storybook/addon-links", "@storybook/addon-essentials" ], typescript: { @@ -13,8 +12,8 @@ module.exports = { checkOptions: {}, reactDocgen: 'react-docgen-typescript', reactDocgenTypescriptOptions: { - shouldExtractLiteralValuesFromEnum: true, - propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), + shouldExtractLiteralValuesFromEnum: true, + propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), }, }, presets: [path.resolve(__dirname, "./next.js")] diff --git a/.storybook/next.js b/.storybook/next.js index d0ea12d..2ecc559 100644 --- a/.storybook/next.js +++ b/.storybook/next.js @@ -24,6 +24,7 @@ module.exports = { use: ['style-loader', { loader: 'css-loader', options: { + url: false, importLoaders: 1, modules: true }, diff --git a/.storybook/preview.js b/.storybook/preview.js index 5d00c02..875d184 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,5 @@ +import '../src/dzeio/general.styl' export const parameters = { - actions: { argTypesRegex: "^on[A-Z].*" }, + layout: 'centered' } \ No newline at end of file diff --git a/src/dzeio/Fieldset/Fieldset.module.styl b/src/dzeio/Fieldset/Fieldset.module.styl index 159d938..3f0c7e6 100644 --- a/src/dzeio/Fieldset/Fieldset.module.styl +++ b/src/dzeio/Fieldset/Fieldset.module.styl @@ -2,7 +2,7 @@ .fieldset border-radius 4px - border 2px solid grey + border 2px solid $grayDark transition all $transition margin 0 diff --git a/src/dzeio/Fieldset/Fieldset.stories.tsx b/src/dzeio/Fieldset/Fieldset.stories.tsx new file mode 100644 index 0000000..537e67a --- /dev/null +++ b/src/dzeio/Fieldset/Fieldset.stories.tsx @@ -0,0 +1,16 @@ +import { Meta } from '@storybook/react/types-6-0' +import React from 'react' +import Component from '.' +import Input from '../Input' + +export default { + title: 'DZEIO/Fieldset', + component: Component, + argTypes: { + title: { control: 'text'} + } +} as Meta + +export const Basic = (args: any) => ( + +) diff --git a/src/dzeio/Input/Input.module.styl b/src/dzeio/Input/Input.module.styl index 7b56d75..54fee44 100644 --- a/src/dzeio/Input/Input.module.styl +++ b/src/dzeio/Input/Input.module.styl @@ -34,7 +34,7 @@ left 16px // input padding-left ~ label - left 16px + 24px + 16px + left 16px + 24px + 10px &.right right 16px @@ -68,6 +68,7 @@ display flex opacity 0 transition all $transition + overflow-x hidden pointer-events none // display flex flex-direction column @@ -109,10 +110,12 @@ @media (prefers-color-scheme dark) background lighten(lighten($foregroundDark, 5%), 20%) + div + .autocomplete + top calc(100% - 4px - .9em) - input:focus + .autocomplete - select:focus + .autocomplete - textarea:focus + .autocomplete + input:focus ~ .autocomplete + select:focus ~ .autocomplete + textarea:focus ~ .autocomplete .autocomplete:hover opacity 1 pointer-events inherit @@ -122,7 +125,7 @@ textarea padding 14px 16px height 56px - border 2px solid rgba(black, .3) + border 2px solid $grayDark border-radius 4px max-width 100% box-sizing border-box @@ -132,20 +135,9 @@ transition all $transition color black @media (prefers-color-scheme dark) - border-color rgba(white, .3) + border-color $grayLight color white - &:not(:disabled):hover - border-color black - @media (prefers-color-scheme dark) - border-color white - - + svg - color black - - @media (prefers-color-scheme dark) - color white - &:not(:placeholder-shown) &:focus &:not([placeholder=" "]) @@ -168,27 +160,47 @@ ~ label color #999 - &:invalid - border-color $danger + &:not(:disabled) + &:hover + border-color black + @media (prefers-color-scheme dark) + border-color white - ~ label - color @border-color + + svg + color black - ~ svg - color @border-color - &:focus - border-color $default + @media (prefers-color-scheme dark) + color white + &:focus + border-color $main - ~ label - color @border-color + ~ label + color @border-color + + ~ svg + color @border-color + &:invalid + border-color $errorLight + + ~ label + color @border-color + + ~ svg + color @border-color + @media (prefers-color-scheme dark) + border-color $errorDark + + ~ label + color @border-color + + ~ svg + color @border-color - ~ svg - color @border-color &.iconLeft - padding-left 16px + 24px + 16px + padding-left 16px + 24px + 10px &.iconRight - padding-right 16 + 24 + 16px + padding-right 16 + 24 + 10px &.filled border none background rgba(gray, .1) @@ -235,12 +247,12 @@ padding 0 font-size .75rem ~ svg.left ~ label - left 16px + 24px + 16px // .input/padding-left label/padding-left + left 16px + 24px + 10px // .input/padding-left label/padding-left ~ svg.rotate transform rotateX(0) transition $transition - &:hover:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate + &:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate transform rotateX(180deg) div display flex diff --git a/src/dzeio/Input/Input.stories.tsx b/src/dzeio/Input/Input.stories.tsx index 86e7ac1..ed8431d 100644 --- a/src/dzeio/Input/Input.stories.tsx +++ b/src/dzeio/Input/Input.stories.tsx @@ -1,10 +1,29 @@ import { Meta } from '@storybook/react/types-6-0' +import { Story } from "@storybook/react" import React from 'react' import Component from '.' +import { X } from 'react-feather' export default { title: 'DZEIO/Input', component: Component } as Meta -export const Basic = (args: any) => +export const Basic: Story = (args: any) => + +let tmp = Basic.bind({}) +tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X} + +export const Normal = tmp + +tmp = Basic.bind({}) +tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X} + +export const AutoComplete = tmp + +export const Select: Story = (args: any) => + + + + + \ No newline at end of file diff --git a/src/dzeio/Input/index.tsx b/src/dzeio/Input/index.tsx index 24cab51..3fab53f 100644 --- a/src/dzeio/Input/index.tsx +++ b/src/dzeio/Input/index.tsx @@ -5,6 +5,7 @@ import Text from '../Text' import { IconProps } from '../interfaces' import { buildClassName } from '../Util' import css from './Input.module.styl' +import Row from '../Row' interface Props extends React.DetailedHTMLProps, HTMLInputElement> { id?: string @@ -37,6 +38,8 @@ interface States { export default class Input extends React.Component { + public state: States = {} + // any because f*ck types private inputRef: React.RefObject = React.createRef() private parentRef: React.RefObject = React.createRef() @@ -50,11 +53,14 @@ export default class Input extends React.Component { } if (this.props.autocomplete) { window.addEventListener('scroll', this.parentScroll) + this.parentScroll() } } public componentWillUnmount() { - window.removeEventListener('scroll', this.parentScroll) + if (this.props.autocomplete) { + window.removeEventListener('scroll', this.parentScroll) + } } public render() { @@ -65,7 +71,9 @@ export default class Input extends React.Component { delete props.opaque delete props.helper delete props.infinityText + delete props.autocomplete delete props.filled + delete props.iconRight delete props.inputRef delete props.selectRef delete props.block @@ -77,7 +85,7 @@ export default class Input extends React.Component { ref: this.props.inputRef || this.inputRef, className: buildClassName( [css.iconLeft, this.props.icon], - [css.iconRight, this.props.iconRight], + [css.iconRight, this.props.iconRight || this.props.autocomplete], [css.filled, this.props.filled], [css.opaque, this.props.opaque] ), @@ -94,7 +102,7 @@ export default class Input extends React.Component { input = (