From e28fd17644fcc1896b7ce5169291e68216a9f1da Mon Sep 17 00:00:00 2001 From: MichelSantos Date: Wed, 16 Aug 2023 10:24:47 -0300 Subject: [PATCH 1/6] feat: alterando visual dos inputs --- .../form/elements/form-control-label.styl | 63 +++++++------------ .../form/elements/form-control.styl | 50 ++++++++------- source/components/form/form.stories.js | 10 +++ 3 files changed, 61 insertions(+), 62 deletions(-) diff --git a/source/components/form/elements/form-control-label.styl b/source/components/form/elements/form-control-label.styl index 491b45881..65741138a 100644 --- a/source/components/form/elements/form-control-label.styl +++ b/source/components/form/elements/form-control-label.styl @@ -3,9 +3,10 @@ Variables ========================================================================== */ /* Color ========================================================================== */ -$c-label = #A1A1A1; +$c-label = #00A0b2; $c-label-active = #878786; $c-text-default = #333; +$c-border-input = #60605f; /* ========================================================================== Form Label Component @@ -15,36 +16,27 @@ Form Label Component } .controlledLabel { - color: $c-label; - font-size: 16px; + position: relative; + left: 6px; + + pointer-events: none; + + font-size: 12px; font-weight: 400; - left: 0; line-height: 1; - pointer-events: none; - position: absolute; - top: 10px; - transition: all 0.25s ease; + + background: white; + color: $c-label; } .isActive, .isAutofilled { font-size: 12px; - left: 0; - top: -1.5rem; - transition: all 0.125s ease; - color: $c-label-active; - - &.isHovered { - color: var(--c-support-dark); - } - - &.labelHighLight { - color: var(--c-active-input); - } + color: $c-label; } .formControl { - color: $c-label-active; - font-size: 16px; + color: $c-border-input; + font-size: 14px; margin-top: 5px; } @@ -61,30 +53,21 @@ Form Label Component } .isOutline { - padding-left: 10px; + padding: 0 4px; top: 17px; -} - -.isActive.isOutline, .isAutofilled.isOutline { - background: $white; - left: 5px; - padding: 0 5px; - top: -6px; - width: auto; -} - -.has-iconRight { - label, input { - padding-right: 35px; - } + display: math; } .has-iconLeft { - label, input { + input { padding-left: 35px; } } +.disabled { + color: #C7C7C7; +} + .iconRight, .iconLeft { pointer-events: none; position: absolute; @@ -93,10 +76,12 @@ Form Label Component .iconRight { right: 12px; + top: 38px; } .iconLeft { - left: 12px; + left: 16px; + top: 38px; } .isClickable { diff --git a/source/components/form/elements/form-control.styl b/source/components/form/elements/form-control.styl index 00f7605a5..34d78ffc2 100644 --- a/source/components/form/elements/form-control.styl +++ b/source/components/form/elements/form-control.styl @@ -6,7 +6,7 @@ Variables /* Border color ========================================================================== */ -$c-border = #a1a1a1; +$c-border = #60605f; $c-check-border = #7F7F7F; /* Field ========================================================================== */ @@ -17,7 +17,9 @@ $c-text-default = #333; ========================================================================== */ $c-addon-background = #18a689; $c-addon-border = $c-border; - +$c-border-hover = #3B3B3A; +$c-label = #00A0b2; +$c-disabled = #c7c7c7; /* ========================================================================== Placeholders ========================================================================== */ @@ -26,8 +28,8 @@ Placeholders $field { border: 0; border-bottom: 1px solid $c-border; - border-top-left-radius: 3px; - border-top-right-radius: 3px; + border-top-left-radius: 2px; + border-top-right-radius: 2px; display: block; font-size: inherit; height: 35px; @@ -43,34 +45,36 @@ $field { } &:hover { - border-color: var(--c-support-dark); - color: var(--c-support-dark); + border-color: $c-border-hover; + color: $c-border-hover; } &:focus { - border-color: var(--c-active-input); + border-bottom: 1px solid $c-label; color: var(--c-support-dark); } &.isActive { - border-color: var(--c-active-input); + border-color: $c-gray-2 ; } &:disabled { - background: var(--c-back-disabled); - color: var(--c-text-disabled); + cursor: not-allowed; + background: white; + color: $c-disabled; + border-color: $c-disabled; } &:disabled::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ - color: var(--c-text-disabled); + color: $c-disabled; } &:disabled:-ms-input-placeholder { /* Internet Explorer 10-11 */ - color: var(--c-text-disabled); + color: $c-disabled; } &:disabled::-ms-input-placeholder { /* Microsoft Edge */ - color: var(--c-text-disabled); + color: $c-disabled; } } @@ -78,7 +82,7 @@ $field { ========================================================================== */ $radioCheckbox { align-items: center; - border: 2px solid $c-check-border; + border: 2px solid $c-border; cursor: pointer; display: flex; height: 20px; @@ -87,12 +91,12 @@ $radioCheckbox { width: 20px; &.isDisabled, &.isDisabled.isActive { - background: var(--c-back-disabled); - border-color: var(--c-text-disabled); + background: white; + border-color:$c-disabled; cursor: not-allowed; i { - color: var(--c-text-disabled); + color: $c-disabled; } } } @@ -177,13 +181,13 @@ Form Control Component input[type='radio']:disabled { &:checked ~ .fakeInput { - background: var(--c-back-disabled); - border-color: var(--c-text-disabled); + background: white; + border-color: $c-disabled; cursor: not-allowed; } &:checked ~ .fakeInput:before { - background: var(--c-back-disabled); + background: white; } } } @@ -268,9 +272,9 @@ Form Control Component } .form-addon--disabled { - background: var(--c-back-disabled); - border-color: var(--c-back-disabled); - color: var(--c-text-disabled); + background: white; + border-color: $c-disabled; + color: $c-disabled; } /* Feedback diff --git a/source/components/form/form.stories.js b/source/components/form/form.stories.js index d0109e122..a9c10ee9a 100644 --- a/source/components/form/form.stories.js +++ b/source/components/form/form.stories.js @@ -93,6 +93,16 @@ export const AA_InputText = withState({ input: 'Campo com valor default', check: /> Versão outline! + + + Versão disabled! +
Date: Wed, 16 Aug 2023 16:30:09 -0300 Subject: [PATCH 2/6] muda form-actions para funcional --- .../components/form/elements/form-actions.js | 42 ++++++++----------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/source/components/form/elements/form-actions.js b/source/components/form/elements/form-actions.js index 426eaf310..89379f8a0 100644 --- a/source/components/form/elements/form-actions.js +++ b/source/components/form/elements/form-actions.js @@ -1,34 +1,26 @@ -import React, { PureComponent } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -// styles import styles from '../form.styl'; -class FormActions extends PureComponent { - constructor(props, context) { - super(props, context); - } +const FormActions = ({ children, className }) => { + const fullClassName = classNames(className, styles['form-group-actions']); - static defaultProps = { - children: undefined, - className: undefined, - }; + return ( +
+ {children} +
+ ); +}; - static propTypes = { - children: PropTypes.node, - className: PropTypes.string, - }; +FormActions.defaultProps = { + children: undefined, + className: undefined, +}; - render() { - const { children, className } = this.props; - const fullClassName = classNames(className, styles['form-group-actions']); - - return ( -
- {children} -
- ); - } -} +FormActions.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; export default FormActions; From a9e1e6af255e1a5362f2cfc7e406e2d24a8b42c0 Mon Sep 17 00:00:00 2001 From: MikeOfic Date: Fri, 18 Aug 2023 10:17:46 -0300 Subject: [PATCH 3/6] testing the select visual --- .../form/elements/form-control-label.styl | 4 - .../form/elements/form-control.styl | 6 ++ source/components/form/elements/form-group.js | 99 +++++++++---------- source/components/select/select.styl | 75 +++++++++----- 4 files changed, 102 insertions(+), 82 deletions(-) diff --git a/source/components/form/elements/form-control-label.styl b/source/components/form/elements/form-control-label.styl index 65741138a..52b5466ea 100644 --- a/source/components/form/elements/form-control-label.styl +++ b/source/components/form/elements/form-control-label.styl @@ -64,10 +64,6 @@ Form Label Component } } -.disabled { - color: #C7C7C7; -} - .iconRight, .iconLeft { pointer-events: none; position: absolute; diff --git a/source/components/form/elements/form-control.styl b/source/components/form/elements/form-control.styl index 34d78ffc2..696126c4c 100644 --- a/source/components/form/elements/form-control.styl +++ b/source/components/form/elements/form-control.styl @@ -143,6 +143,12 @@ Form Control Component border-radius: 3px; margin-top: 0; padding: 24px 10px 22px; + + &:focus { + outline: 1px solid $c-label; + border-color: $c-label; + color: var(--c-support-dark); + } } .form-field--select { diff --git a/source/components/form/elements/form-group.js b/source/components/form/elements/form-group.js index 81b392901..698265d3b 100644 --- a/source/components/form/elements/form-group.js +++ b/source/components/form/elements/form-group.js @@ -1,4 +1,4 @@ -import React, { PureComponent } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; @@ -10,58 +10,51 @@ import { Provider } from '../form-context'; const { randomId } = property; -class FormGroup extends PureComponent { - constructor(props, context) { - super(props, context); - - this.state = { - formGroup: { - controlId: props.controlId, - validationState: props.validationState, - }, - }; - } - - static defaultProps = { - controlId: randomId(), - validationState: undefined, - }; - - static propTypes = { - controlId: PropTypes.string, - validationState: PropTypes.oneOf(['success', 'warning', 'error']), - children: PropTypes.node, - className: PropTypes.string, - }; - - componentDidUpdate(prevProps) { - if (prevProps.validationState !== this.props.validationState) { - this.setState({ - formGroup: { - ...this.state.formGroup, - validationState: this.props.validationState, - }, - }); - } - } - - render() { - const { validationState, children, className } = this.props; - - const validationStateClass = `has-${validationState}`; - - const formGroupClass = classNames(className, styles['form-group'], styles['form-group--horizontal'], { - [styles[validationStateClass]]: validationState, - }); - - return ( - -
- {children} -
- - ); - } +function FormGroup(props) { + const [formGroup, setFormGroup] = useState({ + controlId: props.controlId, + validationState: props.validationState, + }); + + useEffect( + () => { + if (props.validationState !== formGroup.validationState) { + setFormGroup(prevFormGroup => ({ + ...prevFormGroup, + validationState: props.validationState, + })); + } + }, + [props.validationState] + ); + + const { validationState, children, className } = props; + + const validationStateClass = `has-${validationState}`; + + const formGroupClass = classNames(className, styles['form-group'], styles['form-group--horizontal'], { + [styles[validationStateClass]]: validationState, + }); + + return ( + +
+ {children} +
+ + ); } +FormGroup.defaultProps = { + controlId: randomId(), + validationState: undefined, +}; + +FormGroup.propTypes = { + controlId: PropTypes.string, + validationState: PropTypes.oneOf(['success', 'warning', 'error']), + children: PropTypes.node, + className: PropTypes.string, +}; + export default FormGroup; diff --git a/source/components/select/select.styl b/source/components/select/select.styl index f4684ceb5..a1fa3a4f3 100644 --- a/source/components/select/select.styl +++ b/source/components/select/select.styl @@ -5,6 +5,9 @@ $c-input = #333; $placeholder = #999; $c-border = #ccc; $c-label = #999; +$c-disabled = #c7c7c7; +$c-blue-1 = #00A0b2; + /* ========================================================================== Placeholders @@ -72,9 +75,10 @@ $field { line-height: 1; overflow: hidden; padding-right: 15px; - padding-top: 10px; text-overflow: ellipsis; white-space: nowrap; + padding: 10px 16px 0 16px; + font-size: 14px; &.isPlaceholder { color: $placeholder; @@ -85,33 +89,51 @@ $field { } &.isDisabled { - background: var(--c-back-disabled); - border-color: $c-border; - color: var(--c-text-disabled); + background: white; + border-color: $c-disabled; + color: $c-disabled; cursor: not-allowed; } } .labelWrapper { - position: relative; + // position: relative; + // border: 1px solid pink; + // max-height: 48px; + // padding-bottom: -32px; + // z-index: 2; } .label { - color: $c-label; - font-size: 16px; - font-weight: 400; - left: 5px; - line-height: 1; - pointer-events: none; - position: absolute; - top: 10px; - transition: all 0.25s ease; - - &.isActive { + // color: $c-label; + // font-size: 16px; + // font-weight: 400; + // left: 5px; + // line-height: 1; + // pointer-events: none; + // position: absolute; + // top: 10px; + // transition: all 0.25s ease; + + + // border: 1px solid red; color: var(--c-active-input); font-size: 12px; - top: -1.5rem; - transition: all 0.125s ease; + // margin-bottom: -5px; + margin-left: 16px; + padding: 0 4px; + margin-top: -7px!important; + display: block; + z-index: 2; + background-color: white; + position: relative; + width: max-content; + + // transition: all 0.125s ease; + + &.isActive { + // padding: 0 16px; + // margin-left: 24px; } } @@ -161,6 +183,9 @@ $field { &.isSelected { background: $c-secondary; + border: 1px solid red; + color: $c-blue-1; + } } @@ -183,7 +208,7 @@ $field { border: 1px solid $c-border; border-radius: 3px; line-height: 5px; - padding: 24px 10px 22px; + padding: 24px 14px 22px; } .arrow { @@ -192,15 +217,15 @@ $field { } .label { - padding-left: 10px; - top: 17px; + // padding-left: 10px; + margin-bottom: -8px; + &.isActive { background: $white; - left: 10px; - padding: 0 5px; - top: -6px; - width: auto; + // left: 10px; + // padding: 0 5px; + // top: -6px; } } From 991c7ea121b27a9ee5ae7e78e255012bddce0e59 Mon Sep 17 00:00:00 2001 From: Michel Santos Date: Mon, 21 Aug 2023 14:59:38 -0300 Subject: [PATCH 4/6] feat: adjusted select component --- .../select/elements/select-option.js | 7 +- source/components/select/select-component.js | 23 +++- source/components/select/select.styl | 108 +++++++++--------- 3 files changed, 75 insertions(+), 63 deletions(-) diff --git a/source/components/select/elements/select-option.js b/source/components/select/elements/select-option.js index 260c3b144..401a5b4d7 100644 --- a/source/components/select/elements/select-option.js +++ b/source/components/select/elements/select-option.js @@ -15,8 +15,11 @@ class SelectOption extends PureComponent { className={classNames(styles.option, { [styles.isSelected]: selected })} onClick={onSelect({ name: children, value })} > - {icon && } - {children} +
+ {icon && } + {children} +
+ {selected && } } ); diff --git a/source/components/select/select-component.js b/source/components/select/select-component.js index a89fe904f..922b474d7 100644 --- a/source/components/select/select-component.js +++ b/source/components/select/select-component.js @@ -14,6 +14,7 @@ class Select extends Component { constructor(props) { super(props); this.state = { + isFocus: false, selectedName: null, selectedValue: null, menuOpen: false, @@ -25,6 +26,7 @@ class Select extends Component { this.verifyClickOutside = this.verifyClickOutside.bind(this); this.closeSelect = this.closeSelect.bind(this); this.selectWrap = null; + this.handleFocus = this.handleFocus.bind(this); } static propTypes = { @@ -70,7 +72,8 @@ class Select extends Component { nextProps.value !== this.props.value || nextProps.items.length !== this.props.items.length || nextProps.open !== this.props.open || - nextProps.disabled !== this.props.disabled + nextProps.disabled !== this.props.disabled || + nextProps.isFocus !== this.props.isFocus ); } @@ -130,6 +133,7 @@ class Select extends Component { this.setState({ menuOpen: false, activeLabel: selectedName ? true : false, + isFocus: false, }); } @@ -143,8 +147,9 @@ class Select extends Component { selectedState.activeLabel = true; selectedState.selectedName = name; selectedState.selectedValue = value; + this.setState({ isFocus: false }); } - + this.setState({ isFocus: false }); this.setState(selectedState, this.props.onSelect({ name, value }, false)); }; } @@ -183,26 +188,36 @@ class Select extends Component { }, []); } + handleFocus() { + const { isFocus } = this.state; + + if (isFocus) return; + this.setState({ isFocus: true }); + } + renderInput() { - const { selectedName } = this.state; + const { selectedName, isFocus } = this.state; const { placeholder, disabled, inputClassName, active } = this.props; const fieldClasses = cx(styles.input, inputClassName, { [styles.isPlaceholder]: selectedName === null, [styles.isActive]: active, [styles.isDisabled]: disabled, + [styles.isFocus]: isFocus, }); return ( -
+
{selectedName || placeholder}
); } renderButton(type, label, menuButton) { + const { disabled } = this.props; const { activeLabel } = this.state; const labelClasses = cx(styles.label, { [styles.isActive]: activeLabel, + [styles.isDisabled]: disabled, }); if (type === 'select' && label) { diff --git a/source/components/select/select.styl b/source/components/select/select.styl index a1fa3a4f3..75efe6d23 100644 --- a/source/components/select/select.styl +++ b/source/components/select/select.styl @@ -3,7 +3,8 @@ ========================================================================== */ $c-input = #333; $placeholder = #999; -$c-border = #ccc; +$c-grey-1 = #60605f; +$c-hover = #3B3B3A; $c-label = #999; $c-disabled = #c7c7c7; $c-blue-1 = #00A0b2; @@ -30,10 +31,10 @@ $menu { $field { border: 0; - border-bottom: 1px solid $c-border; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - color: inherit; + border-bottom: 1px solid $c-grey-1; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + color: $c-grey-1; display: block; font-size: inherit; height: 35px; @@ -41,6 +42,11 @@ $field { text-indent: 5px; user-select: none; width: 100%; + + &:hover { + border-color: $c-hover; + color: $c-hover; + } } /* ========================================================================== @@ -62,7 +68,7 @@ $field { } .arrow { - color: $c-text; + color: $c-grey-1; position: absolute; right: 0; top: 8px; @@ -80,6 +86,8 @@ $field { padding: 10px 16px 0 16px; font-size: 14px; + transition: all 0.25s ease; + &.isPlaceholder { color: $placeholder; } @@ -96,44 +104,24 @@ $field { } } -.labelWrapper { - // position: relative; - // border: 1px solid pink; - // max-height: 48px; - // padding-bottom: -32px; - // z-index: 2; -} .label { - // color: $c-label; - // font-size: 16px; - // font-weight: 400; - // left: 5px; - // line-height: 1; - // pointer-events: none; - // position: absolute; - // top: 10px; - // transition: all 0.25s ease; - - - // border: 1px solid red; - color: var(--c-active-input); - font-size: 12px; - // margin-bottom: -5px; - margin-left: 16px; - padding: 0 4px; - margin-top: -7px!important; - display: block; - z-index: 2; - background-color: white; - position: relative; - width: max-content; - - // transition: all 0.125s ease; + color: var(--c-active-input); + font-size: 12px; + margin-left: 16px; + padding: 0 4px; + margin-top: -7px!important; + display: block; + z-index: 2; + background-color: white; + position: relative; + width: max-content; - &.isActive { - // padding: 0 16px; - // margin-left: 24px; + &.isDisabled { + background: white; + border-color: $c-disabled; + color: $c-disabled; + cursor: not-allowed; } } @@ -158,6 +146,7 @@ $field { transform: scaleY(1); transition: opacity 0.5s ease; z-index: $z-upmax; + margin-top: 50px; } &.isMobile { @@ -173,19 +162,23 @@ $field { } .option { - color: $c-text; + color: $c-grey-1; + font-size: 14px; cursor: pointer; padding: 10px 16px; + display: flex; + justify-content: space-between; &:hover { - background: $c-secondary-light; + background: $color-light-1; } &.isSelected { - background: $c-secondary; - border: 1px solid red; color: $c-blue-1; + } + .selectedIcon { + align-items: right; } } @@ -205,31 +198,32 @@ $field { .isOutline { .input { - border: 1px solid $c-border; - border-radius: 3px; + border: 1px solid $c-grey-1; + color: $c-grey-1; + border-radius: 2px; line-height: 5px; padding: 24px 14px 22px; + + &:hover { + border-color: $c-hover; + } } .arrow { right: 5px; - top: 16px; + top: 22px; } .label { - // padding-left: 10px; margin-bottom: -8px; - - - &.isActive { - background: $white; - // left: 10px; - // padding: 0 5px; - // top: -6px; - } } .menu { top: 10px; } + + .isFocus { + border-color: $c-blue-1!important; + outline: 1px solid $c-blue-1; + } } From 5e4b992aa78cc10c2c7cff174cc2c3f4702bf58f Mon Sep 17 00:00:00 2001 From: Michel Santos Date: Mon, 21 Aug 2023 17:09:12 -0300 Subject: [PATCH 5/6] feat: added disabled mode to label --- source/components/form/elements/form-control-label.js | 4 ++++ source/components/form/elements/form-control-label.styl | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/source/components/form/elements/form-control-label.js b/source/components/form/elements/form-control-label.js index aafa591ec..4a2d77d69 100644 --- a/source/components/form/elements/form-control-label.js +++ b/source/components/form/elements/form-control-label.js @@ -33,6 +33,7 @@ class FormControlLabel extends Component { static propTypes = { label: PropTypes.string, labelHighLight: PropTypes.bool, + disabled: PropTypes.bool, placeholder: PropTypes.string, activeLabel: PropTypes.bool, onBlur: PropTypes.func, @@ -93,6 +94,7 @@ class FormControlLabel extends Component { iconLeft, iconLeftClick, context, + disabled, ...rest } = this.props; @@ -111,6 +113,7 @@ class FormControlLabel extends Component { [styles.isAutofilled]: this.state.isAutofilled, [styles[`has-${validationState}`]]: validationState, [styles.isOutline]: this.props.outline, + [styles.disabled]: disabled, }); const inputClasses = classNames(styles.formControl, { @@ -148,6 +151,7 @@ class FormControlLabel extends Component { onHover={this.onHoverLabel} onBlur={this.onBlurLabel} checkIsAutofilled={this.checkIsAutofilled} + disabled={disabled} /> {typeof iconRight === 'string' ? diff --git a/source/components/form/elements/form-control-label.styl b/source/components/form/elements/form-control-label.styl index 52b5466ea..e8a65c6a7 100644 --- a/source/components/form/elements/form-control-label.styl +++ b/source/components/form/elements/form-control-label.styl @@ -7,6 +7,7 @@ $c-label = #00A0b2; $c-label-active = #878786; $c-text-default = #333; $c-border-input = #60605f; +$c-disabled = #c7c7c7; /* ========================================================================== Form Label Component @@ -64,6 +65,10 @@ Form Label Component } } +.disabled { + color: $c-disabled; +} + .iconRight, .iconLeft { pointer-events: none; position: absolute; From 1b319473478a29ea996b45a906130d2480348c70 Mon Sep 17 00:00:00 2001 From: Michel Santos Date: Thu, 31 Aug 2023 14:12:06 -0300 Subject: [PATCH 6/6] chore: added beta tag --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 44161ef1d..a3c628d62 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@b2wads/grimorio-ui", "sideEffects": false, - "version": "10.1.7", + "version": "10.1.8-beta", "description": "UI just like magic", "main": "lib/index.js", "repository": "https://github.com/b2wads/grimorio-ui",