Fixed problems with Input and Fieldset

Signed-off-by: Florian BOUILLON <florian.bouillon@delta-wings.net>

.storybook/main.js

@@ -5,7 +5,6 @@ module.exports = {
 		"../src/dzeio/**/*.stories.@(js|jsx|ts|tsx)",
 	],
 	"addons": [
-		"@storybook/addon-links",
 		"@storybook/addon-essentials"
 	],
 	typescript: {

.storybook/next.js

@@ -24,6 +24,7 @@ module.exports = {
 		use: ['style-loader', {
 			loader: 'css-loader',
 			options: {
+				url: false,
 				importLoaders: 1,
 				modules: true
 			},

.storybook/preview.js

@@ -1,4 +1,5 @@
+import '../src/dzeio/general.styl'
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  layout: 'centered'
 }

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
 

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) => (
+	<Component {...args}><Input label="Test" /></Component>
+)

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
+	input:focus ~ .autocomplete
-	select:focus + .autocomplete
+	select:focus ~ .autocomplete
-	textarea: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,18 +135,7 @@
 		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)
@@ -168,27 +160,47 @@
 			~ label
 				color #999
 
-		&:invalid
+		&:not(:disabled)
-			border-color $danger
+			&:hover
+				border-color black
+				@media (prefers-color-scheme dark)
+					border-color white
 
-			~ label
+				+ svg
-				color @border-color
+					color black
 
-			~ svg
+					@media (prefers-color-scheme dark)
-				color @border-color
+						color white
 			&:focus
-			border-color $default
+				border-color $main
 
 				~ 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
+
 
 		&.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

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) => <Component {...args} />
+export const Basic: Story<any> = (args: any) => <Component {...args} />
+
+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<any> = (args: any) => <Component type="select" {...args}>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
+	<option>d</option>
+</Component>

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<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
 	id?: string
@@ -37,6 +38,8 @@ interface States {
 
 export default class Input extends React.Component<Props, States> {
 
+	public state: States = {}
+
 	// any because f*ck types
 	private inputRef: React.RefObject<any> = React.createRef()
 	private parentRef: React.RefObject<HTMLDivElement> = React.createRef()
@@ -50,12 +53,15 @@ export default class Input extends React.Component<Props, States> {
 		}
 		if (this.props.autocomplete) {
 			window.addEventListener('scroll', this.parentScroll)
+			this.parentScroll()
 		}
 	}
 
 	public componentWillUnmount() {
+		if (this.props.autocomplete) {
 			window.removeEventListener('scroll', this.parentScroll)
 		}
+	}
 
 	public render() {
 		const props: Props = Object.assign({}, this.props)
@@ -65,7 +71,9 @@ export default class Input extends React.Component<Props, States> {
 		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<Props, States> {
 			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<Props, States> {
 			input = (
 				<select
 					ref={this.props.selectRef || this.inputRef}
-					{...this.props as React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>}
+					{...props as React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>}
 					className={buildClassName(
 						[css.iconLeft, this.props.icon],
 						[css.iconRight, !this.props.disabled || this.props.iconRight],
@@ -138,12 +146,6 @@ export default class Input extends React.Component<Props, States> {
 			>
 				{input}
 
-				{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value || '') === -1 && (
-					<ul className={buildClassName(css.autocomplete, [css.reverse, !this.state?.isInFirstPartOfScreen])}>
-						{this.props.autocomplete.filter((item) => item.includes(this.state?.value || '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
-					</ul>
-				)}
-
 				{/* Process Icon */}
 				{this.props.icon && (
 					<this.props.icon className={css.left} />
@@ -167,6 +169,12 @@ export default class Input extends React.Component<Props, States> {
 						)}
 					</div>
 				)}
+
+				{this.props.autocomplete && this.props.autocomplete.indexOf(this.state?.value || '') === -1 && (
+					<ul className={buildClassName(css.autocomplete, [css.reverse, !this.state.isInFirstPartOfScreen])}>
+						{this.props.autocomplete.filter((item) => item.includes(this.state?.value || '')).map((item) => (<li key={item} onClick={this.onAutoCompleteClick(item)}><Text>{item}</Text></li>))}
+					</ul>
+				)}
 			</div>
 		)
 	}
@@ -175,6 +183,7 @@ export default class Input extends React.Component<Props, States> {
 		const div = this.parentRef.current
 		if (!div) {return}
 		const result = !(div.offsetTop - window.scrollY >= window.innerHeight / 2)
+		console.log(result, div, this.state.isInFirstPartOfScreen)
 		if (this.state.isInFirstPartOfScreen !== result) {
 			this.setState({isInFirstPartOfScreen: result})
 		}

src/dzeio/general.styl

@@ -27,13 +27,16 @@ a
 }
 
 /* Track */
+::-webkit-scrollbar-corner
 ::-webkit-scrollbar-track
 	background $foregroundLight
+	transition $transition
 	@media (prefers-color-scheme dark)
 		background $foregroundDark
 
 ::-webkit-scrollbar-thumb
 	background: darken($foregroundLight, 16%)
+	transition $transition
 	@media (prefers-color-scheme dark)
 		background lighten($foregroundDark, 16%)
 	&:hover

tsconfig.json

@@ -64,6 +64,7 @@
 	],
 	"exclude": [
 		"node_modules",
-		"build"
+		"build",
+		"*.stories.tsx"
 	]
 }