## Description
Add `CandlestickChart` component for visualizing financial OHLC data
with candlestick patterns.
- Introduced a new CandlestickChart for displaying OHLC (Open, High,
Low, Close) values.
- Updated ChartStory to include stock price data and render multiple
candlestick chart variations.
- Enhanced theme with bullish and bearish colors for candlestick
representation.
- Updated documentation to include CandlestickChart examples and usage.
This addition enhances the charting library by providing a crucial tool
for visualizing stock market trends.
## Screenshot
<img width="1335" height="423" alt="image"
src="https://github.com/user-attachments/assets/5df7078e-a469-4262-b645-6434d08b7ccf"
/>
## How to Test
```bash
cargo run -p gpui-component-story
```
## Checklist
- [x] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document and
followed the guidelines.
- [x] Reviewed the changes in this PR and confirmed AI generated code
(If any) is accurate.
- [x] Passed `cargo run` for story tests related to the changes.
- [ ] Tested macOS, Windows and Linux platforms performance (if the
change is platform-specific)
## Description
When using `set_value` with a `code_editor("lang").multi_line(false)`
the highlighting and lsp will not be reset.
## Video
### Before
https://github.com/user-attachments/assets/5fef5b6e-478e-4233-a911-e087f889040a
### After
https://github.com/user-attachments/assets/3ea99060-8dba-4604-9d3f-c151b3aadcf2
## How to Test
`cargo run --release -- input`, enter some text in "Single line code
editor", click "Reset"
## Checklist
- [x] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document and
followed the guidelines.
- [x] Reviewed the changes in this PR and confirmed AI generated code
(If any) is accurate.
- [x] Passed `cargo run` for story tests related to the changes.
- [ ] Tested macOS, Windows and Linux platforms performance (if the
change is platform-specific)
Closes#1665
## Description
When `Input::new().font_family("font")` is used, the font hasn't been
applied yet in `Input::render`, therefore the `text_wrapper` will
calculate using the wrong font. This is why it's working when the font
is added to the parent element.
The fix moves the state update to `element` prepaint, where
`window.text_style()` has the correct styles. The only downside is that
there are now one additional state update.
## Screenshot
| Before | After |
| ---------------------------- | --------------------------- |
| <img width="1125" height="246" alt="Screenshot From 2025-11-30
20-03-11"
src="https://github.com/user-attachments/assets/1fa798a7-0b9c-4386-8940-ad5f6734b8a0"
/> | <img width="1125" height="246" alt="Screenshot From 2025-11-30
20-00-23"
src="https://github.com/user-attachments/assets/e970e7bc-1bfa-4a55-a342-3381d1684526"
/> |
## How to Test
Use some wide font, like `IBM Plex Mono`. Apply it to
`Input::new(&some_state).font_family("IBM Plex Mono")` where the input
state has `soft_wrap`. Here is a diff for `textarea_story.rs`.
```diff
diff --git a/crates/story/src/textarea_story.rs b/crates/story/src/textarea_story.rs
index f2c63d44..bd5cbb31 100644
--- a/crates/story/src/textarea_story.rs
+++ b/crates/story/src/textarea_story.rs
@@ -77,9 +77,9 @@ impl TextareaStory {
let textarea_no_wrap = cx.new(|cx| {
InputState::new(window, cx)
- .multi_line(true)
.rows(6)
- .soft_wrap(false)
+ .multi_line(true)
+ .soft_wrap(true)
.default_value("This is a very long line of text to test if the horizontal scrolling function is working properly, and it should not wrap automatically but display a horizontal scrollbar.\nThe second line is also very long text, used to test the horizontal scrolling effect under multiple lines, and you can input more content to test.\nThe third line: Here you can input other long text content that requires horizontal scrolling.\n")
});
@@ -195,7 +185,7 @@ impl Render for TextareaStory {
.child(
section("Auto Grow")
.max_w_md()
- .child(Input::new(&self.textarea_auto_grow)),
+ .child(Input::new(&self.textarea_auto_grow).font_family("IBM Plex Mono")),
)
.child(
section("Auto Grow with No Wrap")
```
## Checklist
- [x] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document and
followed the guidelines.
- [x] Reviewed the changes in this PR and confirmed AI generated code
(If any) is accurate.
- [x] Passed `cargo run` for story tests related to the changes.
- [ ] Tested macOS, Windows and Linux platforms performance (if the
change is platform-specific)
---------
Co-authored-by: Jason Lee <huacnlee@gmail.com>
## Screenshot
From `input_story`:
<img width="1069" height="122" alt="Screenshot From 2025-11-28 09-14-03"
src="https://github.com/user-attachments/assets/f14ef2fc-4939-4ceb-be3e-bede492f8602"
/>
## Breaking Changes
- `.multi_line()` was changed to `.multi_line(bool)`.
- Removed pub `InputMode`, this should only for internal.
```diff
InputState::new(window, cx)
- .multi_line()
+ .multi_line(true)
```
## Checklist
- [x] I have read the [CONTRIBUTING](../CONTRIBUTING.md) document and
followed the guidelines.
- [x] Reviewed the changes in this PR and confirmed AI generated code
(If any) is accurate.
- [x] Passed `cargo run` for story tests related to the changes.
- [ ] Tested macOS, Windows and Linux platforms performance (if the
change is platform-specific)
Use cases,
1) In my API client, I have a tree sitter language for the URL input,
<img width="1001" height="162" alt="Image"
src="https://github.com/user-attachments/assets/9771decf-b0b7-4230-8ed6-784a95b72af1"
/>
2) In my SQL editor I want to be able to allow JSON syntax highlighting
for inline editing of json columns,
<img width="501" height="130" alt="Image"
src="https://github.com/user-attachments/assets/f0f879cc-841f-49d2-a23a-2effc3747f38"
/>
---------
Co-authored-by: Jason Lee <huacnlee@gmail.com>
## Description
1. Add `overflow_scrollbar`, `overflow_y_scrollbar`, `overflow_x_scroll`
to GPUI elements to let them has scrollbars. It is almost like the
`overscroll` but adds the Scrollbar.
2. And adjust the display scrollbar of margining 4px of the container.
3. Add `scrollbar`, `vertical_scrollbar`, `horizontal_scrollbar` with
your own scroll handle.
<img width="1181" height="911" alt="image"
src="https://github.com/user-attachments/assets/8b02cd54-d527-4f22-b9be-f762ede22122"
/>
## Break Changes
- There `Scrollable` trait and it `scrollable` method has been removed.
```diff
- div().id("contents").scrollable(Axis::Vertical)
+ div().id("contents").overflow_y_scrollbar()
```
This PR to improve the Scrollbar API to manage the state in the
internal.
## Break Changes
Describe any breaking changes introduced by this pull request. If none,
remove this section.
- Removed `scrollbar_state` argument from `Scrollbar::new`,
`Scrollbar::both`, `Scrollbar::vertical` and `Scrollbar::horizontal`.
```diff
- Scrollbar::horizontal(&self.scrollbar_state, &self.scroll_handle)
+ Scrollbar::horizontal(&self.scroll_handle)
- Scrollbar::vertical(&self.scrollbar_state, &self.scroll_handle)
+ Scrollbar::vertical(&self.scroll_handle)
```
- Change `struct ScrollbarState` to private, we not need this not.
```diff
- pub struct ScrollbarState {
+ struct ScrollbarState {
```
- Renamed `trait ScrollHandleOffsetable` to `trait ScrollbarHanle`.
```diff
- pub trait ScrollHandleOffsetable {
+ pub trait ScrollbarHanle {
```
- Removed `Scrollbar::both`, now use `Scrollbar::new` instead.
```diff
- Scrollbar::both(&scroll_handle)
+ Scrollbar::new(&scroll_handle)
```
## Break Change
- The `width`, `border_width` method has been removed from Sidebar, use
`Styled` trait to use `w`, `border` method from GPUI instead.
```diff
Sidebar::left()
- .width(relative(1.))
- .border_width(px(0.))
+ .w(relative(1.))
+ .border_0()
.collapsed(false)
```
## Break Change
- The `Root::render_notification_layer`, `Root::render_sheet_layer`,
`Root::render_dialog_layer` has been removed, we don't need it now, the
Root element has default rendered them.
- Add `open`, `on_open_change` method to control open state.
- Add `default_open` method.
## Break Change
This PR to rewrite the API of Popover API to make it easy to use.
- The `content` method now can receive an element directly.
```diff
- .content(|window, cx| {
- cx.new(|cx| {
- PopoverContent::new(window, cx, |_, _| {
- div().child("This popover content.")
- })
- })
- })
+ .content(|state, window, cx| {
+ div().child("This popover content.")
+ })
```
- And you can also just use `child` and `children` to add child
elements.
```rs
Popover::new("my-popover")
.trigger(Button::new("trigger").label("Open Popover"))
.child("This popover content.")
```
- Removed `PopoverContent`, and changed `Popover` default paddings to
`p_3`.
## Breaking change
```diff
- Tab::new("Account")
+ Tab::new().label("Account")
```
We can currently create a tab item without a label, such as only an
icon.
Adds the ability to choose between a linear and a logarithmic scale for
the slider. A logarithmic scale is the right and intuitive choice for
many different slider applications. Building this right into the
component has two advantages:
- The user doesn't have to convert at every point where they might use
or update the slider value
- On a logarithmic scale, the distance between steps varies over the
sliders range. This implementation respects that
---------
Co-authored-by: Jason Lee <huacnlee@gmail.com>
