Skip to content

Commit df0d1e0

Browse files
janhasselkodiakhq[bot]
janhassel
and
kodiakhq[bot]
authored
feat(search): add support for expandable variant (#8101)
* feat(search): add support for expandable variant * test: update data-table snapshots * fix(data-table): update css selectors for search magnifier icon * refactor(search): extract expandable kind into own component * fix(expandable-search): fade placeholder * fix(expandable-search): move focusInput function inside effect) * fix(expandable-search): use icon-01 as fill color when collapsed Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 5355ab6 commit df0d1e0

File tree

11 files changed

+341
-80
lines changed

11 files changed

+341
-80
lines changed

‎packages/components/src/components/data-table/_data-table-action.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -80,15 +80,15 @@
8080
}
8181

8282
.#{$prefix}--toolbar-search-container-expandable
83-
.#{$prefix}--search-magnifier {
83+
.#{$prefix}--search-magnifier-icon {
8484
left: 0;
8585
width: $spacing-09;
8686
height: $spacing-09;
8787
padding: $spacing-05;
8888
}
8989

9090
.#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
91-
.#{$prefix}--search-magnifier {
91+
.#{$prefix}--search-magnifier-icon {
9292
background-color: $disabled-01;
9393
cursor: not-allowed;
9494
transition: background-color none;
@@ -153,11 +153,11 @@
153153
}
154154

155155
.#{$prefix}--toolbar-search-container-active
156-
.#{$prefix}--search-magnifier:focus,
156+
.#{$prefix}--search-magnifier-icon:focus,
157157
.#{$prefix}--toolbar-search-container-active
158-
.#{$prefix}--search-magnifier:active,
158+
.#{$prefix}--search-magnifier-icon:active,
159159
.#{$prefix}--toolbar-search-container-active
160-
.#{$prefix}--search-magnifier:hover {
160+
.#{$prefix}--search-magnifier-icon:hover {
161161
background-color: transparent;
162162
border: none;
163163
outline: none;
@@ -273,7 +273,7 @@
273273
}
274274

275275
.#{$prefix}--toolbar-search-container-persistent
276-
.#{$prefix}--search-magnifier {
276+
.#{$prefix}--search-magnifier-icon {
277277
left: $spacing-05;
278278
}
279279

@@ -465,9 +465,9 @@
465465
}
466466

467467
.#{$prefix}--toolbar-search-container-expandable
468-
.#{$prefix}--search-magnifier,
468+
.#{$prefix}--search-magnifier-icon,
469469
.#{$prefix}--toolbar-search-container-persistent
470-
.#{$prefix}--search-magnifier {
470+
.#{$prefix}--search-magnifier-icon {
471471
width: rem(32px);
472472
height: rem(32px);
473473
padding: $spacing-03;
@@ -513,18 +513,18 @@
513513
}
514514

515515
.#{$prefix}--toolbar-search-container-active
516-
.#{$prefix}--search-magnifier:focus,
516+
.#{$prefix}--search-magnifier-icon:focus,
517517
.#{$prefix}--toolbar-search-container-active
518-
.#{$prefix}--search-magnifier:active,
518+
.#{$prefix}--search-magnifier-icon:active,
519519
.#{$prefix}--toolbar-search-container-active
520-
.#{$prefix}--search-magnifier:hover {
520+
.#{$prefix}--search-magnifier-icon:hover {
521521
@include focus-outline('reset');
522522

523523
background-color: transparent;
524524
}
525525
}
526526

527-
.#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
527+
.#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
528528
background-color: transparent;
529529
}
530530

‎packages/components/src/components/search/_search.scss‎

Lines changed: 83 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -76,34 +76,40 @@
7676
}
7777

7878
// Small styles
79-
.#{$prefix}--search--sm .#{$prefix}--search-input {
79+
.#{$prefix}--search--sm .#{$prefix}--search-input,
80+
.#{$prefix}--search--sm.#{$prefix}--search--expandable.#{$prefix}--search--expanded
81+
.#{$prefix}--search-input {
8082
height: rem(32px);
8183
// 8px padding on either side of icon + 16px icon (32px)
8284
padding: 0 $spacing-07;
8385
}
8486

85-
.#{$prefix}--search--sm .#{$prefix}--search-magnifier {
87+
.#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon {
8688
left: rem(8px);
8789
}
8890

8991
// Large styles
90-
.#{$prefix}--search--lg .#{$prefix}--search-input {
92+
.#{$prefix}--search--lg .#{$prefix}--search-input,
93+
.#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
94+
.#{$prefix}--search-input {
9195
height: rem(40px);
9296
// 12px padding on either side of icon + 16px icon (40px)
9397
padding: 0 $spacing-08;
9498
}
9599

96-
.#{$prefix}--search--lg .#{$prefix}--search-magnifier {
100+
.#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon {
97101
left: rem(12px);
98102
}
99103

100-
.#{$prefix}--search--xl .#{$prefix}--search-input {
104+
.#{$prefix}--search--xl .#{$prefix}--search-input,
105+
.#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded
106+
.#{$prefix}--search-input {
101107
height: rem(48px);
102108
// 16px padding on either side of icon + 16px icon (48px)
103109
padding: 0 $spacing-09;
104110
}
105111

106-
.#{$prefix}--search-magnifier {
112+
.#{$prefix}--search-magnifier-icon {
107113
position: absolute;
108114
top: 50%;
109115
left: $spacing-05;
@@ -207,7 +213,9 @@
207213
}
208214
}
209215

210-
.#{$prefix}--search--disabled .#{$prefix}--search-close {
216+
.#{$prefix}--search--disabled .#{$prefix}--search-close,
217+
.#{$prefix}--search--disabled.#{$prefix}--search--expandable
218+
.#{$prefix}--search-magnifier {
211219
outline: none;
212220
cursor: not-allowed;
213221

@@ -238,26 +246,41 @@
238246

239247
.#{$prefix}--search--sm {
240248
.#{$prefix}--search-close,
241-
~ .#{$prefix}--search-button {
249+
~ .#{$prefix}--search-button,
250+
&.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
242251
width: rem(32px);
243252
height: rem(32px);
244253
}
254+
255+
&.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
256+
padding: 0 rem(32px);
257+
}
245258
}
246259

247260
.#{$prefix}--search--lg {
248261
.#{$prefix}--search-close,
249-
~ .#{$prefix}--search-button {
262+
~ .#{$prefix}--search-button,
263+
&.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
250264
width: rem(40px);
251265
height: rem(40px);
252266
}
267+
268+
&.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
269+
padding: 0 rem(40px);
270+
}
253271
}
254272

255273
.#{$prefix}--search--xl {
256274
.#{$prefix}--search-close,
257-
~ .#{$prefix}--search-button {
275+
~ .#{$prefix}--search-button,
276+
&.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
258277
width: rem(48px);
259278
height: rem(48px);
260279
}
280+
281+
&.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
282+
padding: 0 rem(48px);
283+
}
261284
}
262285

263286
.#{$prefix}--search-close--hidden {
@@ -276,6 +299,56 @@
276299
color: transparent;
277300
}
278301
}
302+
303+
.#{$prefix}--search--expandable .#{$prefix}--search-input {
304+
width: 0;
305+
padding: 0;
306+
transition-timing-function: motion(standard, productive);
307+
transition-duration: $duration--fast-01;
308+
transition-property: width, padding;
309+
310+
&::placeholder {
311+
position: relative;
312+
opacity: 0;
313+
transition-timing-function: motion(standard, productive);
314+
transition-duration: $duration--fast-01;
315+
transition-property: padding, opacity;
316+
}
317+
}
318+
319+
.#{$prefix}--search--expandable.#{$prefix}--search--expanded
320+
.#{$prefix}--search-input {
321+
width: 100%;
322+
323+
&::placeholder {
324+
position: relative;
325+
padding: 0;
326+
opacity: 1;
327+
}
328+
}
329+
330+
.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
331+
position: absolute;
332+
cursor: pointer;
333+
}
334+
335+
.#{$prefix}--search--expandable .#{$prefix}--search-magnifier:hover {
336+
background-color: $hover-ui;
337+
}
338+
339+
.#{$prefix}--search--expandable.#{$prefix}--search--expanded
340+
.#{$prefix}--search-magnifier {
341+
pointer-events: none;
342+
}
343+
344+
.#{$prefix}--search--expandable .#{$prefix}--search-magnifier-icon {
345+
fill: $icon-01;
346+
}
347+
348+
.#{$prefix}--search--expandable.#{$prefix}--search--expanded
349+
.#{$prefix}--search-magnifier-icon {
350+
fill: $icon-02;
351+
}
279352
}
280353

281354
@include exports('search') {

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4707,6 +4707,79 @@ Map {
47074707
},
47084708
},
47094709
},
4710+
"ExpandableSearch" => Object {
4711+
"propTypes": Object {
4712+
"className": Object {
4713+
"type": "string",
4714+
},
4715+
"closeButtonLabelText": Object {
4716+
"type": "string",
4717+
},
4718+
"defaultValue": Object {
4719+
"args": Array [
4720+
Array [
4721+
Object {
4722+
"type": "string",
4723+
},
4724+
Object {
4725+
"type": "number",
4726+
},
4727+
],
4728+
],
4729+
"type": "oneOfType",
4730+
},
4731+
"disabled": Object {
4732+
"type": "bool",
4733+
},
4734+
"id": Object {
4735+
"type": "string",
4736+
},
4737+
"labelText": Object {
4738+
"isRequired": true,
4739+
"type": "node",
4740+
},
4741+
"light": Object {
4742+
"type": "bool",
4743+
},
4744+
"onChange": Object {
4745+
"type": "func",
4746+
},
4747+
"onKeyDown": Object {
4748+
"type": "func",
4749+
},
4750+
"placeHolderText": [Function],
4751+
"placeholder": Object {
4752+
"type": "string",
4753+
},
4754+
"size": Object {
4755+
"args": Array [
4756+
Array [
4757+
"sm",
4758+
"lg",
4759+
"xl",
4760+
],
4761+
],
4762+
"type": "oneOf",
4763+
},
4764+
"small": [Function],
4765+
"type": Object {
4766+
"type": "string",
4767+
},
4768+
"value": Object {
4769+
"args": Array [
4770+
Array [
4771+
Object {
4772+
"type": "string",
4773+
},
4774+
Object {
4775+
"type": "number",
4776+
},
4777+
],
4778+
],
4779+
"type": "oneOfType",
4780+
},
4781+
},
4782+
},
47104783
"SecondaryButton" => Object {},
47114784
"Select" => Object {
47124785
"$$typeof": Symbol(react.forward_ref),

‎packages/react/src/__tests__/index-test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ describe('Carbon Components React', () => {
4747
"DropdownSkeleton",
4848
"ErrorBoundary",
4949
"ErrorBoundaryContext",
50+
"ExpandableSearch",
5051
"ExpandableTile",
5152
"FileUploader",
5253
"FileUploaderButton",

0 commit comments

Comments
 (0)