@box/blueprint-web 12.75.0 → 12.75.1
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.
- package/dist/lib-esm/index.css +29 -32
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-content.js +0 -1
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js +10 -4
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
- package/package.json +1 -1
package/dist/lib-esm/index.css
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
background-color:var(--surface-surface-hover);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
34
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9[data-modern=false]{
|
|
35
35
|
--notice-radius:var(--radius-2);
|
|
36
36
|
--notice-gap:var(--space-3);
|
|
37
37
|
--notice-padding-block:var(--space-3);
|
|
@@ -49,9 +49,11 @@
|
|
|
49
49
|
--notice-btn-surface-promo-hover:var(--surface-cta-surface-promo-hover);
|
|
50
50
|
--notice-btn-surface-promo-focus-pressed:var(--surface-cta-surface-promo-focus-pressed);
|
|
51
51
|
--notice-content-text-color:var(--text-text-on-light);
|
|
52
|
+
--notice-content-align:center;
|
|
53
|
+
--notice-icon-padding-top:0;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
56
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9[data-modern=true]{
|
|
55
57
|
--notice-radius:var(--bp-radius-10);
|
|
56
58
|
--notice-gap:var(--bp-space-030);
|
|
57
59
|
--notice-padding-block:var(--bp-space-030);
|
|
@@ -69,65 +71,67 @@
|
|
|
69
71
|
--notice-btn-surface-promo-hover:var(--bp-surface-cta-surface-promo-hover);
|
|
70
72
|
--notice-btn-surface-promo-focus-pressed:var(--bp-surface-cta-surface-promo-focus-pressed);
|
|
71
73
|
--notice-content-text-color:var(--bp-text-text-on-light);
|
|
74
|
+
--notice-content-align:top;
|
|
75
|
+
--notice-icon-padding-top:var(--bp-space-005);
|
|
72
76
|
}
|
|
73
77
|
|
|
74
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
78
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9{
|
|
75
79
|
border-radius:var(--notice-radius);
|
|
76
80
|
display:flex;
|
|
77
81
|
gap:var(--notice-gap);
|
|
78
82
|
justify-content:space-between;
|
|
79
83
|
padding:var(--notice-padding-block) var(--notice-padding-inline);
|
|
80
84
|
}
|
|
81
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
85
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9 .bp_base_inline_notice_module_actions--186f9{
|
|
82
86
|
align-self:center;
|
|
83
87
|
display:flex;
|
|
84
88
|
gap:var(--notice-gap);
|
|
85
89
|
justify-content:flex-end;
|
|
86
90
|
}
|
|
87
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
91
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundYellow--186f9{
|
|
88
92
|
background:var(--notice-surface-warning);
|
|
89
93
|
}
|
|
90
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
94
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundBlue--186f9{
|
|
91
95
|
background:var(--notice-surface-info);
|
|
92
96
|
}
|
|
93
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
97
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundRed--186f9{
|
|
94
98
|
background:var(--notice-surface-error);
|
|
95
99
|
}
|
|
96
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
100
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundGreen--186f9{
|
|
97
101
|
background:var(--notice-surface-success);
|
|
98
102
|
}
|
|
99
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
103
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9{
|
|
100
104
|
background:var(--notice-surface-promo);
|
|
101
105
|
}
|
|
102
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
106
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonTertiary--186f9{
|
|
103
107
|
color:var(--notice-btn-text-promo);
|
|
104
108
|
}
|
|
105
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
109
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9{
|
|
106
110
|
background:var(--notice-btn-surface-promo);
|
|
107
111
|
border-color:var(--notice-btn-surface-promo);
|
|
108
112
|
}
|
|
109
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
113
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9:active{
|
|
110
114
|
background:var(--notice-btn-surface-promo-pressed);
|
|
111
115
|
}
|
|
112
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
116
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9[data-focus-visible]{
|
|
113
117
|
background:var(--notice-btn-surface-promo-focus);
|
|
114
118
|
}
|
|
115
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
119
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9:hover{
|
|
116
120
|
background:var(--notice-btn-surface-promo-hover);
|
|
117
121
|
border-color:var(--notice-btn-surface-promo-hover);
|
|
118
122
|
}
|
|
119
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
123
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9:focus:active{
|
|
120
124
|
background:var(--notice-btn-surface-promo-focus-pressed);
|
|
121
125
|
}
|
|
122
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
126
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9.bp_base_inline_notice_module_backgroundPurple--186f9 .bp_base_inline_notice_module_actionButtonPrimary--186f9:hover:active{
|
|
123
127
|
background:var(--notice-btn-surface-promo-pressed);
|
|
124
128
|
}
|
|
125
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
126
|
-
align-items:
|
|
129
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9 .bp_base_inline_notice_module_contentContainer--186f9{
|
|
130
|
+
align-items:var(--notice-content-align);
|
|
127
131
|
display:flex;
|
|
128
132
|
gap:var(--notice-gap);
|
|
129
133
|
}
|
|
130
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
134
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9 .bp_base_inline_notice_module_content--186f9{
|
|
131
135
|
color:var(--notice-content-text-color);
|
|
132
136
|
font-family:var(--body-default-font-family);
|
|
133
137
|
font-size:var(--body-default-font-size);
|
|
@@ -138,25 +142,18 @@
|
|
|
138
142
|
text-decoration:var(--body-default-text-decoration);
|
|
139
143
|
text-transform:var(--body-default-text-case);
|
|
140
144
|
}
|
|
141
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
142
|
-
|
|
145
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9 .bp_base_inline_notice_module_icon--186f9{
|
|
146
|
+
padding-top:var(--notice-icon-padding-top);
|
|
143
147
|
}
|
|
144
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
145
|
-
|
|
146
|
-
font-size:var(--body-default-bold-font-size);
|
|
147
|
-
font-weight:var(--body-default-bold-font-weight);
|
|
148
|
-
letter-spacing:var(--body-default-bold-letter-spacing);
|
|
149
|
-
line-height:var(--body-default-bold-line-height);
|
|
150
|
-
-webkit-text-decoration:var(--body-default-bold-text-decoration);
|
|
151
|
-
text-decoration:var(--body-default-bold-text-decoration);
|
|
152
|
-
text-transform:var(--body-default-bold-text-case);
|
|
148
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9 svg{
|
|
149
|
+
display:block;
|
|
153
150
|
}
|
|
154
151
|
|
|
155
152
|
@media (max-width: 1023px){
|
|
156
|
-
.bp_base_inline_notice_module_actions--
|
|
153
|
+
.bp_base_inline_notice_module_actions--186f9{
|
|
157
154
|
margin-top:var(--notice-space-3);
|
|
158
155
|
}
|
|
159
|
-
.bp_base_inline_notice_module_noticeWrapper--
|
|
156
|
+
.bp_base_inline_notice_module_noticeWrapper--186f9{
|
|
160
157
|
display:block;
|
|
161
158
|
}
|
|
162
159
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { IconIconOnLight, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
2
|
+
import { bpIconIconOnLight, IconIconOnLight, bpSize050, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
3
3
|
import { forwardRef, createElement } from 'react';
|
|
4
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
5
|
+
import styles from './base-inline-notice.module.js';
|
|
4
6
|
|
|
5
7
|
const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
6
8
|
const {
|
|
@@ -8,18 +10,22 @@ const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
8
10
|
iconAriaLabel,
|
|
9
11
|
...rest
|
|
10
12
|
} = props;
|
|
13
|
+
const {
|
|
14
|
+
enableModernizedComponents
|
|
15
|
+
} = useBlueprintModernization();
|
|
11
16
|
if (!icon) {
|
|
12
17
|
return null;
|
|
13
18
|
}
|
|
14
19
|
const iconElement = /*#__PURE__*/createElement(icon, {
|
|
15
|
-
color: IconIconOnLight,
|
|
16
|
-
width: Size5,
|
|
17
|
-
height: Size5,
|
|
20
|
+
color: enableModernizedComponents ? bpIconIconOnLight : IconIconOnLight,
|
|
21
|
+
width: enableModernizedComponents ? bpSize050 : Size5,
|
|
22
|
+
height: enableModernizedComponents ? bpSize050 : Size5,
|
|
18
23
|
'aria-label': iconAriaLabel
|
|
19
24
|
});
|
|
20
25
|
return jsx("span", {
|
|
21
26
|
...rest,
|
|
22
27
|
ref: forwardedRef,
|
|
28
|
+
className: styles.icon,
|
|
23
29
|
children: iconElement
|
|
24
30
|
});
|
|
25
31
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--
|
|
2
|
+
var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--186f9","actions":"bp_base_inline_notice_module_actions--186f9","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--186f9","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--186f9","backgroundRed":"bp_base_inline_notice_module_backgroundRed--186f9","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--186f9","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--186f9","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--186f9","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--186f9","contentContainer":"bp_base_inline_notice_module_contentContainer--186f9","content":"bp_base_inline_notice_module_content--186f9","icon":"bp_base_inline_notice_module_icon--186f9"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|