From 4f92c27bd3e29dfce07635ca7fb6936a46afe490 Mon Sep 17 00:00:00 2001 From: Radek Podrazky Date: Fri, 11 Oct 2024 12:11:12 +0200 Subject: [PATCH] feat(forms): implement hover styles for fields Ref UXD-1651 --- ...rms_InputGroup_Input Group With Button.png | Bin 5287 -> 5731 bytes ...ts_forms_InputGroup_Nested Input Group.png | Bin 5625 -> 5706 bytes .../BaseSingleDatePicker/SingleDatePicker.tsx | 2 ++ .../SingleDatePicker.types.ts | 1 + .../_internal/BaseSingleDatePicker/styles.ts | 8 ++++++++ src/components/forms/Checkbox/Checkbox.tsx | 14 ++++++++++---- src/components/forms/Input/Input.tsx | 13 +++++++++++-- .../forms/InputGroup/InputGroup.tsx | 18 +++++++++++++----- .../forms/MultiValueInput/MultiValueInput.tsx | 14 ++++++++++++-- src/components/forms/Radio/Radio.tsx | 5 +++++ src/components/forms/Select/Select.styles.tsx | 8 ++++++-- src/components/forms/TextArea/TextArea.tsx | 15 ++++++++++++--- 12 files changed, 80 insertions(+), 18 deletions(-) diff --git a/.storybook/image-snapshots/expected/components_forms_InputGroup_Input Group With Button.png b/.storybook/image-snapshots/expected/components_forms_InputGroup_Input Group With Button.png index 357077fcdf84be523f9df2c39a4d2c910cda29a7..f4e9ad9e736c2b42cef710bc83112a824a1c2f46 100644 GIT binary patch delta 3121 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 delta 3023 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 diff --git a/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.tsx b/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.tsx index f3f506220..2a400240c 100644 --- a/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.tsx +++ b/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.tsx @@ -31,6 +31,7 @@ const SingleDatePicker = ({ defaultIsYearPickerOpen, startDate, endDate, + isDisabled = false, }: SingleDatePickerProps) => { const [showYearPicker, setShowYearPicker] = useState(defaultIsYearPickerOpen); const pickerRef = useRef({ calendar: { instanceRef: { changeYear: noop } } }); @@ -42,6 +43,7 @@ const SingleDatePicker = ({ calendarClassName="DateRangePicker-calendar" className="DateRangePicker-input" dateFormat="d MMM, yyyy" + disabled={isDisabled} endDate={endDate} maxDate={maxDate} minDate={minDate} diff --git a/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.types.ts b/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.types.ts index 36ea7ff96..6757c8a8d 100644 --- a/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.types.ts +++ b/src/components/_internal/BaseSingleDatePicker/SingleDatePicker.types.ts @@ -8,4 +8,5 @@ export interface SingleDatePickerProps { defaultIsYearPickerOpen?: boolean; startDate?: Date; endDate?: Date; + isDisabled?: boolean; } diff --git a/src/components/_internal/BaseSingleDatePicker/styles.ts b/src/components/_internal/BaseSingleDatePicker/styles.ts index f481b3a7f..4a1d57ff0 100644 --- a/src/components/_internal/BaseSingleDatePicker/styles.ts +++ b/src/components/_internal/BaseSingleDatePicker/styles.ts @@ -16,6 +16,14 @@ export const datePickerStyles = css` line-height: var(--sscds-font-lineheight-body-md); font-weight: var(--sscds-font-weight-body-default); } + .DateRangePicker-input:disabled { + box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-disabled); + background: var(--sscds-color-background-input-disabled); + } + .DateRangePicker-input:hover:not(:disabled, :focus) { + box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover); + background: var(--sscds-color-background-input-hover); + } .DateRangePicker-input:focus { box-shadow: inset 0 0 0 2px ${getFormStyle('focusBorderColor')}; outline: none; diff --git a/src/components/forms/Checkbox/Checkbox.tsx b/src/components/forms/Checkbox/Checkbox.tsx index 2a75826b8..e1ca74a29 100644 --- a/src/components/forms/Checkbox/Checkbox.tsx +++ b/src/components/forms/Checkbox/Checkbox.tsx @@ -61,6 +61,7 @@ const CheckboxInput = styled.input` &:disabled + ${Box} { border-color: ${getFormStyle('disabledBorderColor')}; background: ${getFormStyle('disabledBgColor')}; + cursor: not-allowed; } &:disabled:checked + ${Box} { @@ -69,6 +70,11 @@ const CheckboxInput = styled.input` } } + &:hover:not(:disabled, :checked) + ${Box} { + border-color: var(--sscds-color-border-input-hover); + background: var(--sscds-color-background-input-hover); + } + &:focus + ${Box} { border: 2px solid ${getFormStyle('activeBorderColor')}; } @@ -76,8 +82,8 @@ const CheckboxInput = styled.input` ${({ isIndeterminate }) => isIndeterminate && css` - & + ${Box} { - background: ${getFormStyle('activeBorderColor')}; + & + ${Box}, &:hover + ${Box} { + background: ${getFormStyle('activeBorderColor')} !important; border-color: ${getFormStyle('activeBorderColor')}; ${Mark} { display: block; @@ -93,8 +99,8 @@ const CheckboxInput = styled.input` ${({ isInvalid }) => isInvalid && css` - & + ${Box}, &:checked + ${Box} { - border: 2px solid ${getFormStyle('invalidBorderColor')}; + & + ${Box}, &:checked + ${Box}, &:hover + ${Box} { + border: 2px solid ${getFormStyle('invalidBorderColor')} !important; } `} `; diff --git a/src/components/forms/Input/Input.tsx b/src/components/forms/Input/Input.tsx index 0da08a130..e9b5b2ffd 100644 --- a/src/components/forms/Input/Input.tsx +++ b/src/components/forms/Input/Input.tsx @@ -33,11 +33,19 @@ const Input = styled.input.attrs( line-height: ${getFormStyle('fieldLineHeight')}; outline: none; + &:hover:not(:disabled, :focus, .focus) { + box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover); + background: var(--sscds-color-background-input-hover); + } + ${({ isInvalid }) => isInvalid && css` - box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')}; - `} + &, + &:hover { + box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')} !important; + } + `}; &:focus, &.focus { @@ -47,6 +55,7 @@ const Input = styled.input.attrs( &:disabled { background: ${getFormStyle('disabledBgColor')}; border-color: ${getFormStyle('disabledBorderColor')}; + cursor: not-allowed; } ::placeholder, diff --git a/src/components/forms/InputGroup/InputGroup.tsx b/src/components/forms/InputGroup/InputGroup.tsx index 4e03ba4b2..be62af20e 100644 --- a/src/components/forms/InputGroup/InputGroup.tsx +++ b/src/components/forms/InputGroup/InputGroup.tsx @@ -11,7 +11,6 @@ import { Icon } from '../../Icon'; import { Inline, Padbox } from '../../layout'; import { InputGroupProps } from './InputGroup.types'; import { InlineProps } from '../../layout/Inline/Inline'; -import { Button } from '../../Button'; import { SearchBar } from '../SearchBar'; import { CLX_COMPONENT } from '../../../theme/constants'; import { useLogger } from '../../../hooks/useLogger'; @@ -23,6 +22,11 @@ const InputGroupContainer = styled(Inline)` box-shadow: inset 0 0 0 1px ${getFormStyle('borderColor')}; border-radius: var(--sscds-radii-input); + &:hover { + box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover); + background: var(--sscds-color-background-input-hover); + } + .ssc__control { border: 0px; box-shadow: none; @@ -31,14 +35,19 @@ const InputGroupContainer = styled(Inline)` border: none; border-radius: 0px; } - & > *, + & > *:not(.sscds-buttonv2), input:not([id^='react-select']) { border: none; box-shadow: none; border-radius: 0px; background-color: transparent; + + &:hover { + box-shadow: none; + background: transparent; + } } - & > * { + & > *:not(.sscds-buttonv2) { ${(props) => props.hasDivider && `border-right: 1px solid ${getFormStyle('borderColor')(props)};`} @@ -70,7 +79,6 @@ const InputGroup = ({ Select, Input, Icon, - Button, ButtonV2, IconButton, Password, @@ -80,7 +88,7 @@ const InputGroup = ({ Children.forEach(children, (child) => { if (!ALLOWED_CHILDREN.includes(prop('type', child))) { error( - 'Only Select, Input, InputGroup, Icon, Button, ButtonV2, IconButton, SearchBar and Password are valid childs of InputGroup', + 'Only Select, Input, InputGroup, Icon, ButtonV2, IconButton, SearchBar and Password are valid childs of InputGroup', ); } }); diff --git a/src/components/forms/MultiValueInput/MultiValueInput.tsx b/src/components/forms/MultiValueInput/MultiValueInput.tsx index c2a04c63c..d1a26091a 100644 --- a/src/components/forms/MultiValueInput/MultiValueInput.tsx +++ b/src/components/forms/MultiValueInput/MultiValueInput.tsx @@ -50,6 +50,12 @@ const Control = styled.div` background: ${getFormStyle('bgColor')}; border-radius: var(--sscds-radii-input); box-shadow: inset 0 0 0 1px ${getFormStyle('borderColor')}; + cursor: text; + + &:hover { + box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover); + background: var(--sscds-color-background-input-hover); + } &:focus-within, &.focus-within { @@ -60,8 +66,12 @@ const Control = styled.div` ${({ $isDisabled }) => $isDisabled && css` - background: ${getFormStyle('disabledBgColor')}; - box-shadow: inset 0 0 0 1px ${getFormStyle('disabledBorderColor')}; + &, + &:hover { + background: ${getFormStyle('disabledBgColor')}; + box-shadow: inset 0 0 0 1px ${getFormStyle('disabledBorderColor')}; + cursor: not-allowed; + } `}; ${({ $isInvalid }) => diff --git a/src/components/forms/Radio/Radio.tsx b/src/components/forms/Radio/Radio.tsx index 745a0ad0a..ba2c3cb74 100644 --- a/src/components/forms/Radio/Radio.tsx +++ b/src/components/forms/Radio/Radio.tsx @@ -53,6 +53,11 @@ const RadioLabel = styled(Label)< border: 1px solid ${getFormStyle('borderColor')}; background-color: ${getFormStyle('bgColor')}; } + + &:hover::before { + border-color: var(--sscds-color-border-input-hover); + background: var(--sscds-color-background-input-hover); + } `; const RadioInput = styled.input` diff --git a/src/components/forms/Select/Select.styles.tsx b/src/components/forms/Select/Select.styles.tsx index e8c10d62a..c3a1ed564 100644 --- a/src/components/forms/Select/Select.styles.tsx +++ b/src/components/forms/Select/Select.styles.tsx @@ -66,7 +66,7 @@ const stateStyles = ( color: `var(--sscds-${string})`, width: `${string}px`, ) => ({ - boxShadow: `inset 0 0 0 ${width} ${color}`, + boxShadow: `inset 0 0 0 ${width} ${color} !important`, }); const invalidStyles = { @@ -123,7 +123,11 @@ export const selectStyles: ( fontSize: 'var(--sscds-font-size-body-md)', lineHeight: 'var(--sscds-font-lineheight-body-md)', outline: 'none', - + ':hover': { + boxShadow: + 'inset 0px 0px 0px 1px var(--sscds-color-border-input-hover)', + background: 'var(--sscds-color-background-input-hover)', + }, ...(isInvalid && invalidStyles), ...((isFocused || includes('focus', className)) && focusStyles), ...(isDisabled && disabledStyles), diff --git a/src/components/forms/TextArea/TextArea.tsx b/src/components/forms/TextArea/TextArea.tsx index e681851b8..ad2e2bca1 100644 --- a/src/components/forms/TextArea/TextArea.tsx +++ b/src/components/forms/TextArea/TextArea.tsx @@ -61,6 +61,9 @@ const TextareaStyled = styled.textarea` :-ms-input-placeholder { color: ${getFormStyle('placeholderColor')}; } + :disabled { + cursor: not-allowed; + } `; const TextareaRoot = styled(Padbox)` @@ -79,15 +82,21 @@ const TextareaRoot = styled(Padbox)` ${({ $isDisabled }) => $isDisabled && css` - background: ${getFormStyle('disabledBgColor')}; - box-shadow: inset 0px 0px 0px 1px ${getFormStyle('disabledBorderColor')}; + background: ${getFormStyle('disabledBgColor')} !important; + box-shadow: inset 0px 0px 0px 1px ${getFormStyle('disabledBorderColor')} !important; + cursor: not-allowed; `}; ${({ $isInvalid }) => $isInvalid && css` - box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')}; + box-shadow: inset 0px 0px 0px 2px ${getFormStyle('invalidBorderColor')} !important; `}; + &:hover:not(:focus-within) { + box-shadow: inset 0px 0px 0px 1px var(--sscds-color-border-input-hover); + background: var(--sscds-color-background-input-hover); + } + &:focus-within { outline: none; box-shadow: inset 0px 0px 0px 2px ${getFormStyle('focusBorderColor')};