@box/blueprint-web 12.15.0 → 12.17.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.
- package/dist/lib-esm/badge/icon-badge.d.ts +1 -1
- package/dist/lib-esm/badge/icon-badge.js +123 -18
- package/dist/lib-esm/index.css +120 -55
- package/dist/lib-esm/primitives/base-text-input/base-text-input.js +5 -0
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ export interface TooltipConfig {
|
|
|
6
6
|
}
|
|
7
7
|
export interface IconBadgeProps extends BadgeProps {
|
|
8
8
|
/** The variant of the icon badge. */
|
|
9
|
-
variant: 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress' | 'alert-error' | 'status-pending';
|
|
9
|
+
variant: 'file-audio' | 'file-bookmark' | 'file-box-app' | 'file-code' | 'file-default' | 'file-drawing' | 'file-excel' | 'file-hub' | 'file-illustrator' | 'file-indesign' | 'file-numbers' | 'file-photoshop' | 'file-powerpoint' | 'file-presentation' | 'file-slides' | 'file-spreadsheet' | 'file-text' | 'file-three-d' | 'file-vector' | 'file-word' | 'file-zip' | 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress' | 'alert-error' | 'status-pending';
|
|
10
10
|
/** Whether to show the tooltip when hovering over the badge. */
|
|
11
11
|
showTooltipOnBadge?: boolean;
|
|
12
12
|
/** The configuration for the tooltip, required if showTooltipOnBadge is true. */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { FileAudio, FileBookmark, BoxApps, FileBoxNote, FileCanvas, Code, FileDefault, FileDocs, FileDrawing, FileExcel, Hubs, FileIllustrator, FileImage, FileIndesign, FileKeynote, FileNumbers, FilePages, FilePdf, FilePhotoshop, FilePowerpoint, FilePresentation, FileSheets, FileSlides, FileSpreadsheet, FileText, FileThreeD, FileVector, FileVideo, FileWord, FileZip, FolderExternal, FolderShared, Relay, EllipsisBubble, Task, ApprovalTask, Annotation, Checkmark, XMark, GlobeBadge, Star, Pin, Arrow, CheckmarkUnderline, Loader, Alert, ClockBadge } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
+
import { SurfaceBadgeAudioSurface, GrayWhite, SurfaceBadgeBookmarkSurface, SurfaceBadgeBoxappsSurface, SurfaceBadgeBoxnoteSurface, Gray100, SurfaceBadgeCanvasSurface, SurfaceBadgeCodeSurface, SurfaceBadgeDefaultSurface, SurfaceBadgeDocsSurface, SurfaceBadgeDrawingSurface, SurfaceBadgeExcelSurface, SurfaceBadgeHubsSurface, SurfaceBadgeIllustratorSurface, IconIconIllustrator, SurfaceBadgeImageSurface, SurfaceBadgeIndesignSurface, IconIconIndesign, SurfaceBadgeKeynoteSurface, SurfaceBadgeNumbersSurface, SurfaceBadgePagesSurface, SurfaceBadgePdfSurface, SurfaceBadgePhotoshopSurface, IconIconPhotoshop, SurfaceBadgePowerpointSurface, SurfaceBadgePresentationSurface, SurfaceBadgeSheetsSurface, SurfaceBadgeSlidesSurface, GrayBlack, SurfaceBadgeSpreadsheetSurface, SurfaceBadgeTextSurface, SurfaceBadgeThreeDSurface, SurfaceBadgeVectorSurface, SurfaceBadgeVideoSurface, SurfaceBadgeWordSurface, SurfaceBadgeZipSurface, SurfaceBadgeFolderexternalSurface, SurfaceBadgeFoldersharedSurface, SurfaceBadgeRelaySurface, SurfaceBadgeMentionSurface, SurfaceBadgeTaskSurface, SurfaceBadgeTaskapprovalSurface, SurfaceBadgeAnnotationSurface, SurfaceBadgeCompletedSurface, SurfaceBadgeRejectedSurface, SurfaceBadgeExternalSurface, SurfaceBadgeAdminSurface, SurfaceBadgeCoadminSurface, SurfaceBadgePinSurface, Gray80, SurfaceBadgeCollectionSurface, SurfaceBadgeOfflineSurface, SurfaceBadgeProgressSurface, SurfaceBadgeErrorSurface, Orange100 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import mapValues from 'lodash/mapValues';
|
|
6
6
|
import { createElement } from 'react';
|
|
@@ -10,9 +10,39 @@ import styles from './base-badge.module.js';
|
|
|
10
10
|
import { useSingleChildCheck } from './utils/useSingleChildCheck.js';
|
|
11
11
|
|
|
12
12
|
const badgeVariantToIconProps = {
|
|
13
|
-
'file-
|
|
14
|
-
backgroundColor:
|
|
15
|
-
icon:
|
|
13
|
+
'file-audio': {
|
|
14
|
+
backgroundColor: SurfaceBadgeAudioSurface,
|
|
15
|
+
icon: FileAudio,
|
|
16
|
+
iconColor: GrayWhite
|
|
17
|
+
},
|
|
18
|
+
'file-bookmark': {
|
|
19
|
+
backgroundColor: SurfaceBadgeBookmarkSurface,
|
|
20
|
+
icon: FileBookmark,
|
|
21
|
+
iconColor: GrayWhite
|
|
22
|
+
},
|
|
23
|
+
'file-box-app': {
|
|
24
|
+
backgroundColor: SurfaceBadgeBoxappsSurface,
|
|
25
|
+
icon: BoxApps,
|
|
26
|
+
iconColor: GrayWhite
|
|
27
|
+
},
|
|
28
|
+
'file-boxnote': {
|
|
29
|
+
backgroundColor: SurfaceBadgeBoxnoteSurface,
|
|
30
|
+
icon: FileBoxNote,
|
|
31
|
+
iconColor: Gray100
|
|
32
|
+
},
|
|
33
|
+
'file-canvas': {
|
|
34
|
+
backgroundColor: SurfaceBadgeCanvasSurface,
|
|
35
|
+
icon: FileCanvas,
|
|
36
|
+
iconColor: GrayWhite
|
|
37
|
+
},
|
|
38
|
+
'file-code': {
|
|
39
|
+
backgroundColor: SurfaceBadgeCodeSurface,
|
|
40
|
+
icon: Code,
|
|
41
|
+
iconColor: GrayWhite
|
|
42
|
+
},
|
|
43
|
+
'file-default': {
|
|
44
|
+
backgroundColor: SurfaceBadgeDefaultSurface,
|
|
45
|
+
icon: FileDefault,
|
|
16
46
|
iconColor: GrayWhite
|
|
17
47
|
},
|
|
18
48
|
'file-docs': {
|
|
@@ -20,19 +50,44 @@ const badgeVariantToIconProps = {
|
|
|
20
50
|
icon: FileDocs,
|
|
21
51
|
iconColor: GrayWhite
|
|
22
52
|
},
|
|
23
|
-
'file-
|
|
24
|
-
backgroundColor:
|
|
25
|
-
icon:
|
|
53
|
+
'file-drawing': {
|
|
54
|
+
backgroundColor: SurfaceBadgeDrawingSurface,
|
|
55
|
+
icon: FileDrawing,
|
|
56
|
+
iconColor: GrayWhite
|
|
57
|
+
},
|
|
58
|
+
'file-excel': {
|
|
59
|
+
backgroundColor: SurfaceBadgeExcelSurface,
|
|
60
|
+
icon: FileExcel,
|
|
26
61
|
iconColor: GrayWhite
|
|
27
62
|
},
|
|
63
|
+
'file-hub': {
|
|
64
|
+
backgroundColor: SurfaceBadgeHubsSurface,
|
|
65
|
+
icon: Hubs,
|
|
66
|
+
iconColor: GrayWhite
|
|
67
|
+
},
|
|
68
|
+
'file-illustrator': {
|
|
69
|
+
backgroundColor: SurfaceBadgeIllustratorSurface,
|
|
70
|
+
icon: FileIllustrator,
|
|
71
|
+
iconColor: IconIconIllustrator
|
|
72
|
+
},
|
|
28
73
|
'file-image': {
|
|
29
74
|
backgroundColor: SurfaceBadgeImageSurface,
|
|
30
75
|
icon: FileImage,
|
|
31
76
|
iconColor: GrayWhite
|
|
32
77
|
},
|
|
33
|
-
'file-
|
|
34
|
-
backgroundColor:
|
|
35
|
-
icon:
|
|
78
|
+
'file-indesign': {
|
|
79
|
+
backgroundColor: SurfaceBadgeIndesignSurface,
|
|
80
|
+
icon: FileIndesign,
|
|
81
|
+
iconColor: IconIconIndesign
|
|
82
|
+
},
|
|
83
|
+
'file-keynote': {
|
|
84
|
+
backgroundColor: SurfaceBadgeKeynoteSurface,
|
|
85
|
+
icon: FileKeynote,
|
|
86
|
+
iconColor: GrayWhite
|
|
87
|
+
},
|
|
88
|
+
'file-numbers': {
|
|
89
|
+
backgroundColor: SurfaceBadgeNumbersSurface,
|
|
90
|
+
icon: FileNumbers,
|
|
36
91
|
iconColor: GrayWhite
|
|
37
92
|
},
|
|
38
93
|
'file-pages': {
|
|
@@ -40,21 +95,71 @@ const badgeVariantToIconProps = {
|
|
|
40
95
|
icon: FilePages,
|
|
41
96
|
iconColor: GrayWhite
|
|
42
97
|
},
|
|
43
|
-
'file-
|
|
44
|
-
backgroundColor:
|
|
45
|
-
icon:
|
|
98
|
+
'file-pdf': {
|
|
99
|
+
backgroundColor: SurfaceBadgePdfSurface,
|
|
100
|
+
icon: FilePdf,
|
|
46
101
|
iconColor: GrayWhite
|
|
47
102
|
},
|
|
48
|
-
'file-
|
|
49
|
-
backgroundColor:
|
|
50
|
-
icon:
|
|
51
|
-
iconColor:
|
|
103
|
+
'file-photoshop': {
|
|
104
|
+
backgroundColor: SurfaceBadgePhotoshopSurface,
|
|
105
|
+
icon: FilePhotoshop,
|
|
106
|
+
iconColor: IconIconPhotoshop
|
|
107
|
+
},
|
|
108
|
+
'file-powerpoint': {
|
|
109
|
+
backgroundColor: SurfaceBadgePowerpointSurface,
|
|
110
|
+
icon: FilePowerpoint,
|
|
111
|
+
iconColor: GrayWhite
|
|
112
|
+
},
|
|
113
|
+
'file-presentation': {
|
|
114
|
+
backgroundColor: SurfaceBadgePresentationSurface,
|
|
115
|
+
icon: FilePresentation,
|
|
116
|
+
iconColor: GrayWhite
|
|
117
|
+
},
|
|
118
|
+
'file-sheets': {
|
|
119
|
+
backgroundColor: SurfaceBadgeSheetsSurface,
|
|
120
|
+
icon: FileSheets,
|
|
121
|
+
iconColor: GrayWhite
|
|
122
|
+
},
|
|
123
|
+
'file-slides': {
|
|
124
|
+
backgroundColor: SurfaceBadgeSlidesSurface,
|
|
125
|
+
icon: FileSlides,
|
|
126
|
+
iconColor: GrayBlack
|
|
127
|
+
},
|
|
128
|
+
'file-spreadsheet': {
|
|
129
|
+
backgroundColor: SurfaceBadgeSpreadsheetSurface,
|
|
130
|
+
icon: FileSpreadsheet,
|
|
131
|
+
iconColor: GrayWhite
|
|
132
|
+
},
|
|
133
|
+
'file-text': {
|
|
134
|
+
backgroundColor: SurfaceBadgeTextSurface,
|
|
135
|
+
icon: FileText,
|
|
136
|
+
iconColor: GrayWhite
|
|
137
|
+
},
|
|
138
|
+
'file-three-d': {
|
|
139
|
+
backgroundColor: SurfaceBadgeThreeDSurface,
|
|
140
|
+
icon: FileThreeD,
|
|
141
|
+
iconColor: GrayWhite
|
|
142
|
+
},
|
|
143
|
+
'file-vector': {
|
|
144
|
+
backgroundColor: SurfaceBadgeVectorSurface,
|
|
145
|
+
icon: FileVector,
|
|
146
|
+
iconColor: GrayWhite
|
|
52
147
|
},
|
|
53
148
|
'file-video': {
|
|
54
149
|
backgroundColor: SurfaceBadgeVideoSurface,
|
|
55
150
|
icon: FileVideo,
|
|
56
151
|
iconColor: GrayWhite
|
|
57
152
|
},
|
|
153
|
+
'file-word': {
|
|
154
|
+
backgroundColor: SurfaceBadgeWordSurface,
|
|
155
|
+
icon: FileWord,
|
|
156
|
+
iconColor: GrayWhite
|
|
157
|
+
},
|
|
158
|
+
'file-zip': {
|
|
159
|
+
backgroundColor: SurfaceBadgeZipSurface,
|
|
160
|
+
icon: FileZip,
|
|
161
|
+
iconColor: GrayWhite
|
|
162
|
+
},
|
|
58
163
|
'folder-external': {
|
|
59
164
|
backgroundColor: SurfaceBadgeFolderexternalSurface,
|
|
60
165
|
icon: FolderExternal,
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -5011,7 +5011,69 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5011
5011
|
background:none;
|
|
5012
5012
|
}
|
|
5013
5013
|
|
|
5014
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5014
|
+
.bp_base_text_input_module_textInputContainerOuter--61258[data-modern=false]{
|
|
5015
|
+
--text-input-border-width:var(--border-1);
|
|
5016
|
+
--text-input-border-width-focused:var(--border-2);
|
|
5017
|
+
--text-input-border-width-error:var(--border-2);
|
|
5018
|
+
--text-input-padding-x:var(--space-3);
|
|
5019
|
+
--text-input-icon-padding:var(--space-2);
|
|
5020
|
+
--text-input-padding-x-focused:calc(var(--text-input-padding-x) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
5021
|
+
--text-input-padding-x-error:calc(var(--text-input-padding-x) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
5022
|
+
--text-input-inline-error-subtext-block-margin:var(--space-2);
|
|
5023
|
+
--text-input-row-gap:var(--space-2);
|
|
5024
|
+
--text-input-label-color:var(--text-text-on-light);
|
|
5025
|
+
--text-input-color:var(--text-text-on-light);
|
|
5026
|
+
--text-input-background:var(--surface-input-surface);
|
|
5027
|
+
--text-input-border-color:var(--border-input-border);
|
|
5028
|
+
--text-input-border-radius:var(--radius-2);
|
|
5029
|
+
--text-input-box-shadow:var(--innershadow-1);
|
|
5030
|
+
--text-input-border-color-focus:var(--border-input-border-focus);
|
|
5031
|
+
--text-input-placeholder-color:var(--text-text-on-light-secondary);
|
|
5032
|
+
--text-input-error-background:var(--surface-input-surface-error);
|
|
5033
|
+
--text-input-error-border-color:var(--border-input-border-error);
|
|
5034
|
+
--text-input-read-only-color:var(--text-text-on-light-secondary);
|
|
5035
|
+
--text-input-read-only-border-color:var(--border-collapsible-border);
|
|
5036
|
+
--text-input-disabled-color:var(--text-text-on-light);
|
|
5037
|
+
--text-input-disabled-background:var(--surface-input-surface);
|
|
5038
|
+
--text-input-disabled-border-color:var(--border-input-border);
|
|
5039
|
+
--text-input-focused-background:var(--surface-input-surface-focus);
|
|
5040
|
+
--text-input-focused-border-color:var(--border-input-border-focus);
|
|
5041
|
+
--text-input-hover-background:var(--surface-input-surface-hover);
|
|
5042
|
+
--text-input-hover-border-color:var(--border-input-border-hover);
|
|
5043
|
+
}
|
|
5044
|
+
|
|
5045
|
+
.bp_base_text_input_module_textInputContainerOuter--61258[data-modern=true]{
|
|
5046
|
+
--text-input-border-width:var(--bp-border-01);
|
|
5047
|
+
--text-input-border-width-focused:var(--bp-border-02);
|
|
5048
|
+
--text-input-border-width-error:var(--bp-border-02);
|
|
5049
|
+
--text-input-padding-x:var(--bp-space-030);
|
|
5050
|
+
--text-input-icon-padding:var(--bp-space-020);
|
|
5051
|
+
--text-input-padding-x-focused:calc(var(--text-input-padding-x) - var(--text-input-border-width-focused) + var(--text-input-border-width));
|
|
5052
|
+
--text-input-padding-x-error:calc(var(--text-input-padding-x) - var(--text-input-border-width-error) + var(--text-input-border-width));
|
|
5053
|
+
--text-input-inline-error-subtext-block-margin:var(--bp-space-020);
|
|
5054
|
+
--text-input-row-gap:var(--bp-space-020);
|
|
5055
|
+
--text-input-label-color:var(--bp-text-text-on-light);
|
|
5056
|
+
--text-input-color:var(--bp-text-text-on-light);
|
|
5057
|
+
--text-input-background:var(--bp-surface-input-surface);
|
|
5058
|
+
--text-input-border-color:var(--bp-border-input-border);
|
|
5059
|
+
--text-input-border-radius:var(--bp-radius-06);
|
|
5060
|
+
--text-input-box-shadow:var(--innershadow-1);
|
|
5061
|
+
--text-input-border-color-focus:var(--bp-border-input-border-focus);
|
|
5062
|
+
--text-input-placeholder-color:var(--bp-text-text-on-light-secondary);
|
|
5063
|
+
--text-input-error-background:var(--bp-surface-input-surface-error);
|
|
5064
|
+
--text-input-error-border-color:var(--bp-border-input-border-error);
|
|
5065
|
+
--text-input-read-only-color:var(--bp-text-text-on-light-secondary);
|
|
5066
|
+
--text-input-read-only-border-color:var(--bp-border-collapsible-border);
|
|
5067
|
+
--text-input-disabled-color:var(--bp-text-text-on-light);
|
|
5068
|
+
--text-input-disabled-background:var(--bp-surface-input-surface);
|
|
5069
|
+
--text-input-disabled-border-color:var(--bp-border-input-border);
|
|
5070
|
+
--text-input-focused-background:var(--bp-surface-input-surface-focus);
|
|
5071
|
+
--text-input-focused-border-color:var(--bp-border-input-border-focus);
|
|
5072
|
+
--text-input-hover-background:var(--bp-surface-input-surface-hover);
|
|
5073
|
+
--text-input-hover-border-color:var(--bp-border-input-border-hover);
|
|
5074
|
+
}
|
|
5075
|
+
|
|
5076
|
+
.bp_base_text_input_module_textInputContainerOuter--61258{
|
|
5015
5077
|
--disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
|
|
5016
5078
|
display:flex;
|
|
5017
5079
|
flex-direction:column;
|
|
@@ -5024,8 +5086,8 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5024
5086
|
text-decoration:var(--body-default-text-decoration);
|
|
5025
5087
|
text-transform:var(--body-default-text-case);
|
|
5026
5088
|
}
|
|
5027
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5028
|
-
color:var(--text-
|
|
5089
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_label--61258{
|
|
5090
|
+
color:var(--text-input-label-color);
|
|
5029
5091
|
flex:0 0 fit-content;
|
|
5030
5092
|
font-family:var(--body-default-bold-font-family);
|
|
5031
5093
|
font-size:var(--body-default-bold-font-size);
|
|
@@ -5038,21 +5100,21 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5038
5100
|
width:-moz-fit-content;
|
|
5039
5101
|
width:fit-content;
|
|
5040
5102
|
}
|
|
5041
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5042
|
-
margin-block-end:var(--
|
|
5103
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_label--61258:not(.bp_base_text_input_module_hidden--61258){
|
|
5104
|
+
margin-block-end:var(--text-input-row-gap);
|
|
5043
5105
|
}
|
|
5044
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5106
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258{
|
|
5045
5107
|
display:flex;
|
|
5046
5108
|
height:var(--size-10);
|
|
5047
5109
|
position:relative;
|
|
5048
5110
|
}
|
|
5049
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5050
|
-
background:var(--
|
|
5051
|
-
border:var(--border-
|
|
5052
|
-
border-radius:var(--radius
|
|
5053
|
-
box-shadow:var(--
|
|
5111
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258{
|
|
5112
|
+
background:var(--text-input-background);
|
|
5113
|
+
border:var(--text-input-border-width) solid var(--text-input-border-color);
|
|
5114
|
+
border-radius:var(--text-input-border-radius);
|
|
5115
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5054
5116
|
box-sizing:border-box;
|
|
5055
|
-
color:var(--text-
|
|
5117
|
+
color:var(--text-input-color);
|
|
5056
5118
|
font-family:var(--body-default-font-family);
|
|
5057
5119
|
font-size:var(--body-default-font-size);
|
|
5058
5120
|
font-weight:var(--body-default-font-weight);
|
|
@@ -5060,81 +5122,84 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
|
|
|
5060
5122
|
letter-spacing:var(--body-default-letter-spacing);
|
|
5061
5123
|
line-height:var(--body-default-line-height);
|
|
5062
5124
|
padding-block:0;
|
|
5063
|
-
padding-inline:var(--
|
|
5125
|
+
padding-inline:var(--text-input-padding-x);
|
|
5064
5126
|
-webkit-text-decoration:var(--body-default-text-decoration);
|
|
5065
5127
|
text-decoration:var(--body-default-text-decoration);
|
|
5066
5128
|
text-transform:var(--body-default-text-case);
|
|
5067
5129
|
width:100%;
|
|
5068
5130
|
}
|
|
5069
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5070
|
-
box-shadow:var(--
|
|
5131
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:hover{
|
|
5132
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5071
5133
|
}
|
|
5072
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5073
|
-
color:var(--text-
|
|
5134
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258::placeholder,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258::placeholder,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258::placeholder{
|
|
5135
|
+
color:var(--text-input-placeholder-color);
|
|
5074
5136
|
opacity:1;
|
|
5075
5137
|
}
|
|
5076
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5077
|
-
background:var(--
|
|
5078
|
-
border:var(--border-
|
|
5138
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258{
|
|
5139
|
+
background:var(--text-input-error-background);
|
|
5140
|
+
border:var(--text-input-border-width-error) solid var(--text-input-error-border-color);
|
|
5079
5141
|
outline:0;
|
|
5080
|
-
padding-inline-start:
|
|
5142
|
+
padding-inline-start:var(--text-input-padding-x-error);
|
|
5081
5143
|
}
|
|
5082
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5083
|
-
border-color:var(--
|
|
5084
|
-
box-shadow:var(--
|
|
5085
|
-
color:var(--text-
|
|
5144
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258{
|
|
5145
|
+
border-color:var(--text-input-read-only-border-color);
|
|
5146
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5147
|
+
color:var(--text-input-read-only-color);
|
|
5086
5148
|
}
|
|
5087
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5088
|
-
border:var(--border-
|
|
5149
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:focus-visible{
|
|
5150
|
+
border:var(--text-input-border-width-focused) solid var(--text-input-border-color-focus);
|
|
5089
5151
|
}
|
|
5090
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5152
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258.bp_base_text_input_module_readOnly--61258:hover{
|
|
5091
5153
|
cursor:default;
|
|
5092
5154
|
}
|
|
5093
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5094
|
-
background:var(--
|
|
5095
|
-
border-color:var(--
|
|
5096
|
-
box-shadow:var(--
|
|
5097
|
-
color:var(--text-
|
|
5155
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:disabled,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:disabled,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:disabled{
|
|
5156
|
+
background:var(--text-input-disabled-background);
|
|
5157
|
+
border-color:var(--text-input-disabled-border-color);
|
|
5158
|
+
box-shadow:var(--text-input-box-shadow);
|
|
5159
|
+
color:var(--text-input-disabled-color);
|
|
5098
5160
|
}
|
|
5099
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5100
|
-
border-color:var(--
|
|
5161
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:disabled:hover{
|
|
5162
|
+
border-color:var(--text-input-border-color);
|
|
5101
5163
|
}
|
|
5102
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5103
|
-
background:var(--
|
|
5104
|
-
border:var(--border-
|
|
5164
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:focus-visible,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:focus-visible{
|
|
5165
|
+
background:var(--text-input-focused-background);
|
|
5166
|
+
border:var(--text-input-border-width-focused) solid var(--text-input-focused-border-color);
|
|
5105
5167
|
outline:0;
|
|
5106
|
-
padding-inline-start:
|
|
5168
|
+
padding-inline-start:var(--text-input-padding-x-focused);
|
|
5107
5169
|
}
|
|
5108
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5109
|
-
padding-inline-end:calc(var(--
|
|
5170
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258),.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258),.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:has(+ .bp_base_text_input_module_endIcon--61258){
|
|
5171
|
+
padding-inline-end:calc(var(--text-input-padding-x) + var(--end-icon-width) + var(--text-input-icon-padding));
|
|
5110
5172
|
}
|
|
5111
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5112
|
-
background:var(--
|
|
5113
|
-
border:var(--border-1) solid var(--
|
|
5173
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=number].bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 input[type=text].bp_base_text_input_module_textInput--61258:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--61258):hover{
|
|
5174
|
+
background:var(--text-input-hover-background);
|
|
5175
|
+
border:var(--border-1) solid var(--text-input-hover-border-color);
|
|
5114
5176
|
}
|
|
5115
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5116
|
-
left:calc(var(--
|
|
5177
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258{
|
|
5178
|
+
left:calc(var(--text-input-padding-x) + var(--text-input-border-width));
|
|
5117
5179
|
position:absolute;
|
|
5118
5180
|
top:50%;
|
|
5119
5181
|
transform:translateY(-50%);
|
|
5120
5182
|
}
|
|
5121
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5122
|
-
padding-inline-start:calc(var(--
|
|
5183
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258{
|
|
5184
|
+
padding-inline-start:calc(var(--text-input-padding-x) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5185
|
+
}
|
|
5186
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258:focus-visible{
|
|
5187
|
+
padding-inline-start:calc(var(--text-input-padding-x-focused) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5123
5188
|
}
|
|
5124
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5125
|
-
padding-inline-start:calc(var(--
|
|
5189
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_startIcon--61258 + input.bp_base_text_input_module_textInput--61258.bp_base_text_input_module_error--61258{
|
|
5190
|
+
padding-inline-start:calc(var(--text-input-padding-x-error) + var(--text-input-icon-padding) + var(--start-icon-width));
|
|
5126
5191
|
}
|
|
5127
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5192
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_textInputContainer--61258 .bp_base_text_input_module_endIcon--61258{
|
|
5128
5193
|
position:absolute;
|
|
5129
|
-
right:calc(var(--
|
|
5194
|
+
right:calc(var(--text-input-padding-x) + var(--text-input-border-width));
|
|
5130
5195
|
top:50%;
|
|
5131
5196
|
transform:translateY(-50%);
|
|
5132
5197
|
}
|
|
5133
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5198
|
+
.bp_base_text_input_module_textInputContainerOuter--61258.bp_base_text_input_module_disabled--61258{
|
|
5134
5199
|
opacity:var(--disabled-opacity);
|
|
5135
5200
|
}
|
|
5136
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
5137
|
-
margin-block-start:var(--
|
|
5201
|
+
.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_inlineError--61258,.bp_base_text_input_module_textInputContainerOuter--61258 .bp_base_text_input_module_subtext--61258{
|
|
5202
|
+
margin-block-start:var(--text-input-inline-error-subtext-block-margin);
|
|
5138
5203
|
}
|
|
5139
5204
|
.bp_chip_module_chip--96f83{
|
|
5140
5205
|
align-items:center;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { forwardRef, useState, useMemo, cloneElement } from 'react';
|
|
4
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
4
5
|
import { Text } from '../../text/text.js';
|
|
5
6
|
import { useLabelable } from '../../util-components/labelable/useLabelable.js';
|
|
6
7
|
import { useUniqueId } from '../../utils/useUniqueId.js';
|
|
@@ -63,11 +64,15 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
63
64
|
className: clsx(endIcon.props?.className, styles.endIcon)
|
|
64
65
|
}), [endIcon]);
|
|
65
66
|
const Label = useLabelable(label, inputId, required);
|
|
67
|
+
const {
|
|
68
|
+
enableModernizedComponents
|
|
69
|
+
} = useBlueprintModernization();
|
|
66
70
|
return jsxs("div", {
|
|
67
71
|
className: clsx(styles.textInputContainerOuter, {
|
|
68
72
|
[styles.disabled]: disabled,
|
|
69
73
|
[styles.error]: shouldMarkError
|
|
70
74
|
}, className),
|
|
75
|
+
"data-modern": enableModernizedComponents,
|
|
71
76
|
children: [jsx(Label, {
|
|
72
77
|
className: clsx([styles.label], {
|
|
73
78
|
[styles.hidden]: hideLabel
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--
|
|
2
|
+
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--61258","label":"bp_base_text_input_module_label--61258","hidden":"bp_base_text_input_module_hidden--61258","textInputContainer":"bp_base_text_input_module_textInputContainer--61258","textInput":"bp_base_text_input_module_textInput--61258","error":"bp_base_text_input_module_error--61258","readOnly":"bp_base_text_input_module_readOnly--61258","endIcon":"bp_base_text_input_module_endIcon--61258","startIcon":"bp_base_text_input_module_startIcon--61258","disabled":"bp_base_text_input_module_disabled--61258","inlineError":"bp_base_text_input_module_inlineError--61258","subtext":"bp_base_text_input_module_subtext--61258"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|