Skip to content

Commit

Permalink
fix(select): make menu position adjustable (#6305)
Browse files Browse the repository at this point in the history 
* feat(select): make menu placement adjustable

* fix: resolve merge issue

* fix: update snapshots
  • Loading branch information
@aweiss-dev
aweiss-dev committed Jun 18, 2024
1 parent c4ddaa3 commit 72fc348
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 68 deletions.
10 changes: 9 additions & 1 deletion packages/react-ui-kit/src/Form/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ interface SelectProps<IsMulti extends boolean, Group extends GroupBase<Option>>
required?: boolean;
isMulti?: IsMulti;
isSearchable?: boolean;
overlayMenu?: boolean;
}

export const Select = <IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({
Expand All @@ -74,6 +75,7 @@ export const Select = <IsMulti extends boolean = false, Group extends GroupBase<
markInvalid = false,
required = false,
isSearchable = false,
overlayMenu = true,
...props
}: SelectProps<IsMulti, Group>) => {
const theme = useTheme();
Expand Down Expand Up @@ -101,7 +103,13 @@ export const Select = <IsMulti extends boolean = false, Group extends GroupBase<

<ReactSelect
id={id}
styles={customStyles(theme as Theme, markInvalid) as StylesConfig}
styles={
customStyles({
theme: theme as Theme,
markInvalid,
menuPosition: overlayMenu ? 'absolute' : 'relative',
}) as StylesConfig
}
components={{
SelectContainer,
DropdownIndicator,
Expand Down
56 changes: 33 additions & 23 deletions packages/react-ui-kit/src/Form/SelectStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,12 @@ import {isGroup} from './SelectComponents';

import {Theme} from '../Layout';

export const customStyles = (theme: Theme, markInvalid = false) => ({
interface CustomStylesParams {
theme: Theme;
markInvalid?: boolean;
menuPosition?: 'absolute' | 'relative';
}
export const customStyles = ({theme, markInvalid = false, menuPosition = 'absolute'}: CustomStylesParams) => ({
indicatorSeparator: () => ({
display: 'none',
}),
Expand All @@ -34,14 +39,36 @@ export const customStyles = (theme: Theme, markInvalid = false) => ({
const isSelectDisabled = selectProps.isDisabled;

return {
'& > div > div[class$="-Control"]': {
...inputStyle(theme, {disabled: isSelectDisabled, markInvalid}),
borderRadius: 12,
minHeight: 48,
...(isDisabled && {
backgroundColor: theme.Input.backgroundColorDisabled,
color: theme.Select.disabledColor,
cursor: 'default',
}),
...(markInvalid && {
boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
}),
...(menuIsOpen && {
boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
'&:hover': {
boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
},
}),
cursor: !isSelectDisabled && 'pointer',
'&:focus:visible, active': {
boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
},
},
'& > div': isGroup(options)
? {
display: 'inline',
position: 'relative',
top: '-10px',
}
: {
...inputStyle(theme, {disabled: isSelectDisabled, markInvalid}),
padding: 0,
height: 'auto',
minHeight: '48px',
Expand All @@ -50,24 +77,6 @@ export const customStyles = (theme: Theme, markInvalid = false) => ({
textShadow: '0 0 0 #000',
},
position: 'relative',
...(isDisabled && {
backgroundColor: theme.Input.backgroundColorDisabled,
color: theme.Select.disabledColor,
cursor: 'default',
}),
...(markInvalid && {
boxShadow: `0 0 0 1px ${theme.general.dangerColor}`,
}),
...(menuIsOpen && {
boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
'&:hover': {
boxShadow: `0 0 0 1px ${theme.general.primaryColor}`,
},
}),
cursor: !isSelectDisabled && 'pointer',
'&:focus:visible, active': {
boxShadow: !isSelectDisabled && `0 0 0 1px ${theme.general.primaryColor}`,
},
},
};
},
Expand Down Expand Up @@ -112,13 +121,14 @@ export const customStyles = (theme: Theme, markInvalid = false) => ({
marginBottom: 0,
marginTop: 4,
overflowY: 'overlay',
position: menuPosition,
...(isGroup(options) && {
minWidth: '400px',
}),
}),
menuList: provided => ({
...provided,
borderRadius: 12,
borderRadius: 0,
paddingBottom: 0,
paddingTop: 0,
maxHeight: 400,
Expand Down Expand Up @@ -196,14 +206,14 @@ export const customStyles = (theme: Theme, markInvalid = false) => ({
}),
...(!isGroup(options) && {
'&:first-of-type': {
borderRadius: '12px 12px 0 0',
borderRadius: '0',
},
}),
...(isGroup(options) && {
textAlign: 'left',
}),
'&:last-of-type': {
...(!isGroup(options) && {borderRadius: '0 0 12px 12px'}),
...(!isGroup(options) && {borderRadius: '0'}),
...(isGroup(options) &&
!options[options.length - 1].options.includes(data) && {
borderBottom: `1px solid ${theme.Select.borderColor}`,
Expand Down
106 changes: 62 additions & 44 deletions packages/react-ui-kit/src/Form/__snapshots__/Select.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,67 +16,73 @@ exports[`"Select" renders 1`] = `
color: #0667c8;
}
.emotion-2>div {
.emotion-2>div>div[class$="-Control"] {
background: #fff;
border: none;
border-radius: 12px;
box-shadow: 0 0 0 1px #dce0e3;
caret-color: #0667c8;
color: rgb(29, 30, 31);
font-weight: 400;
height: auto;
height: 48px;
line-height: 1.5rem;
outline: none;
padding: 0;
padding: 0 16px;
width: 100%;
min-height: 48px;
position: relative;
cursor: pointer;
}
.emotion-2>div::-moz-placeholder {
.emotion-2>div>div[class$="-Control"]::-moz-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
opacity: 1;
}
.emotion-2>div::-ms-input-placeholder {
.emotion-2>div>div[class$="-Control"]::-ms-input-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
}
.emotion-2>div::-webkit-input-placeholder {
.emotion-2>div>div[class$="-Control"]::-webkit-input-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
}
.emotion-2>div:hover {
.emotion-2>div>div[class$="-Control"]:hover {
box-shadow: 0 0 0 1px var(--text-input-border-hover);
}
.emotion-2>div:focus-visible,
.emotion-2>div:focus,
.emotion-2>div:active {
.emotion-2>div>div[class$="-Control"]:focus-visible,
.emotion-2>div>div[class$="-Control"]:focus,
.emotion-2>div>div[class$="-Control"]:active {
box-shadow: 0 0 0 1px #0667c8;
}
.emotion-2>div:invalid:not(:focus, :hover) {
.emotion-2>div>div[class$="-Control"]:invalid:not(:focus, :hover) {
box-shadow: 0 0 0 1px #dce0e3;
}
.emotion-2>div>div[class$="-Control"]:focus:visible,
.emotion-2>div>div[class$="-Control"] active {
box-shadow: 0 0 0 1px #0667c8;
}
.emotion-2>div {
padding: 0;
height: auto;
min-height: 48px;
position: relative;
}
.emotion-2>div:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.emotion-2>div:focus:visible,
.emotion-2>div active {
box-shadow: 0 0 0 1px #0667c8;
}
.emotion-3 {
z-index: 9999;
border: 0;
Expand Down Expand Up @@ -307,53 +313,59 @@ exports[`"Select" renders as disabled 1`] = `
color: #0667c8;
}
.emotion-2>div {
.emotion-2>div>div[class$="-Control"] {
background: #edeff0;
border: none;
border-radius: 12px;
box-shadow: 0 0 0 1px #dce0e3;
caret-color: #0667c8;
color: #676b71;
font-weight: 400;
height: auto;
height: 48px;
line-height: 1.5rem;
outline: none;
padding: 0;
padding: 0 16px;
width: 100%;
min-height: 48px;
position: relative;
background-color: #edeff0;
}
.emotion-2>div::-moz-placeholder {
.emotion-2>div>div[class$="-Control"]::-moz-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
opacity: 1;
}
.emotion-2>div::-ms-input-placeholder {
.emotion-2>div>div[class$="-Control"]::-ms-input-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
}
.emotion-2>div::-webkit-input-placeholder {
.emotion-2>div>div[class$="-Control"]::-webkit-input-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
}
.emotion-2>div:focus-visible,
.emotion-2>div:focus,
.emotion-2>div:active {
.emotion-2>div>div[class$="-Control"]:focus-visible,
.emotion-2>div>div[class$="-Control"]:focus,
.emotion-2>div>div[class$="-Control"]:active {
box-shadow: 0 0 0 1px #0667c8;
}
.emotion-2>div:invalid:not(:focus, :hover) {
.emotion-2>div>div[class$="-Control"]:invalid:not(:focus, :hover) {
box-shadow: 0 0 0 1px #dce0e3;
}
.emotion-2>div {
padding: 0;
height: auto;
min-height: 48px;
position: relative;
}
.emotion-2>div:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
Expand Down Expand Up @@ -594,63 +606,69 @@ exports[`"Select" renders as invalid 1`] = `
color: #0667c8;
}
.emotion-2>div {
.emotion-2>div>div[class$="-Control"] {
background: #fff;
border: none;
border-radius: 12px;
box-shadow: 0 0 0 1px #c20013;
caret-color: #0667c8;
color: rgb(29, 30, 31);
font-weight: 400;
height: auto;
height: 48px;
line-height: 1.5rem;
outline: none;
padding: 0;
padding: 0 16px;
width: 100%;
min-height: 48px;
position: relative;
cursor: pointer;
}
.emotion-2>div::-moz-placeholder {
.emotion-2>div>div[class$="-Control"]::-moz-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
opacity: 1;
}
.emotion-2>div::-ms-input-placeholder {
.emotion-2>div>div[class$="-Control"]::-ms-input-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
}
.emotion-2>div::-webkit-input-placeholder {
.emotion-2>div>div[class$="-Control"]::-webkit-input-placeholder {
color: rgb(80, 82, 84);
font-size: 1rem;
text-transform: none;
}
.emotion-2>div:hover {
.emotion-2>div>div[class$="-Control"]:hover {
box-shadow: 0 0 0 1px var(--text-input-border-hover);
}
.emotion-2>div:focus-visible,
.emotion-2>div:focus,
.emotion-2>div:active {
.emotion-2>div>div[class$="-Control"]:focus-visible,
.emotion-2>div>div[class$="-Control"]:focus,
.emotion-2>div>div[class$="-Control"]:active {
box-shadow: 0 0 0 1px #0667c8;
}
.emotion-2>div>div[class$="-Control"]:focus:visible,
.emotion-2>div>div[class$="-Control"] active {
box-shadow: 0 0 0 1px #0667c8;
}
.emotion-2>div {
padding: 0;
height: auto;
min-height: 48px;
position: relative;
}
.emotion-2>div:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.emotion-2>div:focus:visible,
.emotion-2>div active {
box-shadow: 0 0 0 1px #0667c8;
}
.emotion-3 {
z-index: 9999;
border: 0;
Expand Down

0 comments on commit 72fc348

Please sign in to comment.