Commit graph

51 commits

Author SHA1 Message Date
Jason Lee
6505be409b
input: Change to input text size to smaller. (#1703)
Use `text_sm` for text size for Input.

Ref https://ui.shadcn.com/docs/components/input

## Screenshot

## Before

<img width="1143" height="1034" alt="image"
src="https://github.com/user-attachments/assets/17a8731e-9977-4beb-89d0-e2460f3823fd"
/>

## After

<img width="1218" height="974" alt="image"
src="https://github.com/user-attachments/assets/cca684d0-c86b-440f-bd30-cff7a4f444c4"
/>
2025-11-28 09:37:43 +00:00
Jason Lee
01082f11d2
button: Add dropdown_caret option to show a caret icon to end of button. (#1637)
<img width="658" height="162" alt="image"
src="https://github.com/user-attachments/assets/7c233982-04c3-408c-8ae4-f672f8b135a3"
/>
2025-11-18 16:41:16 +08:00
Jason Lee
f8a7dd71bf
dropdown_button: Add more button option methods to DropdownButton. (#1633)
- Fix to not handle `dropdown_menu` when Button is disabled.
- Split a single DropdownButtonStory.
2025-11-18 14:31:14 +08:00
Moulberry
a4d792f121
button_group: Fix overriding button click when no on_click (#1546)
When `on_click` is not specified on the button group, this PR allows for
specifying on_click on each individual button.

e.g.

```rs
let buttons = ButtonGroup::new(("buttons", index)).layout(Axis::Vertical)
    .child(Button::new(("install", index)).label("Install").icon(download_icon).success().on_click(move |_, _, cx| {
          // Install
    })
    .child(Button::new(("open", index)).label("Open Page").icon(IconName::Globe).info().on_click(move |_, _, cx| {
         // Open page
    }));
```
2025-11-10 09:43:25 +08:00
Moulberry
c78811c4b9
button_group: Add vertical (#1537)
Adds a vertical option to the button group

Also added an example of the vertical button group to the story

Also fixed button rounding only working when both tl/bl and tr/br are
both set, now they can be set individually

I'm not sure if the justify_center in `.when(self.vertical, |this|
this.flex_col().justify_center())` is needed, but I added it to match
the behaviour of `.items_center()` when the flex direction is row.
2025-11-07 16:48:14 +08:00
Floyd Wang
f33d112819
button: Remove duplicate disabled style (#1529) 2025-11-06 18:47:59 +08:00
Jason Lee
4dc10165fb
spinner: Rename Indicator to Spinner. (#1526)
## Break Change

- Renamed `Indicator` to `Spinner`.

```diff
- use gpui_component::indicator::Indicator;
+ use gpui_component::spinner::Spinner;
```
2025-11-06 11:36:39 +08:00
Jason Lee
998a5fd922
chore: Standardize the overall API and improve docs. (#1516) 2025-11-05 19:10:30 +08:00
Jason Lee
0524c51b3e
toggle: Refactor Toggle, ToggleGroup API. (#1515)
## Break Changes

- Refactor `Toggle` new API to require a `id`, and renamed `on_change`
to `on_click.
- Renamed `on_change` method to `on_click` for `ToggleGroup`.

```diff
- Toggle::label("Hello").id("hello").on_change(..)
+ Toggle::new("hello).label("Hello").on_click(..)

- ToggleGroup::new("group1).on_change(..)
+ ToggleGroup::new("group1).on_click(..)
```
2025-11-05 10:47:55 +08:00
Jason Lee
9fa2669ff4
list, table: Refactor List, Table to have ListState, TableState. (#1468)
## Break Change

- Like Select, Input API design, now `List`, `Table` also has ListState
and TableState.

```diff
- let table = cx.new(|_| Table::new(delegate, window, cx).stripe(true).border(true))
+ let table = cx.new(|_| TableState::new(delegate, window, cx))
+ Table::new(&table).stripe(true).border(true) // for render

- let list = cx.new(|_| List::new(delegate, window, cx))
+ let list = cx.new(|_| ListState::new(delegate, window, cx))
+ List::new(&list) // for render
```

- ListDelegate, TableDelegate methods has changed some argument type:
  
- If first argument is `&mut self`, the `cx` has been changed to `&mut
Context<ListState<Self>>` or `&mut Context<TableState<Self>>`.
  

    ```diff
- fn confirm(&mut self, _secondary: bool, _: &mut Window, cx: &mut
Context<List<Self>>)
+ fn confirm(&mut self, _secondary: bool, _: &mut Window, cx: &mut
Context<ListState<Self>>)
    ```

- If first argument is `&self`, the `cx` has been changed to `&mut App`.

    ```diff
- fn render_item(&self, ix: IndexPath, _: &mut Window, _: &mut
Context<List<Self>>)
    + fn render_item(&self, ix: IndexPath, _: &mut Window, _: &mut App)
    ```
2025-11-02 12:59:37 +00:00
Jason Lee
34ef0ff6d0
chore: Rename Dropdown to Select, TextInput to Input. (#1449)
## Break Change

- The `Dropdown` has been renamed to `Select`.
- The `TextInput` has been renamed to `Input`.

| Before | After |
| --- | --- |
| TextInput | Input |
| Dropdown | Select |
| DropdownItem | SelectItem |
| DropdownItemGroup | SelectGroup |
| DropdownState | SelectState |
| DropdownEvent | SelectEvent |
| DropdownDelegate | SelectDelegate |
| dropdown::ListEvent | ~~Removed~~ |

- Renamed `PopupMenuExt` to `DropdownMenu`.
- Removed pub mod `menu::popup_menu`, `menu::context_menu`, they are
moved into `menu` mod.
- Renamed `popup_menu` method to `dropdown_menu` for `DropdownMenu`,
`Panel`, `PanelView` and `DropdownButton`.

| Before | After |
| --- | --- |
| popup_menu::PopupMenuExt | menu::DropdownMenu |
| popup_menu | dropdown_menu |
| popup_menu_with_anchor | dropdown_menu_with_anchor |
2025-10-28 21:22:31 +08:00
Floyd Wang
21eff06e11
list: Use click events instead of mouse events when confirming (#1427)
Fix the issue where inner list buttons do not respond to clicks.
2025-10-24 16:51:37 +08:00
Floyd Wang
47978bc50e
button: Support specified anchor to dropdown button (#1367) 2025-10-14 11:19:22 +08:00
Jason Lee
6817c8d3cc
menu: Add AppMenuBar. (#1338)
- input: Change Input to not unselect when blur.
- popup_menu: Fix get key binding on PopupMenu with action context.

<img width="935" height="694" alt="image"
src="https://github.com/user-attachments/assets/295fa84e-f1d8-4f6f-8a77-601a45f8ad6d"
/>

## TODO

- [x] Keyboard support. 
- [x] Add submenu to example.
- [ ] ~~Icon~~ and check support. Wait
https://github.com/zed-industries/zed/pull/39876
2025-10-10 21:03:16 +08:00
Floyd Wang
d4b0aff534
button: Fix the on_hover does not respond (#1346) 2025-10-10 10:52:05 +08:00
Floyd Wang
7a8be9a628
button: Add Support for on_hover event (#1341) 2025-10-09 18:43:50 +08:00
Floyd Wang
9754cab4d7
button: Bind element ID after button is created (#1325)
- Fix the selected-state error in the popup menu.
2025-10-03 14:52:53 +08:00
Jason Lee
e84e8ebaad
button: Fix button label display has overflow hidden. (#1322) 2025-10-03 10:18:00 +08:00
Jason Lee
5e504d10bb
chore: Refactor tab key to switch focus. (#991)
Wait https://github.com/zed-industries/zed/pull/33008,
https://github.com/zed-industries/zed/pull/34804 to merge.


https://github.com/user-attachments/assets/3c21ebc9-44a0-4311-bb0f-5f63fe8d4bb3

- Improved `focus_ring` to render like an outline.
- Added to support press `Enter`, `Space` key to trigger Checkbox,
Button, Radio.

## Break Changes

- The `FocusableExt` has been changed to only for crate internal.
- The `FocusableCycle` has been removed, now GPUI has it own tab stop
implementation.
2025-09-29 16:48:24 +08:00
Jason Lee
ef1d727c3d
chore: Improve RopeExt API and add more docs. (#1289) 2025-09-25 18:17:46 +08:00
Jason Lee
93b578294c
list: Update ListItem and DropdownListItem style. (#1095)
## Break Change

- The `Selectable` trait has been removed `element_id` method, this is
necessary.
- The `item` of `List` now must impl `Selectable` trait.

## List

> NOTE: The default ListItem is no rounded and paddings.

<img width="1144" height="762" alt="image"
src="https://github.com/user-attachments/assets/32348682-f89a-487a-af9f-5ed379a7f2d8"
/>

## Dropdown

<img width="537" height="387" alt="image"
src="https://github.com/user-attachments/assets/3cc99d9f-3714-4d10-b467-6c91917bcbf0"
/>
2025-07-28 18:38:39 +08:00
Floyd Wang
634ab14306 button: Use muted foreground as disabled text color (#1088) 2025-07-24 14:19:10 +08:00
Jason Lee
7f3f2a3940
button: Fix selected style for outline button. (#1070) 2025-07-17 14:20:19 +08:00
Jason Lee
1069469c46
theme: Update secondary color and fix toggle selected color. (#1039)
<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/9ec4f4ea-f318-4db6-b9cd-7911cc4f9462"
/>
<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/85d52c62-1e51-49d3-905e-30865555cfd8"
/>

<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/eb71f364-730d-4f55-a84d-95235a3545f0"
/>
<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/3383e8f7-500d-4348-b391-c764a35fd6a9"
/>
2025-07-03 19:23:40 +08:00
Jason Lee
646b8b7206
button: Fix loading style when disabled. (#1021)
## Before

<img width="1193" alt="image"
src="https://github.com/user-attachments/assets/e7a82f21-2ec8-42fa-8daa-05d4f086e0b2"
/>

## After

<img width="1196" alt="image"
src="https://github.com/user-attachments/assets/f387c591-a4a1-4220-9318-badfb8a133e6"
/>
2025-06-30 15:44:26 +08:00
Floyd Wang
f7d536531d
dropdown_button: Fix incorrect rounded when ghost button selected (#1011)
| Before | After |
| - | - |
| <img width="218" alt="SCR-20250625-psed"
src="https://github.com/user-attachments/assets/873db4e9-d169-4273-bee9-58332b41c00f"
/> | <img width="222" alt="SCR-20250625-prxz"
src="https://github.com/user-attachments/assets/48f8cb35-cd67-47ac-bbb9-2739e1aa16b9"
/> |
2025-06-25 18:11:30 +08:00
Jason Lee
692ee83b61
chore: Move shadow_xs to StyledExt trait. (#1010)
This PR for fix https://github.com/longbridge/gpui-component/pull/1009
mistake.
2025-06-25 16:54:48 +08:00
Jason Lee
c8481bee19
theme: Update theme details to match Shadcn. (#1009)
## Light

<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/b1893648-5994-4c08-a79a-30b10dc62c47"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/de5b4e13-7889-473b-b0c0-9ac11de0a4b0"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/9f17c2a1-3a71-4d56-be6c-49f26f5e7406"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/a4e99a61-a618-4c3b-a237-93bbc17d4cae"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/64313ae5-8284-46ff-a75f-5a14a1e3b339"
/>
<img width="1193" alt="image"
src="https://github.com/user-attachments/assets/5c134172-0ab6-4299-950d-bac3dda7b61d"
/>
<img width="1374" alt="image"
src="https://github.com/user-attachments/assets/c8816288-d008-490d-9db3-4fa796278001"
/>
<img width="1428" alt="image"
src="https://github.com/user-attachments/assets/d903a854-15e3-48aa-8ebd-969c1c91c624"
/>



## Dark

<img width="1467" alt="image"
src="https://github.com/user-attachments/assets/720418b4-8a9b-42c9-814b-a0be660e8eba"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/4ca20f31-c998-40bb-b4bf-6079c506f9ec"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/ae828624-55b3-4d33-8a20-2c71a0a838cc"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/7014c76c-5e18-4cd5-9cf1-6bccbb58e56a"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/6e1c514d-5f76-460a-9c7e-a38f2f0e712a"
/>
<img width="1374" alt="image"
src="https://github.com/user-attachments/assets/07ad8c20-317b-4209-9f92-b500f53dd4c0"
/>
<img width="1428" alt="image"
src="https://github.com/user-attachments/assets/6bd2969d-9bec-4ed7-9280-109a81144dfa"
/>
2025-06-25 16:40:27 +08:00
Jason Lee
ed0887420f
chore: Impl Styled for more elements. (#1007)
This PR for continuing #1005 was missed commits.
2025-06-24 19:36:42 +08:00
Jason Lee
b5922f9d92
dropdown_button: Keep rounded when is a ghost variant. (#992)
<img width="159" alt="image"
src="https://github.com/user-attachments/assets/fcb08439-34fc-42f6-bbf4-ca0efbca8e89"
/>
2025-06-19 22:45:16 +08:00
Floyd Wang
dc1d516a30
button: Impl Selectable for the dropdown button (#913)
## Break Change
- Add `is_selected` to the `Selectable` trait; Returns true if the
element is selected.
2025-06-02 14:25:18 +08:00
Jason Lee
a9d145dd50
Update disabled menu, button, dropdown etc. to use default cursor. (#814)
To follow macOS UX design.
2025-04-24 21:28:15 +08:00
Jason Lee
5b508d7219
gallery: Redesign the gallery. (#797)
Close #773

<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/e27a28ca-cdd7-4970-8518-4fd0104bb3f8"
/>
2025-04-17 17:12:48 +08:00
Jason Lee
9a6a0f4421
tooltip: Add action, key_binding method to Tooltip. (#787) 2025-04-14 17:38:21 +08:00
Jason Lee
d0a73011de
tooltip: Add KeyBinding to tooltip and Button. (#783)
- Improve `Kbd::format` method.
- Add `tooltip_with_action` method to Button for display key binding in
tooltip.
- 
## Break change

- The `Tooltip::new` has been changed it argument and return type.
    
    ```diff
- pub fn new(text: impl Into<Text>, _: &mut Window, cx: &mut App) ->
AnyView
    + pub fn new(text: impl Into<Text>) -> Self
    ```
2025-04-14 16:40:40 +08:00
Jason Lee
73be54a0f7
input: Improve clear button position in Input. (#782)
| Before | After |
| -- | -- |
| <img width="529" alt="image"
src="https://github.com/user-attachments/assets/02fdba71-7e83-43b9-ba4c-476eb21dcf28"
/> | <img width="530" alt="image"
src="https://github.com/user-attachments/assets/ad7b6378-c9ff-4ea4-943a-87af53a2ac79"
/> |
2025-04-11 19:13:17 +08:00
Jason Lee
ebe93210af
Use normal cursor for buttons. (#760)
This change to follow native UI to use normal cursor for all buttons,
items.

Only use `pointer` for link item.
2025-04-01 17:59:27 +08:00
Jason Lee
e8f89e04d6
button: Update ButtonCustomVariant default variable value to use transparent. (#746) 2025-03-27 10:43:40 +08:00
Jason Lee
17926cea16
button: Add warning, success, info variant to Button. (#745)
<img width="1342" alt="SCR-20250327-jfzq"
src="https://github.com/user-attachments/assets/7c44458a-9467-4095-9cd6-1dcb35cc351b"
/>
<img width="1342" alt="SCR-20250327-jgak"
src="https://github.com/user-attachments/assets/07d33d60-f581-46d4-9a54-174e56ab82ca"
/>
2025-03-27 10:15:53 +08:00
Floyd Wang
8e7ef5631e
dropdown_button: Support outline style (#716) 2025-03-12 17:23:37 +08:00
Jason Lee
6da7de5299
button: Improve Button to support combine outline with other variants. (#714)
<img width="1385" alt="image"
src="https://github.com/user-attachments/assets/240df695-bfd5-4680-89a2-2640db206b24"
/>
2025-03-12 11:57:25 +08:00
Jason Lee
61bb78d174
tab: Update default tab size padding x to match with Panel's padding. (#701)
- Fix muted_foreground in dark mode.
- Fix secondary button active color in dark mode.
- Fix to ensure render last empty space when TabBar have suffix.

<img width="1203" alt="image"
src="https://github.com/user-attachments/assets/65144893-6705-4087-87f3-7e478eaa1405"
/>
<img width="1203" alt="image"
src="https://github.com/user-attachments/assets/0fe3b72b-11f5-4917-959c-a2c88ba0213c"
/>
2025-03-10 21:23:00 +08:00
Jason Lee
c9c6449d24
toggle: Add Toggle and ToggleGroup. (#691)
- Improve `Icon` to inherit parent element font size by default.

<img width="777" alt="image"
src="https://github.com/user-attachments/assets/1a0ee94e-46ef-4b02-9538-09880586d3f2"
/>
<img width="777" alt="image"
src="https://github.com/user-attachments/assets/4ecb016f-2e7c-4266-9a25-eae2566b2844"
/>
2025-03-06 19:10:28 +08:00
Jason Lee
581d92378c
tab: Add xsmall, large style to Tab. (#680)
<img width="1047" alt="image"
src="https://github.com/user-attachments/assets/763fc4c9-bda8-4292-83c5-4a44db091938"
/>
<img width="1047" alt="image"
src="https://github.com/user-attachments/assets/e21d5344-f31c-43b3-af6b-28d845af77f8"
/>
<img width="1047" alt="image"
src="https://github.com/user-attachments/assets/3da37f16-55aa-44b3-98c2-4cadfae458b3"
/>
<img width="1047" alt="image"
src="https://github.com/user-attachments/assets/cfbb1f7e-c810-4387-b7dc-d1d2870d50a6"
/>
2025-03-04 10:26:12 +08:00
Jason Lee
437f1b2098
theme: Add to support always show scrollbar mode and default to match with system style. (#621)
Close #573

- Fix theme settings to keeping when switch theme mode.
2025-02-12 15:15:33 +08:00
Jason Lee
3ffbbb0688
theme: Ensure all elements to use radius. (#596)
- Fix menu dispatch action.
2025-02-03 19:03:16 +08:00
Jason Lee
327d40e0e0
chore: Upgrade GPUI 3 (#587)
The pervious version has keep on
[gpui2](https://github.com/longbridge/gpui-component/tree/gpui2) branch,
if there need to use.

Ref https://github.com/zed-industries/zed/pull/22632

## Prepare

### Generate index.scip

```bash
rust-analyzer scip ./ > index.scip
```

### Get [refactor](https://github.com/zed-industries/refactor)

```bash
https://github.com/zed-industries/refactor.git
```

## Refactor exist code

```bash
cd refactor
cargo run -- ~/work/gpui-component
```

Then will get result if successed:

```
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.03s
     Running `target/debug/refactor /Users/jason/work/gpui-component`
Loaded 115 SCIP documents
Processing files starting with focus path: ""
Changed 90 files
```

-------------

## Changes

```diff
- View<T>
- Model<T>
+ Entity<T>

- WeakView<T>
+ WeakEntity<T>

- FocusableView
+ Focusable

- cx.bounds()
+ window.bounds()
- cx.refresh()
+ window.refresh()
- cx.focused()
+ window.focused(cx)
- cx.with_optional_element_state
- window.with_optional_element_state
```

```diff
- &mut WindowContext
+ &mut Window, &mut App

- cx: &mut WindowContext
+ window: &mut Window, cx: &mut App

- &mut ViewContext<
+ &mut Window, &mut Context<

- cx: &mut ViewContext<
+ window: &mut Window, cx: &mut Context<
```

```diff
- cx.spawn(|_, mut cx| async move { 
+ cx.spawn_in(window, |_, mut cx| async move {
- cx.dispatch_action(Box::new(...))
+ window.dispatch_action(Box::new(...), cx)
```

`cx.spawn`

```diff
- cx.spawn(|view, mut cx| async move {
+ cx.spawn_in(window, |view, mut window| async move {
+     _ = view.update_in(&mut window, move |view, window, cx| {
```
2025-01-27 03:58:48 +08:00
Jason Lee
9f2cd84b23
color: Add mix method and merge ColorExt to Colorize. (#561)
- Add `mix` method to mix two color.
- Export `ui::theme::*` to crate root, before `use
ui:theme::ActiveTheme` to `use ui::ActiveTheme`.

## Break Changes

- Moved `ui::theme::Colorize` to `ui::Colorize`.
- Merged `ColorExt` to `Colorize`.
- Renamed `to_hex_string` to `to_hex`, `parse_hex_string` to
`parse_hex`.
2025-01-21 18:31:01 +08:00
Floyd Wang
06e9b1a25c
dropdown_button: Add compact style (#555) 2025-01-20 13:49:42 +08:00
Floyd Wang
bd3cdd7167
dropdown_button: Add more style preferences (#554) 2025-01-17 16:24:46 +08:00