Skip to content

Commit 3473f8b

Browse files
MartinCupelaMartinCupela
authored
feat: add experimental Search component styles (#323)
1 parent 56e8b51 commit 3473f8b

File tree

7 files changed

+376
-1
lines changed

7 files changed

+376
-1
lines changed

‎src/v2/styles/ChannelSearch/ChannelSearch-layout.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
flex-direction: column;
88
justify-content: center;
99

10+
&.str-chat__channel-search--active.str-chat__channel-search--inline,
1011
&.str-chat__channel-search--with-results.str-chat__channel-search--inline {
1112
height: 100%;
1213
}

‎src/v2/styles/Poll/Poll-layout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -332,8 +332,8 @@
332332
}
333333

334334
.str-chat__poll-creation-dialog {
335+
height: 100%;
335336
width: 100%;
336-
height: 700px;
337337
display: flex;
338338
flex-direction: column;
339339

‎src/v2/styles/Search/Search-layout.scss‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
@use '../utils';
2+
3+
.str-chat__search {
4+
position: relative;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: center;
8+
9+
&.str-chat__search--active {
10+
flex: 1;
11+
max-height: 100%;
12+
}
13+
14+
.str-chat__search-bar {
15+
@include utils.flex-row-center;
16+
padding: var(--str-chat__spacing-2_5) var(--str-chat__spacing-2);
17+
gap: 0.25rem;
18+
19+
.str-chat__search-bar-button {
20+
@include utils.button-reset;
21+
padding: var(--str-chat__spacing-1);
22+
cursor: pointer;
23+
}
24+
25+
.str-chat__search-input--wrapper {
26+
display: flex;
27+
align-items: center;
28+
flex: 1;
29+
padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2);
30+
min-width: 0;
31+
32+
.str-chat__search-input--icon {
33+
height: 20px;
34+
width: 20px;
35+
margin-right: 0.5rem;
36+
}
37+
38+
.str-chat__search-input--clear-button {
39+
@include utils.button-reset;
40+
cursor: pointer;
41+
padding: 0;
42+
43+
&:disabled {
44+
cursor: default;
45+
}
46+
47+
.str-chat__search-input--clear-button-icon {
48+
height: 20px;
49+
width: 20px;
50+
mask-size: 20px;
51+
-webkit-mask-size: 20px;
52+
}
53+
}
54+
55+
input {
56+
flex: 1;
57+
min-width: 0;
58+
}
59+
}
60+
}
61+
62+
.str-chat__search-results {
63+
flex: 1;
64+
display: flex;
65+
flex-direction: column;
66+
min-height: 0;
67+
68+
.str-chat__search-results-header {
69+
width: 100%;
70+
71+
button {
72+
@include utils.button-reset();
73+
cursor: pointer;
74+
}
75+
76+
.str-chat__search-results-header__filter-source-buttons {
77+
display: flex;
78+
flex-wrap: wrap;
79+
gap: 0.5rem;
80+
padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2_5);
81+
width: 100%;
82+
83+
.str-chat__search-results-header__filter-source-button {
84+
padding: 0.5rem 0.75rem;
85+
border-radius: var(--str-chat__border-radius-circle);
86+
background-color: var(--str-chat__tertiary-surface-color);
87+
}
88+
89+
.str-chat__search-results-header__filter-source-button--active {
90+
background-color: var(--str-chat__surface-color);
91+
color: var(--str-chat__text-color);
92+
font-weight: 500;
93+
}
94+
}
95+
}
96+
97+
.str-chat__search-results-presearch,
98+
.str-chat__search-source-results-empty {
99+
width: 100%;
100+
display: flex;
101+
justify-content: center;
102+
align-items: center;
103+
padding: 1.25rem;
104+
}
105+
106+
.str-chat__search-source-results {
107+
flex: 1;
108+
display: flex;
109+
flex-direction: column;
110+
min-height: 0;
111+
112+
.str-chat__search-source-result-list {
113+
flex: 1;
114+
display: flex;
115+
flex-direction: column;
116+
min-height: 0;
117+
118+
.str-chat__infinite-scroll-paginator__content {
119+
display: flex;
120+
flex-direction: column;
121+
}
122+
123+
.str-chat__search-result {
124+
display: flex;
125+
align-items: center;
126+
width: 100%;
127+
column-gap: var(--str-chat__spacing-2);
128+
padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
129+
130+
.search__result-text,
131+
.str-chat__search-result--display-name {
132+
@include utils.ellipsis-text;
133+
@include utils.prevent-glitch-text-overflow;
134+
}
135+
}
136+
137+
.str-chat__search-source-result-list__footer {
138+
height: 4rem;
139+
width: 100%;
140+
display: flex;
141+
justify-content: center;
142+
align-items: center;
143+
flex-direction: column;
144+
}
145+
}
146+
}
147+
}
148+
}

‎src/v2/styles/Search/Search-theme.scss‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
@use '../utils';
2+
3+
/* Only available in React SDK. */
4+
.str-chat {
5+
/* The text/icon color of the component */
6+
--str-chat__search-input-color: var(--str-chat__text-color);
7+
8+
/* The text/icon color of the component */
9+
--str-chat__search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
10+
11+
/* The text/icon color of the component */
12+
--str-chat__search-input-icon-color: var(--str-chat__text-low-emphasis-color);
13+
14+
/* Top border of the component */
15+
--str-chat__search-input-border-block-start: none;
16+
17+
/* Bottom border of the component */
18+
--str-chat__search-input-border-block-end: none;
19+
20+
/* Left (right in RTL layout) borhe component */
21+
--str-chat__search-input-border-inline-start: none;
22+
23+
/* Right (left in RTL layout) borhe component */
24+
--str-chat__search-input-border-inline-end: none;
25+
26+
/* The border radius used for the borders of the component */
27+
--str-chat__search-input-wrapper-border-radius: var(--str-chat__border-radius-circle);
28+
29+
/* The background color of the component */
30+
--str-chat__search-input-wrapper-background-color: transparent;
31+
32+
/* Top border of the component */
33+
--str-chat__search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
34+
solid;
35+
36+
/* Bottom border of the component */
37+
--str-chat__search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
38+
solid;
39+
40+
/* Left (right in RTL layout) border of the component */
41+
--str-chat__search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
42+
solid;
43+
44+
/* Right (left in RTL layout) border of the component */
45+
--str-chat__search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px
46+
solid;
47+
48+
/* The border radius used for the borders of the component */
49+
--str-chat__search-input-wrapper-active-border-radius: var(--str-chat__border-radius-circle);
50+
51+
/* The background color of the component */
52+
--str-chat__search-input-wrapper-active-background-color: transparent;
53+
54+
/* Top border of the component */
55+
--str-chat__search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
56+
1px solid;
57+
58+
/* Bottom border of the component */
59+
--str-chat__search-input-wrapper-active-border-block-end: var(--str-chat__primary-color)
60+
1px solid;
61+
62+
/* Left (right in RTL layout) border of the component */
63+
--str-chat__search-input-wrapper-active-border-inline-start: var(
64+
--str-chat__primary-color
65+
)
66+
1px solid;
67+
68+
/* Right (left in RTL layout) border of the component */
69+
--str-chat__search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
70+
1px solid;
71+
72+
/* The background applied to channel search result */
73+
--str-chat__search-result-background-color: transparent;
74+
75+
/* Top border of the component */
76+
--str-chat__search-result-border-block-start: none;
77+
78+
/* Bottom border of the component */
79+
--str-chat__search-result-border-block-end: none;
80+
81+
/* Left (right in RTL layout) border of the component */
82+
--str-chat__search-result-border-inline-start: none;
83+
84+
/* Right (left in RTL layout) border of the component */
85+
--str-chat__search-result-border-inline-end: none;
86+
87+
/* Background color used for the search result hover / focused state */
88+
--str-chat__search-result-hover-background-color: var(
89+
--str-chat__secondary-surface-color
90+
);
91+
92+
--str-chat__search-result-list-color: var(--str-chat__text-color);
93+
94+
--str-chat__search-result-list-background-color: var(--str-chat__secondary-background-color);
95+
96+
/* Top border of the component */
97+
--str-chat__search-result-list-border-block-start: none;
98+
99+
/* Bottom border of the component */
100+
--str-chat__search-result-list-border-block-end: none;
101+
102+
/* Left (right in RTL layout) border of the component */
103+
--str-chat__search-result-list-border-inline-start: none;
104+
105+
/* Right (left in RTL layout) border of the component */
106+
--str-chat__search-result-list-border-inline-end: none;
107+
108+
/* Box shadow applied to the component */
109+
--str-chat__search-result-list-popup-box-shadow: 0 4px 4px var(--str-chat__box-shadow-color);
110+
111+
/* The font color used in the search results header */
112+
--str-chat__search-results-header-color: var(--str-chat__text-low-emphasis-color);
113+
114+
/* The background color used in the search results header */
115+
--str-chat__search-results-header-background-color: var(--str-chat__background-color);
116+
117+
/* Top border of the component */
118+
--str-chat__search-results-header-border-block-start: none;
119+
120+
/* Bottom border of the component */
121+
--str-chat__search-results-header-border-block-end: var(--str-chat__surface-color) 1px
122+
solid;
123+
124+
/* Left (right in RTL layout) border of the component */
125+
--str-chat__search-results-header-border-inline-start: none;
126+
127+
/* Right (left in RTL layout) border of the component */
128+
--str-chat__search-results-header-border-inline-end: none;
129+
130+
/* The font color used in the empty search results indicator */
131+
--str-chat__search-results-empty-color: var(--str-chat__text-low-emphasis-color);
132+
133+
/* The icon color used in the empty search results indicator */
134+
--str-chat__search-results-empty-icon-color: var(--str-chat__disabled-color);
135+
136+
/* The background color used in the empty search results indicator */
137+
--str-chat__search-results-empty-background-color: var(--str-chat__background-color);
138+
139+
/* Top border of the component */
140+
--str-chat__search-results-empty-border-block-start: none;
141+
142+
/* Bottom border of the component */
143+
--str-chat__search-results-empty-border-block-end: none;
144+
145+
/* Left (right in RTL layout) border of the component */
146+
--str-chat__search-results-empty-border-inline-start: none;
147+
148+
/* Right (left in RTL layout) border of the component */
149+
--str-chat__search-results-empty-border-inline-end: none;
150+
}
151+
152+
.str-chat__search-input--wrapper {
153+
@include utils.component-layer-overrides('search-input-wrapper');
154+
155+
.str-chat__search-input--icon {
156+
background-image: var(--str-chat__magnifier-glass-icon);
157+
background-repeat: no-repeat;
158+
}
159+
160+
input {
161+
@include utils.component-layer-overrides('search-input');
162+
outline: none;
163+
font: var(--str-chat__subtitle-text);
164+
}
165+
166+
.str-chat__search-input--clear-button-icon {
167+
background-color: transparent;
168+
-webkit-mask: var(--str-chat__clear-icon) no-repeat center / contain;
169+
mask: var(--str-chat__clear-icon) no-repeat center / contain;
170+
}
171+
}
172+
173+
.str-chat__search-input--wrapper-active {
174+
@include utils.component-layer-overrides('search-input-wrapper-active');
175+
176+
.str-chat__search-input--clear-button-icon {
177+
background-color: var(--str-chat__text-low-emphasis-color);
178+
}
179+
}
180+
181+
.str-chat__search-bar-button--exit-search {
182+
@include utils.button-reset();
183+
color: var(--str-chat__primary-color);
184+
font: var(--str-chat__subtitle-text);
185+
}
186+
187+
.str-chat__search-results-header {
188+
@include utils.component-layer-overrides('search-results-header');
189+
font: var(--str-chat__subtitle-text);
190+
}
191+
192+
.str-chat__search-source-result-list {
193+
@include utils.component-layer-overrides('search-result-list');
194+
195+
.str-chat__search-container-empty {
196+
@include utils.component-layer-overrides('search-results-empty');
197+
font: var(--str-chat__subtitle2-medium-text);
198+
199+
svg path {
200+
fill: var(--str-chat__search-results-empty-icon-color);
201+
}
202+
}
203+
204+
.str-chat__search-result {
205+
@include utils.component-layer-overrides('search-result');
206+
207+
&.str-chat__channel-preview-messenger--active {
208+
background-color: var(--str-chat__channel-preview-active-background-color);
209+
}
210+
211+
.str-chat__search-result--display-name {
212+
@include utils.channel-preview-display-name-theme;
213+
}
214+
}
215+
216+
217+
218+
.str-chat__search-result:hover,
219+
.str-chat__search-result--focused {
220+
background-color: var(--str-chat__search-result-hover-background-color);
221+
}
222+
}

‎src/v2/styles/_icons.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
--str-chat__poll-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTE2IDE2SDJWMkgxNlYxNlpNNCA3SDZWMTRINFY3Wk04IDRIMTBWMTRIOFY0Wk0xMiAxMEgxNFYxNEgxMlYxMFoiLz4KPC9zdmc+');
1111
--str-chat__handle-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgNiIgZmlsbD0iY3VycmVuQ29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTYgMEgwVjJIMTZWMFpNMCA2SDE2VjRIMFY2WiIvPgo8L3N2Zz4K');
1212
--str-chat__circle-stop-icon: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSI0IDQgMjggMjgiIHdpZHRoPSIzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjQ1NTEgMjcuMjQ0MUMyMi42MzA5IDI3LjI0NDEgMjcuNzQ0MSAyMi4xMTk4IDI3Ljc0NDEgMTUuOTU1MUMyNy43NDQxIDkuNzc5MyAyMi42MTk4IDQuNjY2MDIgMTYuNDQ0IDQuNjY2MDJDMTAuMjc5MyA0LjY2NjAyIDUuMTY2MDIgOS43NzkzIDUuMTY2MDIgMTUuOTU1MUM1LjE2NjAyIDIyLjExOTggMTAuMjkwNCAyNy4yNDQxIDE2LjQ1NTEgMjcuMjQ0MVpNMTYuNDU1MSAyNS4zNjI2QzExLjIzMTEgMjUuMzYyNiA3LjA1ODU5IDIxLjE3OSA3LjA1ODU5IDE1Ljk1NTFDNy4wNTg1OSAxMC43MzExIDExLjIyMDEgNi41NDc1MyAxNi40NDQgNi41NDc1M0MyMS42NjggNi41NDc1MyAyNS44NTE2IDEwLjczMTEgMjUuODYyNiAxNS45NTUxQzI1Ljg3MzcgMjEuMTc5IDIxLjY3OSAyNS4zNjI2IDE2LjQ1NTEgMjUuMzYyNlpNMTMuNTIyMSAxOS45ODM3SDE5LjM2NTlDMjAuMDYzMiAxOS45ODM3IDIwLjQ3MjcgMTkuNTc0MiAyMC40NzI3IDE4Ljg5OTFWMTMuMDExMUMyMC40NzI3IDEyLjMyNDkgMjAuMDYzMiAxMS45MjY0IDE5LjM2NTkgMTEuOTI2NEgxMy41MjIxQzEyLjgzNTkgMTEuOTI2NCAxMi40MTU0IDEyLjMyNDkgMTIuNDE1NCAxMy4wMTExVjE4Ljg5OTFDMTIuNDE1NCAxOS41NzQyIDEyLjgzNTkgMTkuOTgzNyAxMy41MjIxIDE5Ljk4MzdaIiBmaWxsPSIjMDA1ZmZmIi8+Cjwvc3ZnPg==');
13+
--str-chat__magnifier-glass-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEgMjEiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSAwQzEzLjk2OCAwIDE4IDQuMDMyIDE4IDlDMTggMTMuOTY4IDEzLjk2OCAxOCA5IDE4QzQuMDMyIDE4IDAgMTMuOTY4IDAgOUMwIDQuMDMyIDQuMDMyIDAgOSAwWk05IDE2QzEyLjg2NyAxNiAxNiAxMi44NjcgMTYgOUMxNiA1LjEzMiAxMi44NjcgMiA5IDJDNS4xMzIgMiAyIDUuMTMyIDIgOUMyIDEyLjg2NyA1LjEzMiAxNiA5IDE2Wk0yMC4zMTQgMTguODk5TDE3LjQ4NSAxNi4wNzFMMTYuMDcxIDE3LjQ4NUwxOC44OTkgMjAuMzE0TDIwLjMxNCAxOC44OTlaIi8+Cjwvc3ZnPgo=');
14+
--str-chat__clear-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDEwQzAgNC40NzcxNSA0LjQ3NzE1IDAgMTAgMEMxNS41MjI4IDAgMjAgNC40NzcxNSAyMCAxMEMyMCAxNS41MjI4IDE1LjUyMjggMjAgMTAgMjBDNC40NzcxNSAyMCAwIDE1LjUyMjggMCAxMFpNMTAgMkM1LjU4MTcyIDIgMiA1LjU4MTcyIDIgMTBDMiAxNC40MTgzIDUuNTgxNzIgMTggMTAgMThDMTQuNDE4MyAxOCAxOCAxNC40MTgzIDE4IDEwQzE4IDUuNTgxNzIgMTQuNDE4MyAyIDEwIDJaTTEzLjUzNTggNi40NjQ0NkMxMy4xNDUzIDYuMDczOTQgMTIuNTEyMSA2LjA3Mzk0IDEyLjEyMTYgNi40NjQ0NkwxMC4wMDAzIDguNTg1NzhMNy44Nzg5OCA2LjQ2NDQ2QzcuNDg4NDYgNi4wNzM5NCA2Ljg1NTI5IDYuMDczOTQgNi40NjQ3NyA2LjQ2NDQ2QzYuMDc0MjQgNi44NTQ5OSA2LjA3NDI0IDcuNDg4MTUgNi40NjQ3NyA3Ljg3ODY4TDguNTg2MDkgMTBMNi40NjQ3NyAxMi4xMjEzQzYuMDc0MjQgMTIuNTExOCA2LjA3NDI0IDEzLjE0NSA2LjQ2NDc3IDEzLjUzNTVDNi44NTUyOSAxMy45MjYxIDcuNDg4NDYgMTMuOTI2MSA3Ljg3ODk4IDEzLjUzNTVMMTAuMDAwMyAxMS40MTQyTDEyLjEyMTYgMTMuNTM1NUMxMi41MTIxIDEzLjkyNjEgMTMuMTQ1MyAxMy45MjYxIDEzLjUzNTggMTMuNTM1NUMxMy45MjY0IDEzLjE0NSAxMy45MjY0IDEyLjUxMTggMTMuNTM1OCAxMi4xMjEzTDExLjQxNDUgMTBMMTMuNTM1OCA3Ljg3ODY4QzEzLjkyNjQgNy40ODgxNSAxMy45MjY0IDYuODU0OTkgMTMuNTM1OCA2LjQ2NDQ2WiIvPgo8L3N2Zz4K');
1315
}
1416

1517
@font-face {

0 commit comments

Comments
 (0)