diff --git a/components/core/Jumper/index.js b/components/core/Jumper/index.js index 43c48b2d..404f22f7 100644 --- a/components/core/Jumper/index.js +++ b/components/core/Jumper/index.js @@ -47,7 +47,7 @@ function Root({ children, onClose, ...props }) { initial={{ y: 10, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: 10, opacity: 0 }} - transition={{ duration: 0.4, ease: "easeInOut" }} + transition={{ duration: 0.25, ease: "easeInOut" }} css={STYLES_JUMPER_ROOT} {...props} > diff --git a/components/system/components/GlobalCarousel/jumpers/EditChannels.js b/components/system/components/GlobalCarousel/jumpers/EditChannels.js index 8a975b71..46b30a2b 100644 --- a/components/system/components/GlobalCarousel/jumpers/EditChannels.js +++ b/components/system/components/GlobalCarousel/jumpers/EditChannels.js @@ -8,6 +8,7 @@ import * as UserBehaviors from "~/common/user-behaviors"; import * as Constants from "~/common/constants"; import * as MobileJumper from "~/components/system/components/GlobalCarousel/jumpers/MobileLayout"; import * as Strings from "~/common/strings"; +import * as Validations from "~/common/validations"; import { Show } from "~/components/utility/Show"; import { css } from "@emotion/react"; @@ -33,10 +34,12 @@ const STYLES_CHANNEL_BUTTON_SELECTED = (theme) => css` function ChannelButton({ children, isSelected, css, ...props }) { return ( ); } @@ -74,8 +77,12 @@ function ChannelKeyboardShortcut({ searchResults, searchQuery, onAddFileToChanne return (
- - Select {selectedChannel.isPublic ? "public" : "private"} tag "{selectedChannel.slatename}" + + Select {selectedChannel.isPublic ? "public" : "private"} tag " + + {selectedChannel.slatename} + + " ⏎ @@ -190,6 +197,8 @@ function Channels({ onAddFileToChannel(channel, channel.doesContainFile)} + title={channel.slatename} + style={{ maxWidth: "48ch" }} > {channel.slatename} @@ -201,6 +210,7 @@ function Channels({ onCreateChannel(searchQuery)} + title={searchQuery} > {searchQuery} @@ -312,7 +322,10 @@ const useChannelsSearch = ({ privateChannels, publicChannels }) => { const handleQueryChange = (e) => { const nextValue = e.target.value; - setQuery(Strings.createSlug(nextValue, "")); + //NOTE(amine): allow input's value to be empty but keep other validations + if (Strings.isEmpty(nextValue) || Validations.slatename(nextValue)) { + setQuery(Strings.createSlug(nextValue, "")); + } }; const clearQuery = () => setQuery(""); @@ -376,7 +389,7 @@ export function EditChannels({ file, viewer, isOpen, onClose, onAction }) { ) : ( - +