Skip to content

Commit cfd6410

Browse files
AkshatJawnemofojed
AkshatJawne
and
mofojed
authored
feat: ui.inline_alert (#1007)
Closes #937 and Closes #867 --------- Co-authored-by: Mike Bender <[email protected]>
1 parent 3748dac commit cfd6410

16 files changed

+281
-0
lines changed

‎plugins/ui/docs/components/inline_alert.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Inline Alert
2+
3+
Inline alerts display non-modal messages related to objects in a view, often used for form validation to aggregate feedback for multiple fields.
4+
5+
## Example
6+
7+
For the inline alert component, both the `heading` and `content` props are required.
8+
9+
```python
10+
from deephaven import ui
11+
12+
13+
my_inline_alert_basic = ui.inline_alert(
14+
heading="Payment Information",
15+
content="Enter your billing address, shipping address, and payment method to complete your purchase.",
16+
)
17+
```
18+
19+
20+
## Variant
21+
22+
The `variant` prop can set a variant to give inline alerts a semantic meaning.
23+
24+
```python
25+
from deephaven import ui
26+
27+
28+
@ui.component
29+
def ui_inline_alert_variant_examples():
30+
return [
31+
ui.inline_alert(
32+
heading="Accepted Payment Methods",
33+
content="Only major credit cards are accepted for payment. Direct debit is currently unavailable.",
34+
variant="info",
35+
),
36+
ui.inline_alert(
37+
heading="Purchase completed",
38+
content="You'll get a confirmation email with your order details shortly.",
39+
variant="positive",
40+
),
41+
ui.inline_alert(
42+
heading="Payment Information",
43+
content="Enter your billing address, shipping address, and payment method to complete your purchase.",
44+
variant="notice",
45+
),
46+
ui.inline_alert(
47+
heading="Payment Information",
48+
content="Enter your billing address, shipping address, and payment method to complete your purchase.",
49+
variant="negative",
50+
),
51+
]
52+
53+
54+
my_inline_alert_variant_examples = ui_inline_alert_variant_examples()
55+
```
56+
57+
## API Reference
58+
59+
```{eval-rst}
60+
.. dhautofunction:: deephaven.ui.inline_alert
61+
```

‎plugins/ui/docs/sidebar.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,10 @@
121121
"label": "image",
122122
"path": "components/image.md"
123123
},
124+
{
125+
"label": "inline_alert",
126+
"path": "components/inline_alert.md"
127+
},
124128
{
125129
"label": "link",
126130
"path": "components/link.md"

‎plugins/ui/src/deephaven/ui/components/__init__.py‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
from .icon import icon
2929
from .illustrated_message import illustrated_message
3030
from .image import image
31+
from .inline_alert import inline_alert
3132
from .item import item
3233
from .item_table_source import item_table_source
3334
from .link import link
@@ -97,6 +98,7 @@
9798
"item_table_source",
9899
"illustrated_message",
99100
"image",
101+
"inline_alert",
100102
"link",
101103
"list_view",
102104
"list_action_group",

‎plugins/ui/src/deephaven/ui/components/inline_alert.py‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
from __future__ import annotations
2+
from typing import Any
3+
from .types import (
4+
AlignSelf,
5+
CSSProperties,
6+
DimensionValue,
7+
JustifySelf,
8+
LayoutFlex,
9+
Position,
10+
)
11+
from ..types import InlineAlertVariant
12+
from .basic import component_element
13+
from ..elements import Element
14+
15+
16+
def inline_alert(
17+
heading: Any,
18+
content: Any,
19+
*,
20+
variant: InlineAlertVariant | None = "neutral",
21+
auto_focus: bool | None = None,
22+
flex: LayoutFlex | None = None,
23+
flex_grow: float | None = None,
24+
flex_shrink: float | None = None,
25+
flex_basis: DimensionValue | None = None,
26+
align_self: AlignSelf | None = None,
27+
justify_self: JustifySelf | None = None,
28+
order: int | None = None,
29+
grid_area: str | None = None,
30+
grid_row: str | None = None,
31+
grid_row_start: str | None = None,
32+
grid_row_end: str | None = None,
33+
grid_column: str | None = None,
34+
grid_column_start: str | None = None,
35+
grid_column_end: str | None = None,
36+
margin: DimensionValue | None = None,
37+
margin_top: DimensionValue | None = None,
38+
margin_bottom: DimensionValue | None = None,
39+
margin_start: DimensionValue | None = None,
40+
margin_end: DimensionValue | None = None,
41+
margin_x: DimensionValue | None = None,
42+
margin_y: DimensionValue | None = None,
43+
width: DimensionValue | None = None,
44+
height: DimensionValue | None = None,
45+
min_width: DimensionValue | None = None,
46+
min_height: DimensionValue | None = None,
47+
max_width: DimensionValue | None = None,
48+
max_height: DimensionValue | None = None,
49+
position: Position | None = None,
50+
top: DimensionValue | None = None,
51+
bottom: DimensionValue | None = None,
52+
start: DimensionValue | None = None,
53+
end: DimensionValue | None = None,
54+
left: DimensionValue | None = None,
55+
right: DimensionValue | None = None,
56+
z_index: int | None = None,
57+
is_hidden: bool | None = None,
58+
id: str | None = None,
59+
UNSAFE_class_name: str | None = None,
60+
UNSAFE_style: CSSProperties | None = None,
61+
) -> Element:
62+
"""
63+
Inline alerts display non-modal messages related to objects in a view.
64+
65+
Args:
66+
heading: The heading of the Inline Alert.
67+
content: The content of the Inline Alert.
68+
variant: The visual style of the Inline Alert.
69+
auto_focus: Whether to automatically focus the Inline Alert when it first renders.
70+
flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
71+
flex_grow: When used in a flex layout, specifies how the element will grow to fit the space available.
72+
flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available.
73+
flex_basis: When used in a flex layout, specifies the initial main size of the element.
74+
align_self: Overrides the alignItems property of a flex or grid container.
75+
justify_self: Species how the element is justified inside a flex or grid container.
76+
order: The layout order for the element within a flex or grid container.
77+
grid_area: When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid.
78+
grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid.
79+
grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid.
80+
grid_row_start: When used in a grid layout, specifies the starting row to span within the grid.
81+
grid_row_end: When used in a grid layout, specifies the ending row to span within the grid.
82+
grid_column_start: When used in a grid layout, specifies the starting column to span within the grid.
83+
grid_column_end: When used in a grid layout, specifies the ending column to span within the grid.
84+
margin: The margin for all four sides of the element.
85+
margin_top: The margin for the top side of the element.
86+
margin_bottom: The margin for the bottom side of the element.
87+
margin_start: The margin for the logical start side of the element, depending on layout direction.
88+
margin_end: The margin for the logical end side of the element, depending on layout direction.
89+
margin_x: The margin for the left and right sides of the element.
90+
margin_y: The margin for the top and bottom sides of the element.
91+
width: The width of the element.
92+
min_width: The minimum width of the element.
93+
max_width: The maximum width of the element.
94+
height: The height of the element.
95+
min_height: The minimum height of the element.
96+
max_height: The maximum height of the element.
97+
position: The position of the element.
98+
top: The distance from the top of the containing element.
99+
bottom: The distance from the bottom of the containing element.
100+
left: The distance from the left of the containing element.
101+
right: The distance from the right of the containing element.
102+
start: The distance from the start of the containing element, depending on layout direction.
103+
end: The distance from the end of the containing element, depending on layout direction.
104+
z_index: The stack order of the element.
105+
is_hidden: Whether the element is hidden.
106+
id: The unique identifier of the element.
107+
UNSAFE_class_name: A CSS class to apply to the element.
108+
UNSAFE_style: A CSS style to apply to the element.
109+
110+
Returns:
111+
The rendered inline alert element.
112+
113+
"""
114+
return component_element(
115+
"InlineAlert",
116+
heading=heading,
117+
content=content,
118+
variant=variant,
119+
auto_focus=auto_focus,
120+
flex=flex,
121+
flex_grow=flex_grow,
122+
flex_shrink=flex_shrink,
123+
flex_basis=flex_basis,
124+
align_self=align_self,
125+
justify_self=justify_self,
126+
order=order,
127+
grid_area=grid_area,
128+
grid_row=grid_row,
129+
grid_row_start=grid_row_start,
130+
grid_row_end=grid_row_end,
131+
grid_column=grid_column,
132+
grid_column_start=grid_column_start,
133+
grid_column_end=grid_column_end,
134+
margin=margin,
135+
margin_top=margin_top,
136+
margin_bottom=margin_bottom,
137+
margin_start=margin_start,
138+
margin_end=margin_end,
139+
margin_x=margin_x,
140+
margin_y=margin_y,
141+
width=width,
142+
height=height,
143+
min_width=min_width,
144+
min_height=min_height,
145+
max_width=max_width,
146+
max_height=max_height,
147+
position=position,
148+
top=top,
149+
bottom=bottom,
150+
start=start,
151+
end=end,
152+
left=left,
153+
right=right,
154+
z_index=z_index,
155+
is_hidden=is_hidden,
156+
id=id,
157+
UNSAFE_class_name=UNSAFE_class_name,
158+
UNSAFE_style=UNSAFE_style,
159+
)

‎plugins/ui/src/deephaven/ui/types/types.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -506,6 +506,7 @@ class SliderChange(TypedDict):
506506
ListViewOverflowMode = Literal["truncate", "wrap"]
507507
ActionGroupDensity = Literal["compact", "regular"]
508508
TabDensity = Literal["compact", "regular"]
509+
InlineAlertVariant = Literal["neutral", "info", "positive", "notice", "negative"]
509510
LinkVariant = Literal["primary", "secondary", "over_background"]
510511
BadgeVariant = Literal[
511512
"neutral",

‎plugins/ui/src/js/src/elements/InlineAlert.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React, { ReactNode } from 'react';
2+
import {
3+
Content,
4+
InlineAlert as DHCInlineAlert,
5+
InlineAlertProps as DHCInlineAlertProps,
6+
Heading,
7+
} from '@deephaven/components';
8+
import { isElementOfType } from '@deephaven/react-hooks';
9+
10+
export type SerializedInlineAlertProps = Omit<
11+
DHCInlineAlertProps,
12+
'children'
13+
> & {
14+
heading: ReactNode;
15+
content: ReactNode;
16+
};
17+
18+
export function InlineAlert(props: SerializedInlineAlertProps): JSX.Element {
19+
const { heading, content, ...otherProps } = props;
20+
21+
return (
22+
/* eslint-disable-next-line react/jsx-props-no-spreading */
23+
<DHCInlineAlert {...otherProps}>
24+
{heading != null &&
25+
(isElementOfType(heading, Heading) ? (
26+
heading
27+
) : (
28+
<Heading>{heading}</Heading>
29+
))}
30+
{content != null &&
31+
(isElementOfType(content, Content) ? (
32+
content
33+
) : (
34+
<Content>{content}</Content>
35+
))}
36+
</DHCInlineAlert>
37+
);
38+
}
39+
40+
InlineAlert.displayName = 'InlineAlert';
41+
export default InlineAlert;

‎plugins/ui/src/js/src/elements/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export * from './HTMLElementView';
1717
export * from './IconElementView';
1818
export * from './IllustratedMessage';
1919
export * from './Image';
20+
export * from './InlineAlert';
2021
export * from './ListView';
2122
export * from './Markdown';
2223
export * from './model';

‎plugins/ui/src/js/src/elements/model/ElementConstants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export const ELEMENT_NAME = {
4747
heading: uiComponentName('Heading'),
4848
illustratedMessage: uiComponentName('IllustratedMessage'),
4949
image: uiComponentName('Image'),
50+
inlineAlert: uiComponentName('InlineAlert'),
5051
item: uiComponentName('Item'),
5152
listActionGroup: uiComponentName('ListActionGroup'),
5253
listActionMenu: uiComponentName('ListActionMenu'),

‎plugins/ui/src/js/src/widget/WidgetUtils.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ import {
6363
Grid,
6464
IllustratedMessage,
6565
Image,
66+
InlineAlert,
6667
ListView,
6768
Markdown,
6869
Picker,
@@ -136,6 +137,7 @@ export const elementComponentMap = {
136137
[ELEMENT_NAME.heading]: Heading,
137138
[ELEMENT_NAME.illustratedMessage]: IllustratedMessage,
138139
[ELEMENT_NAME.image]: Image,
140+
[ELEMENT_NAME.inlineAlert]: InlineAlert,
139141
[ELEMENT_NAME.item]: Item,
140142
[ELEMENT_NAME.link]: Link,
141143
[ELEMENT_NAME.listActionGroup]: ListActionGroup,

‎tests/app.d/ui_render_all.py‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ def ui_components1():
4848
ui.action_button("Action Button"),
4949
ui.action_group("Aaa", "Bbb", "Ccc"),
5050
ui.action_menu("Aaa", "Bbb", "Ccc"),
51+
ui.badge("Licensed", variant="positive"),
5152
ui.button_group(ui.button("One"), ui.button("Two")),
5253
ui.button("Button"),
5354
ui.calendar(value="2021-01-01"),
@@ -79,6 +80,14 @@ def ui_components2():
7980
ui.heading("Warning"),
8081
ui.content("This is a warning message."),
8182
),
83+
ui.inline_alert(
84+
ui.heading("Purchase completed"),
85+
ui.content(
86+
"You'll get a confirmation email with your order details shortly."
87+
),
88+
variant="positive",
89+
),
90+
ui.link("Learn more about Deephaven", href="https://deephaven.io/"),
8291
ui.list_view(
8392
_item_table_source_with_action_group,
8493
aria_label="List View - List action group",

0 commit comments

Comments
 (0)