From 8c480810b953578af030ee8a8a0ac8101f313eee Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 28 Jan 2023 21:25:43 -0800 Subject: [PATCH 1/3] Fix menu width for desktop --- components/DropdownMenuContent/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/DropdownMenuContent/index.scss b/components/DropdownMenuContent/index.scss index ae38f67b..96fa2040 100644 --- a/components/DropdownMenuContent/index.scss +++ b/components/DropdownMenuContent/index.scss @@ -4,7 +4,7 @@ border-radius: 6px; box-shadow: 0 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box; - min-width: 15vw; + min-width: 30vw; margin: 0 $unit-2x; // top: $unit-8x; // This shouldn't be hardcoded. How to calculate it? // Also, add space that doesn't make the menu disappear if you move your mouse slowly From 6bc887c95b39dfe96a7d3683addfa3b8f38b3909 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sat, 28 Jan 2023 21:29:22 -0800 Subject: [PATCH 2/3] Add altText prop to Toast We changed things so we could insert React elements into the content field. --- components/Header/index.tsx | 2 ++ components/Toast/index.tsx | 4 +++- components/UpdateToast/index.tsx | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 66b527c2..7b7c4985 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -225,6 +225,7 @@ const Header = () => { const urlCopyToast = () => { return ( { const remixToast = () => { return ( {content}

{children && ( - + {children} )} diff --git a/components/UpdateToast/index.tsx b/components/UpdateToast/index.tsx index 51b6d009..d827abf0 100644 --- a/components/UpdateToast/index.tsx +++ b/components/UpdateToast/index.tsx @@ -54,6 +54,7 @@ const UpdateToast = ({ return ( Date: Sat, 28 Jan 2023 21:49:58 -0800 Subject: [PATCH 3/3] Fix double overlay on selects in modals Selects now take an optional property `overlayVisible` that if false, doesn't render visual elements of its overlay. --- components/AxSelect/index.tsx | 2 ++ components/ExtendedMasterySelect/index.tsx | 2 ++ components/JobSkillSearchFilterBar/index.tsx | 1 + components/Overlay/index.scss | 6 +++--- components/Select/index.tsx | 10 +++++++++- components/SelectTableField/index.tsx | 1 + components/SelectWithInput/index.tsx | 1 + components/WeaponKeySelect/index.tsx | 1 + 8 files changed, 20 insertions(+), 4 deletions(-) diff --git a/components/AxSelect/index.tsx b/components/AxSelect/index.tsx index 50ef3156..99ab9c7e 100644 --- a/components/AxSelect/index.tsx +++ b/components/AxSelect/index.tsx @@ -410,6 +410,7 @@ const AXSelect = (props: Props) => { onOpenChange={() => openSelect(1)} onValueChange={handleAX1SelectChange} triggerClass="modal" + overlayVisible={false} > {generateOptions(0)} @@ -439,6 +440,7 @@ const AXSelect = (props: Props) => { onValueChange={handleAX2SelectChange} triggerClass="modal" ref={secondaryAxModifierSelect} + overlayVisible={false} > {generateOptions(1)} diff --git a/components/ExtendedMasterySelect/index.tsx b/components/ExtendedMasterySelect/index.tsx index ff9cc218..ae97d9ae 100644 --- a/components/ExtendedMasterySelect/index.tsx +++ b/components/ExtendedMasterySelect/index.tsx @@ -135,6 +135,7 @@ const ExtendedMasterySelect = ({ onOpenChange={() => changeOpen('left')} onClose={onClose} triggerClass="Left modal" + overlayVisible={false} > {generateLeftOptions()} @@ -146,6 +147,7 @@ const ExtendedMasterySelect = ({ onValueChange={handleRightSelectChange} onOpenChange={() => changeOpen('right')} onClose={onClose} + overlayVisible={false} triggerClass={classNames({ Right: true, modal: true, diff --git a/components/JobSkillSearchFilterBar/index.tsx b/components/JobSkillSearchFilterBar/index.tsx index 7370818f..7eadbc2b 100644 --- a/components/JobSkillSearchFilterBar/index.tsx +++ b/components/JobSkillSearchFilterBar/index.tsx @@ -44,6 +44,7 @@ const JobSkillSearchFilterBar = (props: Props) => { value={-1} triggerClass="Bound" open={open} + overlayVisible={false} onValueChange={onChange} onOpenChange={openSelect} > diff --git a/components/Overlay/index.scss b/components/Overlay/index.scss index b94ff228..34d953a6 100644 --- a/components/Overlay/index.scss +++ b/components/Overlay/index.scss @@ -6,9 +6,6 @@ right: 0; bottom: 0; left: 0; - backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0); - animation: 0.24s ease-in fadeInFilter; - animation-fill-mode: forwards; &.Job { animation: none; @@ -16,6 +13,9 @@ } &.Visible { + animation: 0.24s ease-in fadeInFilter; + animation-fill-mode: forwards; + backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(0); background: rgba(0, 0, 0, 0.6); } } diff --git a/components/Select/index.tsx b/components/Select/index.tsx index 484ac4ab..b1a6bcb9 100644 --- a/components/Select/index.tsx +++ b/components/Select/index.tsx @@ -23,6 +23,7 @@ interface Props onValueChange?: (value: string) => void onClose?: () => void triggerClass?: string + overlayVisible?: boolean } const Select = React.forwardRef(function Select( @@ -94,7 +95,10 @@ const Select = React.forwardRef(function Select( <> - + (function Select( ) }) +Select.defaultProps = { + overlayVisible: true, +} + export default Select diff --git a/components/SelectTableField/index.tsx b/components/SelectTableField/index.tsx index cea99ce7..e64ea238 100644 --- a/components/SelectTableField/index.tsx +++ b/components/SelectTableField/index.tsx @@ -59,6 +59,7 @@ const SelectTableField = (props: Props) => { onClose={props.onClose} triggerClass={classNames({ Bound: true, Table: true })} value={value} + overlayVisible={false} > {props.children} diff --git a/components/SelectWithInput/index.tsx b/components/SelectWithInput/index.tsx index 7c88dfc6..966db681 100644 --- a/components/SelectWithInput/index.tsx +++ b/components/SelectWithInput/index.tsx @@ -173,6 +173,7 @@ const SelectWithInput = ({ onOpenChange={changeOpen} onClose={onClose} triggerClass="modal" + overlayVisible={false} > {generateOptions()} diff --git a/components/WeaponKeySelect/index.tsx b/components/WeaponKeySelect/index.tsx index a11c1474..fac77fe8 100644 --- a/components/WeaponKeySelect/index.tsx +++ b/components/WeaponKeySelect/index.tsx @@ -130,6 +130,7 @@ const WeaponKeySelect = React.forwardRef( onValueChange={handleChange} ref={ref} triggerClass="modal" + overlayVisible={false} > {emptyOption()}