[JEWEL-1131] Implement badge component #3365
Conversation
wellingtoncosta
requested review from
faogustavo and
rock3r
and removed request for
rock3r
wellingtoncosta
force-pushed
the
wp/badge-component
branch
from
f9bc51f to
14d3912
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
platform/jewel/ui/src/main/kotlin/org/jetbrains/jewel/ui/DefaultComponentStyling.kt
Outdated
Show resolved
Hide resolved
wellingtoncosta
force-pushed
the
wp/badge-component
branch
from
14d3912 to
8662efd
Compare
...s/showcase/src/main/kotlin/org/jetbrains/jewel/samples/showcase/views/ComponentsViewModel.kt
Outdated
Show resolved
Hide resolved
wellingtoncosta
force-pushed
the
wp/badge-component
branch
2 times, most recently
from
745ae86 to
7b0685a
Compare
wellingtoncosta
force-pushed
the
wp/badge-component
branch
from
7b0685a to
63d603e
Compare
|
|
||
| @Suppress("UnusedReceiverParameter") | ||
| public fun ComponentStyling.dark( | ||
| badgeStyle: BadgeStyle = BadgeStyle.dark(), |
There was a problem hiding this comment.
Nit: Prioritize adding new params in the end to prevent breaking changes if the developer do not use named attributes
| public fun BadgeColors.Companion.light( | ||
| background: Brush = SolidColor(IntUiLightTheme.colors.blue(4)), | ||
| backgroundDisabled: Brush = SolidColor(IntUiLightTheme.colors.gray(12)), | ||
| backgroundFocused: Brush = SolidColor(IntUiLightTheme.colors.blue(5)), | ||
| backgroundPressed: Brush = SolidColor(IntUiLightTheme.colors.blue(6)), | ||
| backgroundHovered: Brush = SolidColor(IntUiLightTheme.colors.blue(5)), | ||
| content: Color = IntUiLightTheme.colors.gray(14), | ||
| contentDisabled: Color = IntUiLightTheme.colors.gray(8), | ||
| contentFocused: Color = IntUiLightTheme.colors.gray(14), | ||
| contentPressed: Color = IntUiLightTheme.colors.gray(14), | ||
| contentHovered: Color = IntUiLightTheme.colors.gray(14), | ||
| ): BadgeColors = |
There was a problem hiding this comment.
QQ: Where have you found those values? They don't match StandAlone/IDE:
| colors = colors, | ||
| metrics = | ||
| BadgeMetrics( | ||
| cornerSize = CornerSize(0.dp), |
There was a problem hiding this comment.
Badges are only available as pills, as per specs; not sure why the corner size is zero where it should be 100%:
| padding = PaddingValues(horizontal = 6.dp, vertical = 2.dp), | ||
| minSize = DpSize(32.dp, 18.dp), |
There was a problem hiding this comment.
There should be no min width, and the height is fixed at 16.dp (not a minimum). Also no vertical padding — I assume we should centre the Text vertically instead.
| val normalBackground = | ||
| retrieveColorsOrUnspecified("Button.startBackground", "Button.endBackground").createVerticalBrush() | ||
|
|
||
| val normalContent = retrieveColorOrUnspecified("Label.foreground") | ||
| val disabledContent = retrieveColorOrUnspecified("Label.disabledForeground").takeOrElse { normalContent } | ||
|
|
||
| val colors = | ||
| BadgeColors( | ||
| background = normalBackground, | ||
| backgroundDisabled = normalBackground, | ||
| backgroundFocused = normalBackground, | ||
| backgroundPressed = normalBackground, | ||
| backgroundHovered = normalBackground, | ||
| content = normalContent, | ||
| contentDisabled = disabledContent, | ||
| contentFocused = normalContent, | ||
| contentPressed = normalContent, | ||
| contentHovered = normalContent, | ||
| ) |
There was a problem hiding this comment.
These seem all wrong, according to the specs:
Please do triple check the keys in the spec are correct since the Swing impl is notorious for not following specs — 1:1 fidelity to the actual implementation trumps specs
| public fun BadgeStyle.Companion.light( | ||
| colors: BadgeColors = BadgeColors.light(), | ||
| metrics: BadgeMetrics = BadgeMetrics.defaults(), | ||
| ): BadgeStyle = BadgeStyle(colors = colors, metrics = metrics) | ||
|
|
||
| public fun BadgeStyle.Companion.dark( | ||
| colors: BadgeColors = BadgeColors.dark(), | ||
| metrics: BadgeMetrics = BadgeMetrics.defaults(), | ||
| ): BadgeStyle = BadgeStyle(colors = colors, metrics = metrics) |
There was a problem hiding this comment.
From the specs, we have 6 default badge styles (blue, bluePrimary, green, greenPrimary, purple, gray) — plus the disabled state, which is the same for all of them:
So we should have a BridgeStyles that contains styling for all the 6 variants, and that has a light and a dark variant creation
3 participants
Summary
This PR introduces a new component called
Badge, which is designed to be used in promotions, like New or Beta features. It isn't implemented in IJ platform, so this implementation is derived from similar small promotional UI components, like a small button.The API allows passing a simple color as well as a brush. It can be clickable if you pass a valid lambda to the
onClickparameter, or passingnullto make the component non-clickable. Additionally, it has both enabled and disabled states as expected. Rounded corners are also possible by passing a custom value to thecornerSizeinBadgeMetrics.Evidences
Release notes
Badge, including a section to showcase the component in the sample app.New features
Badgecomponent, which is designed for promotions, like New or Beta.Note
Introduces a new Badge UI component and wires it into theming and styling across modules.
Badgecomposable withBadgeState,BadgeStyle/BadgeColors/BadgeMetrics, andLocalBadgeStyle; supports clickable/non-clickable, enabled/disabled, brushes, and rounded cornersDefaultComponentStylingnow includesbadgeStyle;JewelTheme.badgeStyleaccessor; IntUi light/dark style factories; LaF bridgereadBadgeStyle()and inclusion inIntUiBridgeIntUiTheme.light/darkto accept/passbadgeStyle(adds new overloads; deprecates old ones) with fallbacks for compatibilityBadges.kt) and UI tests for Badge behaviorWritten by Cursor Bugbot for commit 63d603e. This will update automatically on new commits. Configure here.