JetBrains / jewel

An implementation of the IntelliJ look and feels in Compose for Desktop
Apache License 2.0
639 stars 30 forks source link

Segmented control #227

Open rock3r opened 8 months ago

rock3r commented 8 months ago

image

Check specs and validate against Swing implementation.

RivanParmar commented 2 months ago

@rock3r I have created a basic working implementation of segmented controls as seen below: Jewel standalone sample

(Sorry for the poor quality image as it has been cropped.)

I would like to make a pull request, however, I have a couple of questions related to it:

  1. Should I name the files and composables as SegmentedControl or SegmentedButton?
  2. I have implemented the feature similar to Tabs. However, in tabs, the TabStrip element does not have any visual elements such as borders and backgrounds and therefore does not have a separate styling for it. In the case of segmented controls, the strip requires changing the border color depending on its state. So, should I create a separate style for it as well or should I just add extra color elements to the SegmentedButton's style? Or should this feature be implemented in a different way?
  3. Should I also include the sample view in the PR?
rock3r commented 1 month ago

Hi @RivanParmar, thanks in advance for your contribution!

  1. In the Int UI specs, it's called Segmented control — I'd go with that. A Segmented button is a button with a side that shows a dropdown (like the Push button when pushing to VCS)
  2. Given the SegmentedControl and its SegmentedControlButton are separate (yet nested) components, I'd provide each with its own styling.
  3. Yes please! Samples are our only "documentation" for now, so that's very welcome. It also shows the reviewer how using that API looks like, which is always good.
RivanParmar commented 1 month ago

@rock3r Thanks for clearing up the confusion. I will make the pull request after making the necessary changes. Also, could please let me know what colors to use for the different states of the buttons? I've looked into the Figma file but I couldn't find anything regarding it.

rock3r commented 1 month ago

When we don't have specs from the Figma (and even when we do, just in case) we check the Swing implementation and use it as reference. This is essential because it'll tell you which theme keys to use in the bridge theme, and in turn you'd use those resolved colours/metrics in the standalone version.

Note that there are several instances where the Swing implementation can have hardcoded values/colours, and not use theme values. In these cases, copying the values from the relevant Swing Darcula*UI class is the only way. If you look at the bridge theme implementation, you'll see many such hardcoded values. This is why :)

RivanParmar commented 1 month ago

Sorry for the late response. However, there are a few things that I'm unable to resolve:

  1. The focus interaction does not seem to work with the outer component, i.e., with the SegmentedControl. I've set an interactionSource to it but it just doesn't seem to be getting the focus and so it's border's color isn't changing.
  2. In dark theme, the color of the text remains black. I've set the content color in the style to IntUiDarkTheme.colors.grey(12) but still it doesn't work.
rock3r commented 1 month ago

@RivanParmar do you have any in-progress code we can look at? Hard to help otherwise...

RivanParmar commented 1 month ago

@rock3r Please have a look at #387

rock3r commented 1 month ago

@RivanParmar left you a few notes there!