Skip to content

Commit 38389f0

Browse files
aweellaweell
authored
Merge pull request #564 from dxc-technology/component-dialog
Component dialog documentation review
2 parents 4afb8c3 + 4fc4581 commit 38389f0

File tree

1 file changed

+73
-71
lines changed

1 file changed

+73
-71
lines changed

‎guidelines/components/dialog/README.md‎

Lines changed: 73 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,12 @@ A modal dialog is a message box or child window that requires user interaction b
55
## Usage
66

77

8-
* The dialog always should have a title to introduce the actions or information that will get displayed on the screen.
9-
* Can contain a descriptive text or a phrase related to the action that triggered the dialog.
10-
* Can have some combinations of actions, like buttons to accept/cancel the action. There can be one, two or more buttons.
8+
* The dialog always should have a title to introduce the actions or information that will get displayed on the screen
9+
* Can contain a descriptive text or a phrase related to the action that triggered the dialog
10+
* Can have some combinations of actions, like buttons to accept/cancel the action. There can be one, two or more buttons
1111
* If the dialog is not including a cancel action, provide a way to close it
12-
* Modal dialog boxes should overlay only a portion of the underlying page to keep the user oriented within the workflow.
13-
* The modal dialog should emerge from the top of the screen and be centered horizontally on the parent page.
14-
* Modal dialog features should be used sparingly, as they disrupt workflow, but can be advantageous when used properly
15-
12+
* Modal dialog boxes should overlay only a portion of the underlying page to keep the user oriented within the workflow
13+
1614

1715
## Anatomy
1816

@@ -24,6 +22,23 @@ A modal dialog is a message box or child window that requires user interaction b
2422
4. Dialog actions
2523
5. Content
2624

25+
## Content
26+
27+
![Example of a dialog using Halstack components as content](images/dialog_content.png)
28+
29+
_Example of a dialog using Halstack components as content_
30+
31+
Any content (Halstack components or custom) can be placed inside the dialog component, try always to avoid scrolling.
32+
33+
34+
## Overlay
35+
36+
![Example of the overlay usage](images/dialog_overlay.png)
37+
38+
_Example of the overlay usage_
39+
40+
The overlay element makes possible to get the user attention into the dialog creating a layer between the actual application and the modal information showed in the user interface.
41+
2742

2843
## Design Specifications
2944

@@ -45,20 +60,20 @@ _Design specifications for dialog component_
4560
| `closeIconBackgroundColor` | Icon close background | `none` | none |
4661
| `closeIconBorderColor` | Icon close border | `none` | none |
4762

48-
### Padding
63+
### Typography
4964

50-
padding | value
51-
-- | --
52-
`xxsmall` | 6px
53-
`xsmall` | 16px
54-
`small` _(default)_ | 24px
55-
`medium` | 36px
56-
`large` | 48px
57-
`xlarge` | 64px
58-
`xxlarge` | 100px
65+
| Component token | Element | Core token | Value |
66+
| :----------------------------- | :------------------------- | :--------------------------- | :----------------------- |
67+
| `fontFamily` | Content | `font-family-sans` | 'Open Sans, sans-serif' |
68+
| `fontSize` | Content | `font-scale-03` | 1rem / 16px |
69+
| `fontWeight` | Content | `font-weight-regular` | 400 |
70+
71+
| Property | Element | Core token | Value |
72+
| :----------------------------- | :------------------------- | :--------------------------- | :----------------------- |
73+
| `font-family` | Title | `font-family-sans` | 'Open Sans, sans-serif' |
74+
| `font-size` | Title | `font-scale-05` | 1.5rem / 24px |
75+
| `font-weight` | Title | `font-weight-semibold` | 600 |
5976

60-
And also apply different values to each side of the component:
61-
`top` `bottom` `left` `right`
6277

6378
### Border
6479

@@ -68,74 +83,61 @@ And also apply different values to each side of the component:
6883
| `border-style` | Container | `border-style-none` | none |
6984
| `border-radius` | Container | `border-radius-medium` | 0.25rem / 4px |
7085

86+
### Spacing
7187

72-
### Specifications for desktop and tablet (landscape mode)
73-
74-
| Property | value |
75-
| --------------------- | ----------------- |
76-
| `min-width` | 800px |
77-
| `max-width` | 80% |
78-
| Title `font-size` | 24px |
79-
| Body `font size` | 16px |
80-
| `font-weight` | Regular |
81-
| 'X' icon size | 24x24px |
82-
| `margin` | 32px |
83-
| Title icon space | 12px |
84-
85-
86-
### Specifications for tablet (portrait mode)
87-
88-
| Property | Value |
89-
| --------------- | ------ |
90-
| `min-width` | 92% |
91-
| `max-width` | 92% |
92-
93-
94-
### Specifications for phone
95-
96-
| Property | Value |
97-
| ------------------ | ------ |
98-
| `min-width` | 92% |
99-
| `max-width` | 92% |
100-
| Title `font-size` | 20px |
101-
102-
## Content
103-
104-
![Example of a dialog using Halstack components as content](images/dialog_content.png)
105-
106-
_Example of a dialog using Halstack components as content_
88+
| Property | Element | Core token | Value |
89+
| :----------------------- | :--------------- | :------------------------- | :--------------- |
90+
| `margin-right` | Title icon | `spacing-04` | 0.75rem / 12px |
91+
| `margin-bottom` | Title | `spacing-06` | 1.5rem / 24px |
10792

108-
Any content (Halstack component or custom) can be placed inside the dialog component, try always to avoid scrolling.
10993

94+
### Size
11095

111-
## Overlay
96+
| Property | Element | Core token | Value |
97+
| :----------------------- | :--------------- | :------------------------- | :--------------- |
98+
| `min-width` | Container | - | 800px |
99+
| `max-width` | Container | - | 80% |
100+
| `width` | Close action | - | 24px |
101+
| `height` | Close action | - | 24px |
112102

113-
![Example of the overlay usage](images/dialog_overlay.png)
103+
### Overlay
114104

115-
_Example of the overlay usage_
105+
| Component token | Element | Core token | Value |
106+
| :----------------------- | :--------------- | :------------------------- | :--------------- |
107+
| `overlayOpacity` | Overlay | - | 0.7 |
116108

117-
The overlay element makes possible to get the user attention into the dialog creating a layer between the actual application and the modal information showed in the user interface.
109+
| Property | Element | Core token | Value |
110+
| :----------------------- | :--------------- | :------------------------- | :--------------- |
111+
| `width` | Overlay | - | 100vw |
112+
| `height` | Overlay | - | 100vh |
118113

119-
### Specifications for overlay
120114

121-
| Property | Value |
122-
| -------- | ------------------: |
123-
| Width | `100vw` |
124-
| Height | `100vh` |
125-
| Color | `#000, 0.7 opacity` |
115+
### Padding
126116

117+
| Padding | Value |
118+
| :------------------ | :----- |
119+
| `xxsmall` | 6px |
120+
| `xsmall` | 16px |
121+
| `small` _(default)_ | 24px |
122+
| `medium` | 36px |
123+
| `large` | 48px |
124+
| `xlarge` | 64px |
125+
| `xxlarge` | 100px |
127126

128-
## Combining with other UI elements
127+
And also apply different values to each side of the component:
128+
`top` `bottom` `left` `right`
129129

130-
There are some elements that require some guidance to use it on the dialog component, based on the nature of the component or the behavior that it has in the ecosystem. Due to resource loading or prompting messages for the user, special guides are defined to incorporate these scenarios.
130+
## Accesibility
131131

132-
For the case that the application has a modal opened and it needs to load data from the server, we can represent this situation to the user in several ways.
132+
### WCAG
133133

134-
- One option can be to stick to the default implementation of the spinner component and use it in the overlay mode, overlapping the loading element to the rest of the interface components and make it clear that the application is getting some resources from the APIs.
135-
- Another approach, to avoid render an overlay on top of another overlay is to integrate the loading indicator into the modal window. This can be done placing the spinner near the title of the dialog, on the right side and the small variations of the component. Using this way we make explicit to the user that the applications are working on something without the need to distract the attention from the dialog.
134+
* Understanding WCAG 2.2 - [2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG22/Understanding/no-keyboard-trap.html)
135+
* Understanding WCAG 2.2 - [2.4.3 Focus Order](https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html)
136136

137-
Both approaches are equally valid, and its use depends on the context of the application and the content of the dialog.
137+
### WAI-ARIA
138138

139+
* WAI-ARIA Authoring practices 1.2 - [3.9 Dialog (Modal)](https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal)
140+
* WAI-ARIA Authoring practices 1.2 - [Modal Dialog Example](https://www.w3.org/TR/wai-aria-practices-1.2/examples/dialog-modal/dialog.html)
139141

140142

141143
## Links and references

0 commit comments

Comments
 (0)