@coveo/quantic 3.43.1 → 3.43.2

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.
@@ -1,6 +1,19 @@
1
- .generated-answer-thread__dot-column,
2
- .generated-answer-thread__line-column {
1
+ .generated-answer-thread__grid {
2
+ display: grid;
3
+ grid-template-columns: 10px 1fr;
4
+ grid-template-rows: auto 1fr;
5
+ column-gap: var(--lwc-spacingXSmall, 8px);
6
+ }
7
+
8
+ .generated-answer-thread__timeline {
9
+ grid-row: 1 / -1;
10
+ align-self: stretch;
11
+ }
12
+
13
+ .generated-answer-thread__dot-column {
3
14
  width: 10px;
15
+ height: 1lh;
16
+ margin-block: var(--lwc-spacingXxSmall, 4px);
4
17
  }
5
18
 
6
19
  .generated-answer-thread__dot {
@@ -12,9 +25,8 @@
12
25
 
13
26
  .generated-answer-thread__connector {
14
27
  position: relative;
28
+ flex: 1;
15
29
  width: 1px;
16
- height: 100%;
17
- min-height: 12px;
18
30
  background-color: var(--lwc-colorBorder, #dddbda);
19
31
  }
20
32
 
@@ -11,16 +11,19 @@
11
11
  <ul class="generated-answer-thread">
12
12
  <template lwc:if={shouldCollapseOlderAnswers}>
13
13
  <li class="generated-answer-thread__show-previous">
14
- <div class="slds-grid slds-grid_vertical-align-center">
15
- <div
16
- class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-shrink-none slds-m-right_x-small generated-answer-thread__dot-column"
17
- >
18
- <span
19
- class="generated-answer-thread__dot"
20
- data-testid="show-previous-dot"
21
- ></span>
14
+ <div class="generated-answer-thread__grid">
15
+ <div class="slds-grid slds-grid_vertical slds-grid_vertical-align-center generated-answer-thread__timeline">
16
+ <div
17
+ class="slds-grid slds-grid_align-center slds-grid_vertical-align-center generated-answer-thread__dot-column"
18
+ >
19
+ <span
20
+ class="generated-answer-thread__dot"
21
+ data-testid="show-previous-dot"
22
+ ></span>
23
+ </div>
24
+ <span class="generated-answer-thread__connector"></span>
22
25
  </div>
23
- <div>
26
+ <div class="slds-has-flexi-truncate">
24
27
  <button
25
28
  type="button"
26
29
  class="slds-button_reset slds-p-horizontal_x-small slds-p-vertical_xx-small generated-answer-thread__show-previous-button"
@@ -31,13 +34,6 @@
31
34
  </button>
32
35
  </div>
33
36
  </div>
34
- <div class="slds-grid">
35
- <div
36
- class="slds-grid slds-grid_align-center slds-shrink-none generated-answer-thread__line-column slds-m-right_x-small"
37
- >
38
- <span class="generated-answer-thread__connector"></span>
39
- </div>
40
- </div>
41
37
  </li>
42
38
  </template>
43
39
 
@@ -2,26 +2,28 @@
2
2
  list-style: none;
3
3
  }
4
4
 
5
- .thread-item__dot-column,
6
- .thread-item__line-column {
7
- width: 10px;
5
+ .thread-item__grid {
6
+ display: grid;
7
+ grid-template-columns: 10px 1fr;
8
+ grid-template-rows: auto 1fr;
9
+ column-gap: var(--lwc-spacingXSmall, 8px);
8
10
  }
9
11
 
10
- .thread-item__dot {
11
- height: 8px;
12
- width: 8px;
13
- border-radius: 50%;
14
- background-color: var(--lwc-colorBorder, #dddbda);
12
+ .thread-item__timeline {
13
+ grid-row: 1 / -1;
14
+ align-self: stretch;
15
15
  }
16
16
 
17
- .thread-item__dot--expanded {
18
- background-color: var(--lwc-colorTextDefault, #080707);
17
+ .thread-item__dot-column {
18
+ width: 10px;
19
+ height: 1lh;
20
+ margin-block: var(--lwc-spacingXxSmall, 4px);
19
21
  }
20
22
 
21
23
  .thread-item__line {
22
24
  position: relative;
25
+ flex: 1;
23
26
  width: 1px;
24
- height: 100%;
25
27
  background-color: var(--lwc-colorBorder, #dddbda);
26
28
  }
27
29
 
@@ -43,6 +45,22 @@
43
45
  bottom: -8px;
44
46
  }
45
47
 
48
+ .thread-item__content {
49
+ grid-column: 2;
50
+ grid-row: 2;
51
+ }
52
+
53
+ .thread-item__dot {
54
+ height: 8px;
55
+ width: 8px;
56
+ border-radius: 50%;
57
+ background-color: var(--lwc-colorBorder, #dddbda);
58
+ }
59
+
60
+ .thread-item__dot--expanded {
61
+ background-color: var(--lwc-colorTextDefault, #080707);
62
+ }
63
+
46
64
  .thread-item__clamped-text {
47
65
  display: -webkit-box;
48
66
  -webkit-line-clamp: 3;
@@ -1,10 +1,15 @@
1
1
  <template>
2
2
  <li class="thread-item">
3
- <div class="slds-grid slds-grid_vertical-align-center">
4
- <div
5
- class="slds-grid slds-grid_align-center slds-grid_vertical-align-center slds-shrink-none slds-m-right_x-small thread-item__dot-column"
6
- >
7
- <span class={dotClass} data-testid="thread-item-dot"></span>
3
+ <div class="thread-item__grid">
4
+ <div class="slds-grid slds-grid_vertical slds-grid_vertical-align-center thread-item__timeline">
5
+ <div
6
+ class="slds-grid slds-grid_align-center slds-grid_vertical-align-center thread-item__dot-column"
7
+ >
8
+ <span class={dotClass} data-testid="thread-item-dot"></span>
9
+ </div>
10
+ <template lwc:if={shouldDisplayLine}>
11
+ <span class="thread-item__line" data-testid="thread-item-line"></span>
12
+ </template>
8
13
  </div>
9
14
  <div class="slds-has-flexi-truncate">
10
15
  <template lwc:if={disableCollapse}>
@@ -25,18 +30,9 @@
25
30
  </button>
26
31
  </template>
27
32
  </div>
28
- </div>
29
- <div class="slds-grid">
30
- <div
31
- class="slds-grid slds-grid_align-center slds-shrink-none thread-item__line-column slds-m-right_x-small"
32
- >
33
- <template lwc:if={shouldDisplayLine}>
34
- <span class="thread-item__line" data-testid="thread-item-line"></span>
35
- </template>
36
- </div>
37
33
  <div
38
34
  id="thread-item-content"
39
- class="slds-col slds-p-left_x-small slds-p-vertical_xx-small"
35
+ class="slds-p-left_x-small slds-p-vertical_xx-small thread-item__content"
40
36
  data-testid="thread-item-content"
41
37
  >
42
38
  <div hidden={contentHidden}>