Skip to content

Commit 66fe06d

Browse files
AkshatJawneAkshatJawne
committed
feat: ui.inline_alert
1 parent 2eb5fab commit 66fe06d

File tree

9 files changed

+275
-0
lines changed

9 files changed

+275
-0
lines changed

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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+
```python
8+
from deephaven import ui
9+
10+
11+
my_inline_alert_basic = ui.inline_alert(
12+
ui.heading("Payment Information"),
13+
ui.content(
14+
"Enter your billing address, shipping address, and payment method to complete your purchase."
15+
),
16+
)
17+
```
18+
19+
## UI Recommendations
20+
21+
Consider using [`ui.heading`](./heading.md) if you want to create different types of headings.
22+
23+
24+
## Content
25+
26+
The inline alerts contain a title and body using the `ui.heading` and `ui.content`.
27+
28+
29+
```python
30+
from deephaven import ui
31+
32+
33+
my_inline_alert_content_example = ui.inline_alert(
34+
ui.heading("Payment Information"),
35+
ui.content(
36+
"Enter your billing address, shipping address, and payment method to complete your purchase."
37+
),
38+
)
39+
```
40+
41+
42+
## Variant
43+
44+
A variant can be set using the `variant` prop to give inline alerts a semantic meaning.
45+
46+
```python
47+
from deephaven import ui
48+
49+
50+
@ui.component
51+
def ui_inline_alert_variant_examples():
52+
return [
53+
ui.inline_alert(
54+
ui.heading("Accepted Payment Methods"),
55+
ui.content(
56+
"Only major credit cards are accepted for payment. Direct debit is currently unavailable."
57+
),
58+
variant="info",
59+
),
60+
ui.inline_alert(
61+
ui.heading("Purchase completed"),
62+
ui.content(
63+
"You'll get a confirmation email with your order details shortly."
64+
),
65+
variant="positive",
66+
),
67+
ui.inline_alert(
68+
ui.heading("Payment Information"),
69+
ui.content(
70+
"Enter your billing address, shipping address, and payment method to complete your purchase."
71+
),
72+
variant="notice",
73+
),
74+
ui.inline_alert(
75+
ui.heading("Payment Information"),
76+
ui.content(
77+
"Enter your billing address, shipping address, and payment method to complete your purchase."
78+
),
79+
variant="negative",
80+
),
81+
]
82+
83+
84+
my_inline_alert_variant_examples = ui_inline_alert_variant_examples()
85+
```
86+
87+
## API Reference
88+
89+
```{eval-rst}
90+
.. dhautofunction:: deephaven.ui.inline_alert
91+
```
92+
93+
94+
95+

‎plugins/ui/docs/sidebar.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,10 @@
8989
"label": "image",
9090
"path": "components/image.md"
9191
},
92+
{
93+
"label": "inline_alert",
94+
"path": "components/inline_alert.md"
95+
},
9296
{
9397
"label": "link",
9498
"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
@@ -27,6 +27,7 @@
2727
from .icon import icon
2828
from .illustrated_message import illustrated_message
2929
from .image import image
30+
from .inline_alert import inline_alert
3031
from .item import item
3132
from .item_table_source import item_table_source
3233
from .link import link
@@ -94,6 +95,7 @@
9495
"item_table_source",
9596
"illustrated_message",
9697
"image",
98+
"inline_alert",
9799
"link",
98100
"list_view",
99101
"list_action_group",

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

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

‎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
Dependencies = Union[Tuple[Any], List[Any]]
511512
Selection = Sequence[Key]

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import {
3+
InlineAlert as DHCInlineAlert,
4+
InlineAlertProps as DHCInlineAlertProps,
5+
} from '@deephaven/components';
6+
import { wrapTextChildren } from './utils';
7+
8+
export function InlineAlert(props: DHCInlineAlertProps): JSX.Element {
9+
const { children } = props;
10+
return (
11+
// eslint-disable-next-line react/jsx-props-no-spreading
12+
<DHCInlineAlert {...props}>{wrapTextChildren(children)}</DHCInlineAlert>
13+
);
14+
}
15+
InlineAlert.displayName = 'InlineAlert';
16+
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
@@ -16,6 +16,7 @@ export * from './HTMLElementView';
1616
export * from './IconElementView';
1717
export * from './IllustratedMessage';
1818
export * from './Image';
19+
export * from './InlineAlert';
1920
export * from './ListView';
2021
export * from './model';
2122
export * from './ObjectView';

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const ELEMENT_NAME = {
4646
heading: uiComponentName('Heading'),
4747
illustratedMessage: uiComponentName('IllustratedMessage'),
4848
image: uiComponentName('Image'),
49+
inlineAlert: uiComponentName('InlineAlert'),
4950
item: uiComponentName('Item'),
5051
listActionGroup: uiComponentName('ListActionGroup'),
5152
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
@@ -62,6 +62,7 @@ import {
6262
Grid,
6363
IllustratedMessage,
6464
Image,
65+
InlineAlert,
6566
ListView,
6667
Picker,
6768
ProgressBar,
@@ -130,6 +131,7 @@ export const elementComponentMap = {
130131
[ELEMENT_NAME.heading]: Heading,
131132
[ELEMENT_NAME.illustratedMessage]: IllustratedMessage,
132133
[ELEMENT_NAME.image]: Image,
134+
[ELEMENT_NAME.inlineAlert]: InlineAlert,
133135
[ELEMENT_NAME.item]: Item,
134136
[ELEMENT_NAME.link]: Link,
135137
[ELEMENT_NAME.listActionGroup]: ListActionGroup,

0 commit comments

Comments
 (0)