Skip to content

Commit e6314be

Browse files
FabienMotteFabienMotte
authored
refactor(instantsearch.css): share carousel styles between chat and recommend widgets (#7044)
* refactor(instantsearch.css): share carousel styles between chat and recommend widgets * refactor(instantsearch.css): address review feedback on shared carousel
1 parent 5c26172 commit e6314be

5 files changed

Lines changed: 130 additions & 126 deletions

File tree

‎packages/instantsearch.css/src/components/_carousel.scss‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
@use '../shared/_common';
2+
3+
.ais-Carousel {
4+
position: relative;
5+
margin-bottom: var(--ais-spacing);
6+
7+
a {
8+
color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
9+
text-decoration: none;
10+
}
11+
}
12+
13+
.ais-Carousel-list {
14+
@extend .ais-Scrollbar;
15+
@extend %ais-focus-outline;
16+
17+
gap: 0;
18+
grid-auto-columns: var(--ais-carousel-item-width);
19+
outline: none;
20+
}
21+
22+
.ais-Carousel-hit {
23+
position: relative;
24+
display: flex;
25+
flex-direction: column;
26+
gap: calc(var(--ais-spacing) * 0.5);
27+
border-radius: var(--ais-border-radius-md);
28+
padding: calc(var(--ais-spacing) * 0.5);
29+
height: 100%;
30+
31+
&::before {
32+
content: '';
33+
position: absolute;
34+
inset: 0;
35+
border-radius: var(--ais-border-radius-md);
36+
background-color: rgba(var(--ais-muted-color-rgb), 0);
37+
pointer-events: none;
38+
z-index: -1;
39+
transform: scale(0.95);
40+
41+
transition: all var(--ais-transition-duration)
42+
var(--ais-transition-timing-function);
43+
}
44+
45+
@media (hover: hover) {
46+
&:hover {
47+
&::before {
48+
background-color: rgba(var(--ais-muted-color-rgb), 0.1);
49+
transform: scale(1);
50+
}
51+
52+
.ais-Carousel-hit-image img {
53+
transform: scale(1.05);
54+
}
55+
}
56+
}
57+
58+
&:active:not(:disabled) {
59+
&::before {
60+
background-color: rgba(var(--ais-muted-color-rgb), 0.2);
61+
}
62+
}
63+
64+
&:has(:focus-visible) {
65+
outline: 2px solid
66+
rgba(var(--ais-primary-color-rgb), var(--ais-primary-color-alpha));
67+
outline-offset: 2px;
68+
}
69+
}
70+
71+
.ais-Carousel-hit-link {
72+
&::before {
73+
content: '';
74+
position: absolute;
75+
inset: 0;
76+
}
77+
78+
&:focus-visible {
79+
outline: none;
80+
}
81+
}
82+
83+
.ais-Carousel-hit-image {
84+
position: relative;
85+
display: flex;
86+
justify-content: center;
87+
border-radius: var(--ais-border-radius-md);
88+
overflow: hidden;
89+
90+
img {
91+
transition: transform var(--ais-transition-duration)
92+
var(--ais-transition-timing-function);
93+
}
94+
}
95+
96+
.ais-Carousel-hit-favorite {
97+
position: absolute;
98+
top: calc(var(--ais-spacing) * 0.5);
99+
right: calc(var(--ais-spacing) * 0.5);
100+
z-index: 1;
101+
}
102+
103+
.ais-Carousel-hit-title {
104+
overflow: hidden;
105+
display: -webkit-box;
106+
-webkit-box-orient: vertical;
107+
-webkit-line-clamp: 2;
108+
font-weight: normal;
109+
110+
a {
111+
font-size: var(--ais-spacing);
112+
}
113+
}
114+
115+
.ais-Carousel-hit-title,
116+
.ais-Carousel-hit-price {
117+
margin: 0;
118+
}
119+
120+
.ais-Carousel-hit-price {
121+
font-weight: var(--ais-font-weight-semibold);
122+
margin-top: auto;
123+
}

‎packages/instantsearch.css/src/components/chat.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use '../themes/reset';
22
@use '../shared/_variables';
33
@use '../shared/_common';
4+
@use 'carousel';
45
@use 'button';
56
@use 'chat/chat';
67
@use 'chat/chat-overlay-layout';
@@ -13,5 +14,5 @@
1314
@use 'chat/chat-message-loader';
1415
@use 'chat/chat-greeting';
1516
@use 'chat/chat-prompt';
16-
@use 'chat/chat-carousel';
17+
@use 'chat/chat-tool-results';
1718
@use 'chat/chat-suggestions';

packages/instantsearch.css/src/components/chat/_chat-carousel.scss renamed to packages/instantsearch.css/src/components/chat/_chat-tool-results.scss

Lines changed: 2 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use '../../shared/_variables';
2-
@use '../../shared/_common';
32

43
.ais-ChatMessage-message {
54
.ais-ChatToolSearchIndexCarouselHeader,
@@ -82,15 +81,8 @@
8281
font-style: italic;
8382
}
8483

84+
// Chat-only carousel overrides on top of `components/_carousel.scss`
8585
.ais-Carousel {
86-
position: relative;
87-
margin-bottom: var(--ais-spacing);
88-
89-
a {
90-
color: rgba(var(--ais-text-color-rgb), var(--ais-text-color-alpha));
91-
text-decoration: none;
92-
}
93-
9486
&::before,
9587
&::after {
9688
content: '';
@@ -128,133 +120,20 @@
128120
}
129121

130122
.ais-Carousel-list {
131-
@extend .ais-Scrollbar;
132-
@extend %ais-focus-outline;
133-
134-
gap: 0;
135-
grid-auto-columns: var(--ais-chat-carousel-item-width) !important;
136123
margin-left: calc(-1 * var(--ais-spacing));
137124
margin-right: calc(-1 * var(--ais-spacing));
138125
padding-left: calc(var(--ais-spacing) * 0.5);
139126
padding-right: calc(var(--ais-spacing) * 0.5);
140127
scroll-padding-left: calc(var(--ais-spacing) * 0.5);
141128
scroll-padding-right: calc(var(--ais-spacing) * 0.5);
142-
outline: none;
143129

144-
// Single item takes more space
145130
&:has(.ais-Carousel-item:only-child) {
146131
grid-auto-columns: calc(
147-
var(--ais-chat-carousel-item-width) * 1.5
132+
var(--ais-carousel-item-width) * 1.5
148133
) !important;
149134
}
150135
}
151136

152-
.ais-Carousel-hit {
153-
position: relative;
154-
display: flex;
155-
flex-direction: column;
156-
gap: calc(var(--ais-spacing) * 0.5);
157-
border-radius: var(--ais-border-radius-md);
158-
padding: calc(var(--ais-spacing) * 0.5);
159-
height: 100%;
160-
161-
&::before {
162-
content: '';
163-
position: absolute;
164-
inset: 0;
165-
border-radius: var(--ais-border-radius-md);
166-
background-color: rgba(var(--ais-muted-color-rgb), 0);
167-
pointer-events: none;
168-
z-index: -1;
169-
transform: scale(0.95);
170-
171-
transition: all var(--ais-transition-duration)
172-
var(--ais-transition-timing-function);
173-
}
174-
175-
@media (hover: hover) {
176-
&:hover {
177-
&::before {
178-
background-color: rgba(var(--ais-muted-color-rgb), 0.1);
179-
transform: scale(1);
180-
}
181-
182-
.ais-Carousel-hit-image img {
183-
transform: scale(1.05);
184-
}
185-
}
186-
}
187-
188-
&:active:not(:disabled) {
189-
&::before {
190-
background-color: rgba(var(--ais-muted-color-rgb), 0.2);
191-
}
192-
}
193-
194-
&:has(:focus-visible) {
195-
outline: 2px solid
196-
rgba(var(--ais-primary-color-rgb), var(--ais-primary-color-alpha));
197-
outline-offset: 2px;
198-
}
199-
}
200-
201-
.ais-Carousel-hit-title {
202-
overflow: hidden;
203-
display: -webkit-box;
204-
-webkit-box-orient: vertical;
205-
-webkit-line-clamp: 2;
206-
}
207-
208-
.ais-Carousel-hit-link {
209-
&::before {
210-
content: '';
211-
position: absolute;
212-
inset: 0;
213-
}
214-
215-
&:focus-visible {
216-
outline: none;
217-
}
218-
}
219-
220-
.ais-Carousel-hit-image {
221-
position: relative;
222-
display: flex;
223-
justify-content: center;
224-
border-radius: var(--ais-border-radius-md);
225-
overflow: hidden;
226-
227-
img {
228-
transition: transform var(--ais-transition-duration)
229-
var(--ais-transition-timing-function);
230-
}
231-
}
232-
233-
.ais-Carousel-hit-favorite {
234-
position: absolute;
235-
top: calc(var(--ais-spacing) * 0.5);
236-
right: calc(var(--ais-spacing) * 0.5);
237-
z-index: 1;
238-
}
239-
240-
.ais-Carousel-hit-title {
241-
font-weight: normal;
242-
243-
a {
244-
font-size: var(--ais-spacing);
245-
}
246-
}
247-
248-
.ais-Carousel-hit-title,
249-
.ais-Carousel-hit-price {
250-
margin: 0;
251-
}
252-
253-
.ais-Carousel-hit-price {
254-
font-weight: var(--ais-font-weight-semibold);
255-
margin-top: auto;
256-
}
257-
258137
@media (max-width: variables.$ais-chat-breakpoint) {
259138
.ais-ChatToolSearchIndexCarouselHeaderScrollButtons,
260139
.ais-ChatToolDisplayResultsCarouselHeaderScrollButtons {

‎packages/instantsearch.css/src/shared/_variables.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ $ais-chat-breakpoint: 680px;
7676
--ais-chat-maximized-height: 100%;
7777
--ais-chat-margin: 1.5rem;
7878

79-
/* Chat carousel component */
80-
--ais-chat-carousel-item-width: calc(var(--ais-spacing) * 10);
79+
/* Carousel component */
80+
--ais-carousel-item-width: calc(var(--ais-spacing) * 10);
8181

8282
/* Hit grid */
8383
--ais-hit-min-width: 200px;

‎packages/instantsearch.css/src/themes/nova.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@use '../shared/_nova-common';
66

77
@use '../components/chat';
8+
@use '../components/carousel';
89
@use '../components/autocomplete';
910
@use '../components/ai-mode-button';
1011
@use '../components/filter-suggestions';

0 commit comments

Comments
 (0)