Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(search): add support for expandable variant #8101

Merged
merged 10 commits into from
Apr 10, 2021
Merged

feat(search): add support for expandable variant #8101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dd4a36e
feat(search): add support for expandable variant
janhassel Mar 16, 2021
08e322e
test: update data-table snapshots
janhassel Mar 16, 2021
4fc46a3
fix(data-table): update css selectors for search magnifier icon
janhassel Mar 23, 2021
28716d1
refactor(search): extract expandable kind into own component
janhassel Mar 25, 2021
93ac990
Merge branch 'main' into expandable-search
janhassel Mar 25, 2021
2f9e366
Merge branch 'main' into expandable-search
janhassel Apr 6, 2021
1bac603
fix(expandable-search): fade placeholder
janhassel Apr 7, 2021
46719df
fix(expandable-search): move focusInput function inside effect)
janhassel Apr 9, 2021
8b7adcc
fix(expandable-search): use icon-01 as fill color when collapsed
janhassel Apr 9, 2021
f442072
Merge branch 'main' into expandable-search
kodiakhq[bot] Apr 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions packages/components/src/components/data-table/_data-table-action.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,15 @@
}

.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search-magnifier {
.#{$prefix}--search-magnifier-icon {
left: 0;
width: $spacing-09;
height: $spacing-09;
padding: $spacing-05;
}

.#{$prefix}--toolbar-search-container-expandable.#{$prefix}--search--disabled
.#{$prefix}--search-magnifier {
.#{$prefix}--search-magnifier-icon {
background-color: $disabled-01;
cursor: not-allowed;
transition: background-color none;
Expand Down Expand Up @@ -153,11 +153,11 @@
}

.#{$prefix}--toolbar-search-container-active
.#{$prefix}--search-magnifier:focus,
.#{$prefix}--search-magnifier-icon:focus,
.#{$prefix}--toolbar-search-container-active
.#{$prefix}--search-magnifier:active,
.#{$prefix}--search-magnifier-icon:active,
.#{$prefix}--toolbar-search-container-active
.#{$prefix}--search-magnifier:hover {
.#{$prefix}--search-magnifier-icon:hover {
background-color: transparent;
border: none;
outline: none;
Expand Down Expand Up @@ -273,7 +273,7 @@
}

.#{$prefix}--toolbar-search-container-persistent
.#{$prefix}--search-magnifier {
.#{$prefix}--search-magnifier-icon {
left: $spacing-05;
}

Expand Down Expand Up @@ -465,9 +465,9 @@
}

.#{$prefix}--toolbar-search-container-expandable
.#{$prefix}--search-magnifier,
.#{$prefix}--search-magnifier-icon,
.#{$prefix}--toolbar-search-container-persistent
.#{$prefix}--search-magnifier {
.#{$prefix}--search-magnifier-icon {
width: rem(32px);
height: rem(32px);
padding: $spacing-03;
Expand Down Expand Up @@ -513,18 +513,18 @@
}

.#{$prefix}--toolbar-search-container-active
.#{$prefix}--search-magnifier:focus,
.#{$prefix}--search-magnifier-icon:focus,
.#{$prefix}--toolbar-search-container-active
.#{$prefix}--search-magnifier:active,
.#{$prefix}--search-magnifier-icon:active,
.#{$prefix}--toolbar-search-container-active
.#{$prefix}--search-magnifier:hover {
.#{$prefix}--search-magnifier-icon:hover {
@include focus-outline('reset');

background-color: transparent;
}
}

.#{$prefix}--search--disabled .#{$prefix}--search-magnifier:hover {
.#{$prefix}--search--disabled .#{$prefix}--search-magnifier-icon:hover {
background-color: transparent;
}

Expand Down
93 changes: 83 additions & 10 deletions packages/components/src/components/search/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,34 +76,40 @@
}

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

.#{$prefix}--search--sm .#{$prefix}--search-magnifier {
.#{$prefix}--search--sm .#{$prefix}--search-magnifier-icon {
left: rem(8px);
}

// Large styles
.#{$prefix}--search--lg .#{$prefix}--search-input {
.#{$prefix}--search--lg .#{$prefix}--search-input,
.#{$prefix}--search--lg.#{$prefix}--search--expandable.#{$prefix}--search--expanded
.#{$prefix}--search-input {
height: rem(40px);
// 12px padding on either side of icon + 16px icon (40px)
padding: 0 $spacing-08;
}

.#{$prefix}--search--lg .#{$prefix}--search-magnifier {
.#{$prefix}--search--lg .#{$prefix}--search-magnifier-icon {
left: rem(12px);
}

.#{$prefix}--search--xl .#{$prefix}--search-input {
.#{$prefix}--search--xl .#{$prefix}--search-input,
.#{$prefix}--search--xl.#{$prefix}--search--expandable.#{$prefix}--search--expanded
.#{$prefix}--search-input {
height: rem(48px);
// 16px padding on either side of icon + 16px icon (48px)
padding: 0 $spacing-09;
}

.#{$prefix}--search-magnifier {
.#{$prefix}--search-magnifier-icon {
position: absolute;
top: 50%;
left: $spacing-05;
Expand Down Expand Up @@ -207,7 +213,9 @@
}
}

.#{$prefix}--search--disabled .#{$prefix}--search-close {
.#{$prefix}--search--disabled .#{$prefix}--search-close,
.#{$prefix}--search--disabled.#{$prefix}--search--expandable
.#{$prefix}--search-magnifier {
outline: none;
cursor: not-allowed;

Expand Down Expand Up @@ -238,26 +246,41 @@

.#{$prefix}--search--sm {
.#{$prefix}--search-close,
~ .#{$prefix}--search-button {
~ .#{$prefix}--search-button,
&.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
width: rem(32px);
height: rem(32px);
}

&.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
padding: 0 rem(32px);
}
}

.#{$prefix}--search--lg {
.#{$prefix}--search-close,
~ .#{$prefix}--search-button {
~ .#{$prefix}--search-button,
&.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
width: rem(40px);
height: rem(40px);
}

&.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
padding: 0 rem(40px);
}
}

.#{$prefix}--search--xl {
.#{$prefix}--search-close,
~ .#{$prefix}--search-button {
~ .#{$prefix}--search-button,
&.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
width: rem(48px);
height: rem(48px);
}

&.#{$prefix}--search--expandable .#{$prefix}--search-input::placeholder {
padding: 0 rem(48px);
}
}

.#{$prefix}--search-close--hidden {
Expand All @@ -276,6 +299,56 @@
color: transparent;
}
}

.#{$prefix}--search--expandable .#{$prefix}--search-input {
width: 0;
padding: 0;
transition-timing-function: motion(standard, productive);
transition-duration: $duration--fast-01;
transition-property: width, padding;
Comment on lines +304 to +308
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, so it looks like this will inherently support animating leftwards, rightwards, or both from the center 👍


&::placeholder {
position: relative;
opacity: 0;
transition-timing-function: motion(standard, productive);
transition-duration: $duration--fast-01;
transition-property: padding, opacity;
}
}

.#{$prefix}--search--expandable.#{$prefix}--search--expanded
.#{$prefix}--search-input {
width: 100%;

&::placeholder {
position: relative;
padding: 0;
opacity: 1;
}
}

.#{$prefix}--search--expandable .#{$prefix}--search-magnifier {
position: absolute;
cursor: pointer;
}

.#{$prefix}--search--expandable .#{$prefix}--search-magnifier:hover {
background-color: $hover-ui;
}

.#{$prefix}--search--expandable.#{$prefix}--search--expanded
.#{$prefix}--search-magnifier {
pointer-events: none;
}

.#{$prefix}--search--expandable .#{$prefix}--search-magnifier-icon {
fill: $icon-01;
}

.#{$prefix}--search--expandable.#{$prefix}--search--expanded
.#{$prefix}--search-magnifier-icon {
fill: $icon-02;
}
}

@include exports('search') {
Expand Down
73 changes: 73 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4707,6 +4707,79 @@ Map {
},
},
},
"ExpandableSearch" => Object {
"propTypes": Object {
"className": Object {
"type": "string",
},
"closeButtonLabelText": Object {
"type": "string",
},
"defaultValue": Object {
"args": Array [
Array [
Object {
"type": "string",
},
Object {
"type": "number",
},
],
],
"type": "oneOfType",
},
"disabled": Object {
"type": "bool",
},
"id": Object {
"type": "string",
},
"labelText": Object {
"isRequired": true,
"type": "node",
},
"light": Object {
"type": "bool",
},
"onChange": Object {
"type": "func",
},
"onKeyDown": Object {
"type": "func",
},
"placeHolderText": [Function],
"placeholder": Object {
"type": "string",
},
"size": Object {
"args": Array [
Array [
"sm",
"lg",
"xl",
],
],
"type": "oneOf",
},
"small": [Function],
"type": Object {
"type": "string",
},
"value": Object {
"args": Array [
Array [
Object {
"type": "string",
},
Object {
"type": "number",
},
],
],
"type": "oneOfType",
},
},
},
"SecondaryButton" => Object {},
"Select" => Object {
"$$typeof": Symbol(react.forward_ref),
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/__tests__/index-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ describe('Carbon Components React', () => {
"DropdownSkeleton",
"ErrorBoundary",
"ErrorBoundaryContext",
"ExpandableSearch",
"ExpandableTile",
"FileUploader",
"FileUploaderButton",
Expand Down
Loading