Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chat input area component #957

Merged
merged 9 commits into from
Jan 10, 2024
Merged

Chat input area component #957

merged 9 commits into from
Jan 10, 2024

Conversation

burieberry
Copy link
Contributor

@burieberry burieberry commented Jan 9, 2024

1- Kept the hover and focus states to remain consistent with rest of boxel inputs and also for better accessibility
2- Pressing "enter" submits the text and "shift enter" creates a line break. Just noticed that in one of the designs it says "cmd enter" should submit the text, I will update. Updated: cmd+Enter or ctrl+Enter submits the message. enter creates line breaks.
3- The trick I used to expand textarea only works when there are line breaks. the only other way to do this without line breaks requires not using a textarea but casting a generic element as a contenteditable textbox, which is not great for accessibility and does not come with all the bindings.

From the ticket [CS 6424]:

  • Initial state of text field accommodates 2 lines of text
  • Text field expands VERTICALLY to accommodate up to 5 lines
  • Scroll for text that exceeds 5 lines
empty

hover state:
hover

focus state:
focus

no scroll up to 5 lines:
5-lines

scrolls over 5 lines:
scroll

@burieberry burieberry requested a review from a team January 9, 2024 15:43
Copy link

github-actions bot commented Jan 9, 2024

Test Results

489 tests  ±0   485 ✔️ ±0   6m 24s ⏱️ -3s
    1 suites ±0       4 💤 ±0 
    1 files   ±0       0 ±0 

Results for commit ecb1555. ± Comparison against base commit 121186e.

♻️ This comment has been updated with latest results.

Copy link
Contributor

@backspace backspace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good, I haven’t seen that derived height before, works well! 🤩

};
}

export default class OnKeyModifier extends Modifier<Signature> {}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we produce enough of these maybe we can just do this 😆

@burieberry burieberry requested a review from a team January 9, 2024 20:13
@burieberry burieberry merged commit ed11ef8 into main Jan 10, 2024
22 checks passed
@delete-merged-branch delete-merged-branch bot deleted the cs-6424-chat-input branch January 10, 2024 18:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants