@box/blueprint-web 12.10.0 → 12.12.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 (7) hide show
  1. package/dist/lib-esm/index.css +83 -45
  2. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js +0 -3
  3. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.js +5 -0
  4. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
  5. package/dist/lib-esm/utils/useFullTextTooltip.js +14 -8
  6. package/package.json +1 -1
  7. package/dist/lib-esm/utils/useFullTextTooltip.module.js +0 -4
package/dist/lib-esm/index.css CHANGED
@@ -31,63 +31,104 @@
31
31
  background-color:var(--surface-surface-hover);
32
32
  }
33
33
  }
34
- .bp_base_inline_notice_module_noticeWrapper--44eca{
35
- border-radius:var(--radius-2);
36
- display:flex;
37
- gap:var(--space-3);
34
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0[data-modern=false]{
35
+ --notice-radius:var(--radius-2);
36
+ --notice-gap:var(--space-3);
37
+ --notice-padding-block:var(--space-3);
38
+ --notice-padding-inline:var(--space-4);
39
+ --notice-space-3:var(--space-3);
40
+ --notice-surface-warning:var(--surface-message-surface-warning-secondary);
41
+ --notice-surface-info:var(--surface-message-surface-info-secondary);
42
+ --notice-surface-error:var(--surface-message-surface-error-secondary);
43
+ --notice-surface-success:var(--surface-message-surface-success-secondary);
44
+ --notice-surface-promo:var(--surface-message-surface-promo-secondary);
45
+ --notice-btn-text-promo:var(--text-cta-promo);
46
+ --notice-btn-surface-promo:var(--surface-cta-surface-promo);
47
+ --notice-btn-surface-promo-pressed:var(--surface-cta-surface-promo-pressed);
48
+ --notice-btn-surface-promo-focus:var(--surface-cta-surface-promo-focus);
49
+ --notice-btn-surface-promo-hover:var(--surface-cta-surface-promo-hover);
50
+ --notice-btn-surface-promo-focus-pressed:var(--surface-cta-surface-promo-focus-pressed);
51
+ --notice-content-text-color:var(--text-text-on-light);
52
+ }
53
+
54
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0[data-modern=true]{
55
+ --notice-radius:var(--bp-radius-10);
56
+ --notice-gap:var(--bp-space-030);
57
+ --notice-padding-block:var(--bp-space-030);
58
+ --notice-padding-inline:var(--bp-space-040);
59
+ --notice-space-3:var(--bp-space-030);
60
+ --notice-surface-warning:var(--bp-surface-message-surface-warning-secondary);
61
+ --notice-surface-info:var(--bp-surface-message-surface-info-secondary);
62
+ --notice-surface-error:var(--bp-surface-message-surface-error-secondary);
63
+ --notice-surface-success:var(--bp-surface-message-surface-success-secondary);
64
+ --notice-surface-promo:var(--bp-surface-message-surface-promo-secondary);
65
+ --notice-btn-text-promo:var(--bp-text-cta-promo);
66
+ --notice-btn-surface-promo:var(--bp-surface-cta-surface-promo);
67
+ --notice-btn-surface-promo-pressed:var(--bp-surface-cta-surface-promo-pressed);
68
+ --notice-btn-surface-promo-focus:var(--bp-surface-cta-surface-promo-focus);
69
+ --notice-btn-surface-promo-hover:var(--bp-surface-cta-surface-promo-hover);
70
+ --notice-btn-surface-promo-focus-pressed:var(--bp-surface-cta-surface-promo-focus-pressed);
71
+ --notice-content-text-color:var(--bp-text-text-on-light);
72
+ }
73
+
74
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0{
75
+ border-radius:var(--notice-radius);
76
+ display:flex;
77
+ gap:var(--notice-gap);
38
78
  justify-content:space-between;
39
- padding:var(--space-3) var(--space-4);
79
+ padding:var(--notice-padding-block) var(--notice-padding-inline);
40
80
  }
41
- .bp_base_inline_notice_module_noticeWrapper--44eca .bp_base_inline_notice_module_actions--44eca{
81
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0 .bp_base_inline_notice_module_actions--3ccd0{
42
82
  align-self:center;
43
83
  display:flex;
44
- gap:var(--space-3);
84
+ gap:var(--notice-gap);
45
85
  justify-content:flex-end;
46
86
  }
47
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundYellow--44eca{
48
- background:var(--surface-message-surface-warning-secondary);
87
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundYellow--3ccd0{
88
+ background:var(--notice-surface-warning);
49
89
  }
50
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundBlue--44eca{
51
- background:var(--surface-message-surface-info-secondary);
90
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundBlue--3ccd0{
91
+ background:var(--notice-surface-info);
52
92
  }
53
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundRed--44eca{
54
- background:var(--surface-message-surface-error-secondary);
93
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundRed--3ccd0{
94
+ background:var(--notice-surface-error);
55
95
  }
56
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundGreen--44eca{
57
- background:var(--surface-message-surface-success-secondary);
96
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundGreen--3ccd0{
97
+ background:var(--notice-surface-success);
58
98
  }
59
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundPurple--44eca{
60
- background:var(--surface-message-surface-promo-secondary);
99
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundPurple--3ccd0{
100
+ background:var(--notice-surface-promo);
61
101
  }
62
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundPurple--44eca .bp_base_inline_notice_module_actionButtonTertiary--44eca{
63
- color:var(--text-cta-promo);
102
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundPurple--3ccd0 .bp_base_inline_notice_module_actionButtonTertiary--3ccd0{
103
+ color:var(--notice-btn-text-promo);
64
104
  }
65
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundPurple--44eca .bp_base_inline_notice_module_actionButtonPrimary--44eca{
66
- background:var(--surface-cta-surface-promo);
67
- border-color:var(--surface-cta-surface-promo);
105
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundPurple--3ccd0 .bp_base_inline_notice_module_actionButtonPrimary--3ccd0{
106
+ background:var(--notice-btn-surface-promo);
107
+ border-color:var(--notice-btn-surface-promo);
68
108
  }
69
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundPurple--44eca .bp_base_inline_notice_module_actionButtonPrimary--44eca:active{
70
- background:var(--surface-cta-surface-promo-pressed);
109
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundPurple--3ccd0 .bp_base_inline_notice_module_actionButtonPrimary--3ccd0:active{
110
+ background:var(--notice-btn-surface-promo-pressed);
71
111
  }
72
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundPurple--44eca .bp_base_inline_notice_module_actionButtonPrimary--44eca[data-focus-visible]{
73
- background:var(--surface-cta-surface-promo-focus);
112
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundPurple--3ccd0 .bp_base_inline_notice_module_actionButtonPrimary--3ccd0[data-focus-visible]{
113
+ background:var(--notice-btn-surface-promo-focus);
74
114
  }
75
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundPurple--44eca .bp_base_inline_notice_module_actionButtonPrimary--44eca:hover{
76
- background:var(--surface-cta-surface-promo-hover);
77
- border-color:var(--surface-cta-surface-promo-hover);
115
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundPurple--3ccd0 .bp_base_inline_notice_module_actionButtonPrimary--3ccd0:hover{
116
+ background:var(--notice-btn-surface-promo-hover);
117
+ border-color:var(--notice-btn-surface-promo-hover);
78
118
  }
79
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundPurple--44eca .bp_base_inline_notice_module_actionButtonPrimary--44eca:focus:active{
80
- background:var(--surface-cta-surface-promo-focus-pressed);
119
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundPurple--3ccd0 .bp_base_inline_notice_module_actionButtonPrimary--3ccd0:focus:active{
120
+ background:var(--notice-btn-surface-promo-focus-pressed);
81
121
  }
82
- .bp_base_inline_notice_module_noticeWrapper--44eca.bp_base_inline_notice_module_backgroundPurple--44eca .bp_base_inline_notice_module_actionButtonPrimary--44eca:hover:active{
83
- background:var(--surface-cta-surface-promo-pressed);
122
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0.bp_base_inline_notice_module_backgroundPurple--3ccd0 .bp_base_inline_notice_module_actionButtonPrimary--3ccd0:hover:active{
123
+ background:var(--notice-btn-surface-promo-pressed);
84
124
  }
85
- .bp_base_inline_notice_module_noticeWrapper--44eca .bp_base_inline_notice_module_contentContainer--44eca{
125
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0 .bp_base_inline_notice_module_contentContainer--3ccd0{
126
+ align-items:center;
86
127
  display:flex;
87
- gap:var(--space-3);
128
+ gap:var(--notice-gap);
88
129
  }
89
- .bp_base_inline_notice_module_noticeWrapper--44eca .bp_base_inline_notice_module_content--44eca{
90
- color:var(--text-text-on-light);
130
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0 .bp_base_inline_notice_module_content--3ccd0{
131
+ color:var(--notice-content-text-color);
91
132
  font-family:var(--body-default-font-family);
92
133
  font-size:var(--body-default-font-size);
93
134
  font-weight:var(--body-default-font-weight);
@@ -97,10 +138,10 @@
97
138
  text-decoration:var(--body-default-text-decoration);
98
139
  text-transform:var(--body-default-text-case);
99
140
  }
100
- .bp_base_inline_notice_module_noticeWrapper--44eca svg{
141
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0 svg{
101
142
  display:block;
102
143
  }
103
- .bp_base_inline_notice_module_noticeWrapper--44eca .bp_base_inline_notice_module_title--44eca{
144
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0 .bp_base_inline_notice_module_title--3ccd0{
104
145
  font-family:var(--body-default-bold-font-family);
105
146
  font-size:var(--body-default-bold-font-size);
106
147
  font-weight:var(--body-default-bold-font-weight);
@@ -112,10 +153,10 @@
112
153
  }
113
154
 
114
155
  @media (max-width: 1023px){
115
- .bp_base_inline_notice_module_actions--44eca{
116
- margin-top:var(--space-3);
156
+ .bp_base_inline_notice_module_actions--3ccd0{
157
+ margin-top:var(--notice-space-3);
117
158
  }
118
- .bp_base_inline_notice_module_noticeWrapper--44eca{
159
+ .bp_base_inline_notice_module_noticeWrapper--3ccd0{
119
160
  display:block;
120
161
  }
121
162
  }
@@ -2386,9 +2427,6 @@
2386
2427
  .bp_content_card_module_pillGhost--14a6a{
2387
2428
  margin-inline-end:var(--size-2);
2388
2429
  }
2389
- .bp_useFullTextTooltip_module_tooltipContent--0a9fb > *{
2390
- color:var(--text-text-on-dark) !important;
2391
- }
2392
2430
  .bp_content_field_module_contentFieldWrapper--dabac{
2393
2431
  width:100%;
2394
2432
  }
package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { IconIconOnLight, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
3
- import clsx from 'clsx';
4
3
  import { forwardRef, createElement } from 'react';
5
- import styles from './base-inline-notice.module.js';
6
4
 
7
5
  const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
8
6
  const {
@@ -22,7 +20,6 @@ const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
22
20
  return jsx("span", {
23
21
  ...rest,
24
22
  ref: forwardedRef,
25
- className: clsx(styles.icon),
26
23
  children: iconElement
27
24
  });
28
25
  });
package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
+ import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
4
5
  import styles from './base-inline-notice.module.js';
5
6
 
6
7
  const BaseInlineNotice = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -10,10 +11,14 @@ const BaseInlineNotice = /*#__PURE__*/forwardRef((props, forwardedRef) => {
10
11
  className,
11
12
  ...rest
12
13
  } = props;
14
+ const {
15
+ enableModernizedComponents
16
+ } = useBlueprintModernization();
13
17
  return jsx("div", {
14
18
  ...rest,
15
19
  ref: forwardedRef,
16
20
  className: clsx(styles.noticeWrapper, styles[backgroundColor], className),
21
+ "data-modern": enableModernizedComponents,
17
22
  children: children
18
23
  });
19
24
  });
package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--44eca","actions":"bp_base_inline_notice_module_actions--44eca","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--44eca","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--44eca","backgroundRed":"bp_base_inline_notice_module_backgroundRed--44eca","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--44eca","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--44eca","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--44eca","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--44eca","contentContainer":"bp_base_inline_notice_module_contentContainer--44eca","content":"bp_base_inline_notice_module_content--44eca","title":"bp_base_inline_notice_module_title--44eca"};
2
+ var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--3ccd0","actions":"bp_base_inline_notice_module_actions--3ccd0","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--3ccd0","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--3ccd0","backgroundRed":"bp_base_inline_notice_module_backgroundRed--3ccd0","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--3ccd0","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--3ccd0","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--3ccd0","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--3ccd0","contentContainer":"bp_base_inline_notice_module_contentContainer--3ccd0","content":"bp_base_inline_notice_module_content--3ccd0","title":"bp_base_inline_notice_module_title--3ccd0"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/utils/useFullTextTooltip.js CHANGED
@@ -1,8 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import clsx from 'clsx';
3
2
  import { Fragment } from 'react';
4
3
  import { Tooltip } from '../tooltip/tooltip.js';
5
- import styles from './useFullTextTooltip.module.js';
6
4
  import { useIsEllipsized } from './useIsEllipsized.js';
7
5
 
8
6
  const useFullTextTooltip = ({
@@ -13,12 +11,20 @@ const useFullTextTooltip = ({
13
11
  }) => {
14
12
  const isEllipsized = useIsEllipsized(ref);
15
13
  const shouldWrapInTooltip = isEllipsized && !skipOverflowCheck;
16
- const Wrapper = shouldWrapInTooltip ? props => jsx(Tooltip, {
17
- ...props,
18
- className: clsx(styles.tooltipContent, props.className),
19
- content: props.content ?? textValue ?? children,
20
- variant: "standard"
21
- }) : Fragment;
14
+ const Wrapper = shouldWrapInTooltip ? props => {
15
+ const finalContent = props.content ?? textValue ?? children;
16
+ if (!finalContent) {
17
+ // eslint-disable-next-line react/jsx-no-useless-fragment
18
+ return jsx(Fragment, {
19
+ ...props
20
+ });
21
+ }
22
+ return jsx(Tooltip, {
23
+ ...props,
24
+ content: finalContent,
25
+ variant: "standard"
26
+ });
27
+ } : Fragment;
22
28
  return {
23
29
  Wrapper,
24
30
  wrapperProps: {}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.10.0",
3
+ "version": "12.12.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
package/dist/lib-esm/utils/useFullTextTooltip.module.js DELETED
@@ -1,4 +0,0 @@
1
- import '../index.css';
2
- var styles = {"tooltipContent":"bp_useFullTextTooltip_module_tooltipContent--0a9fb"};
3
-
4
- export { styles as default };