@indico-data/design-system 2.51.2 → 2.53.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/lib/components/forms/date/datePicker/types.d.ts +3 -0
  2. package/lib/components/forms/input/Input.d.ts +2 -1
  3. package/lib/components/forms/timePicker/TimePicker.d.ts +7 -0
  4. package/lib/components/forms/timePicker/TimePicker.stories.d.ts +6 -0
  5. package/lib/components/forms/timePicker/__tests__/TimePicker.test.d.ts +1 -0
  6. package/lib/components/forms/timePicker/constants.d.ts +13 -0
  7. package/lib/components/forms/timePicker/helpers.d.ts +5 -0
  8. package/lib/components/forms/timePicker/index.d.ts +1 -0
  9. package/lib/index.css +148 -10
  10. package/lib/index.d.ts +13 -2
  11. package/lib/index.esm.css +148 -10
  12. package/lib/index.esm.js +155 -96
  13. package/lib/index.esm.js.map +1 -1
  14. package/lib/index.js +155 -95
  15. package/lib/index.js.map +1 -1
  16. package/package.json +1 -1
  17. package/plugin-build-tool.json +4 -0
  18. package/src/components/forms/date/datePicker/DatePicker.stories.tsx +67 -4
  19. package/src/components/forms/date/datePicker/DatePicker.tsx +28 -2
  20. package/src/components/forms/date/datePicker/styles/DatePicker.scss +9 -0
  21. package/src/components/forms/date/datePicker/types.ts +3 -0
  22. package/src/components/forms/form/styles/Form.scss +1 -0
  23. package/src/components/forms/input/Input.tsx +5 -2
  24. package/src/components/forms/numberInput/NumberInput.tsx +1 -1
  25. package/src/components/forms/timePicker/TimePicker.mdx +39 -0
  26. package/src/components/forms/timePicker/TimePicker.stories.tsx +79 -0
  27. package/src/components/forms/timePicker/TimePicker.tsx +104 -0
  28. package/src/components/forms/timePicker/__tests__/TimePicker.test.tsx +26 -0
  29. package/src/components/forms/timePicker/constants.ts +21 -0
  30. package/src/components/forms/timePicker/helpers.ts +14 -0
  31. package/src/components/forms/timePicker/index.ts +1 -0
  32. package/src/components/forms/timePicker/styles/TimePicker.scss +51 -0
  33. package/src/components/modal/Modal.tsx +11 -15
  34. package/src/components/modal/styles/Modal.scss +31 -11
  35. package/src/index.ts +1 -0
  36. package/src/styles/index.scss +2 -1
package/src/components/modal/styles/Modal.scss CHANGED
@@ -1,6 +1,14 @@
1
1
  // Common Variables
2
2
  :root {
3
3
  --pf-modal-rounded: var(--pf-rounded-lg);
4
+ --pf-modal-close-button-top: var(--pf-margin-2);
5
+ --pf-modal-close-button-right: var(--pf-margin-2);
6
+ --pf-modal-close-button-padding: var(--pf-padding-3) var(--pf-padding-4);
7
+ --pf-modal-close-button-font-size: var(--pf-font-size-caption);
8
+ --pf-modal-close-button-icon-size: var(--pf-font-size-caption);
9
+ --pf-modal-overlay-background: rgba(0, 0, 0, 0.5);
10
+ --pf-modal-overlay-transition: opacity 100ms ease-in-out;
11
+ --pf-modal-content-padding: var(--pf-padding-10);
4
12
  }
5
13
 
6
14
  // Light Theme Specific Variables
@@ -23,14 +31,14 @@
23
31
  left: 0;
24
32
  right: 0;
25
33
  bottom: 0;
26
- background-color: rgba(0, 0, 0, 0.5);
34
+ background-color: var(--pf-modal-overlay-background);
27
35
  display: flex;
28
36
  align-items: center;
29
37
  justify-content: center;
30
38
  }
31
39
  .ReactModal__Overlay {
32
40
  opacity: 0;
33
- transition: opacity 100ms ease-in-out;
41
+ transition: var(--pf-modal-overlay-transition);
34
42
  }
35
43
 
36
44
  .ReactModal__Overlay--after-open {
@@ -41,7 +49,6 @@
41
49
  opacity: 0;
42
50
  }
43
51
 
44
- // New CSS
45
52
  .modal {
46
53
  position: absolute;
47
54
  left: 50%;
@@ -59,29 +66,42 @@
59
66
  top: 50px;
60
67
  }
61
68
 
69
+ .modal-close-button {
70
+ position: absolute;
71
+ top: var(--pf-modal-close-button-top);
72
+ right: var(--pf-modal-close-button-right);
73
+ padding: var(--pf-modal-close-button-padding);
74
+ font-size: var(--pf-modal-close-button-font-size);
75
+ line-height: 1;
76
+
77
+ &.btn .icon {
78
+ width: var(--pf-modal-close-button-icon-size) !important;
79
+ height: var(--pf-modal-close-button-icon-size);
80
+
81
+ svg {
82
+ width: 100%;
83
+ height: 100%;
84
+ }
85
+ }
86
+ }
87
+
62
88
  .modal-content {
89
+ position: relative;
63
90
  background-color: var(--pf-modal-background-color);
64
91
  border: var(--pf-border-sm) solid var(--pf-modal-border-color);
65
92
  border-radius: var(--pf-modal-rounded);
93
+ padding: var(--pf-modal-content-padding);
66
94
 
67
95
  .modal-body {
68
- padding: var(--pf-padding-8);
69
- padding-top: 0;
70
-
71
96
  h2 {
72
97
  font-size: var(--pf-font-size-h1);
73
98
  }
74
99
 
75
- // We should build a divider component for this
76
100
  hr {
77
101
  margin-top: var(--pf-margin-8);
78
102
  margin-bottom: var(--pf-margin-8);
79
103
  border: var(--pf-border-sm) solid var(--pf-border-color);
80
104
  }
81
105
  }
82
-
83
- .modal-close {
84
- text-align: right;
85
- }
86
106
  }
87
107
  }
package/src/index.ts CHANGED
@@ -18,6 +18,7 @@ export { Textarea } from './components/forms/textarea';
18
18
  export { PasswordInput } from './components/forms/passwordInput';
19
19
  export { Select as SelectInput } from './components/forms/select';
20
20
  export { DatePicker } from './components/forms/date/datePicker/DatePicker';
21
+ export { TimePicker } from './components/forms/timePicker';
21
22
  export { IconTriggerDatePicker } from './components/forms/date/iconTriggerDatePicker';
22
23
  export { SingleInputDatePicker } from './components/forms/date/inputDatePicker';
23
24
  export { Form } from './components/forms/form';
package/src/styles/index.scss CHANGED
@@ -21,11 +21,12 @@
21
21
  @import '../components/menu/styles/Menu.scss';
22
22
  @import '../components/floatUI/styles/FloatUI.scss';
23
23
  @import '../components/forms/date/datePicker/styles/DatePicker.scss';
24
+ @import '../components/forms/timePicker/styles/TimePicker.scss';
24
25
  @import '../components/badge/styles/Badge.scss';
25
26
  @import '../components/modal/styles/Modal.scss';
26
27
  @import '../components/pagination/styles/Pagination.scss';
27
28
  @import '../components/tanstackTable/styles/table.scss';
28
-
29
+ @import '../components/forms/timePicker/styles/TimePicker.scss';
29
30
  @import '../components/pill/styles/Pill.scss';
30
31
  @import 'sheets'; // Port to an sheets component when we build it
31
32
  @import 'typography';