Fixed search input colours and click outside to close#1973
Open
weylandswart wants to merge 1 commit into
Open
Conversation
Closes https://linear.app/ghost/issue/DES-1037/regression-input-field-text-color-in-callout-emoji-picker-is-too-light Improves contrast in the search input and adds click outside to close the emoji picker.
WalkthroughThis PR adds a click-outside handler capability to the Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx (1)
128-128: ⚡ Quick winMemoize the
onClickOutsidecallback.The inline arrow function creates a new reference on every render, causing the click-outside listener in
EmojiPickerPortalto be re-registered unnecessarily.⚡ Suggested fix using useCallback
Add the memoized callback after line 101:
const emojiButtonRef = React.useRef(null); const {darkMode} = React.useContext(KoenigComposerContext); + +const handleClickOutside = React.useCallback(() => { + setShowEmojiPicker(false); +}, [setShowEmojiPicker]);Then use the memoized callback at line 128:
- onClickOutside={() => setShowEmojiPicker(false)} + onClickOutside={handleClickOutside}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx` at line 128, The inline onClickOutside prop is recreating a new function each render and causing EmojiPickerPortal to re-register its click-outside listener; memoize it by creating a useCallback hook (e.g., const handleEmojiPickerClickOutside = useCallback(() => setShowEmojiPicker(false), [setShowEmojiPicker])) inside the CalloutCard component and pass handleEmojiPickerClickOutside to EmojiPickerPortal instead of the inline arrow function.packages/koenig-lexical/src/styles/components/koenig-lexical.css (1)
89-101: ⚡ Quick winScope
em-emoji-pickerstyles under.koenig-lexicalfor guideline compliance.The
em-emoji-pickerselector is not scoped under.koenig-lexical, which violates the coding guideline. The dark-mode styles (lines 60-69) are properly scoped, creating an inconsistency. As per coding guidelines, all styles in this file should be scoped under the.koenig-lexicalclass.♻️ Suggested refactor to scope the selector
-.koenig-lexical.koenig-lexical-caption { - font-size: 0; - - > * { - font-size: 1.4rem; - } -} - -/* Caption in dark mode */ -.koenig-lexical-caption p { - color: var(--grey-800); -} - -.dark .koenig-lexical-caption p { - color: var(--grey-500); -} - -em-emoji-picker { +.koenig-lexical em-emoji-picker { --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Droid Sans", "Helvetica Neue", sans-serif; --border-radius: 5px; /* --background-rgb: 85, 170, 255; */ --font-size: 13px; --rgb-accent: 57, 64, 71; --rgb-color: 57, 64, 71; --em-rgb-accent: (255,0,0) /* --rgb-input: 255, 235, 235; */; --shadow: 0 0 1px rgba(0,0,0,.05), 0 5px 18px rgba(0,0,0,.08); height: 325px; } - em-emoji-picker `#nav` button[aria-selected] svg { +.koenig-lexical em-emoji-picker `#nav` button[aria-selected] svg { fill: red; } - em-emoji-picker .search input[type="search"] { +.koenig-lexical em-emoji-picker .search input[type="search"] { border-radius: 5px; } + +.koenig-lexical.koenig-lexical-caption { + font-size: 0; + + > * { + font-size: 1.4rem; + } +} + +/* Caption in dark mode */ +.koenig-lexical-caption p { + color: var(--grey-800); +} + +.dark .koenig-lexical-caption p { + color: var(--grey-500); +}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/koenig-lexical/src/styles/components/koenig-lexical.css` around lines 89 - 101, The em-emoji-picker block is not scoped under .koenig-lexical; wrap or rename the selector so the rules apply only within the Koenig component (e.g., change em-emoji-picker { ... } to .koenig-lexical em-emoji-picker { ... }) to match the dark-mode blocks and comply with the file's scoping guideline; ensure the same variable definitions and properties inside the selector remain unchanged when moved under .koenig-lexical.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@packages/koenig-lexical/src/components/ui/cards/CalloutCard.jsx`:
- Line 128: The inline onClickOutside prop is recreating a new function each
render and causing EmojiPickerPortal to re-register its click-outside listener;
memoize it by creating a useCallback hook (e.g., const
handleEmojiPickerClickOutside = useCallback(() => setShowEmojiPicker(false),
[setShowEmojiPicker])) inside the CalloutCard component and pass
handleEmojiPickerClickOutside to EmojiPickerPortal instead of the inline arrow
function.
In `@packages/koenig-lexical/src/styles/components/koenig-lexical.css`:
- Around line 89-101: The em-emoji-picker block is not scoped under
.koenig-lexical; wrap or rename the selector so the rules apply only within the
Koenig component (e.g., change em-emoji-picker { ... } to .koenig-lexical
em-emoji-picker { ... }) to match the dark-mode blocks and comply with the
file's scoping guideline; ensure the same variable definitions and properties
inside the selector remain unchanged when moved under .koenig-lexical.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5c773ccb-eafe-4a69-ac00-955a4cdc9d77
📒 Files selected for processing (3)
packages/koenig-lexical/src/components/ui/EmojiPickerPortal.jsxpackages/koenig-lexical/src/components/ui/cards/CalloutCard.jsxpackages/koenig-lexical/src/styles/components/koenig-lexical.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes https://linear.app/ghost/issue/DES-1037/regression-input-field-text-color-in-callout-emoji-picker-is-too-light
Improves contrast in the search input and adds click outside to close the emoji picker.