Skip to content

Commit

Permalink
feat(genqa): add collapsible height option to the component (#4817)
Browse files Browse the repository at this point in the history 
[SVCC-4450](https://coveord.atlassian.net/browse/SVCC-4450)

- Add new option `max-collapsed-height`  to the genQA component.
- Using relative dimensions to be consistent.
- We keep `16 rem` as default value.
- The accepted range of the height is from `9rem` to `32rem`, otherwise
the default value is applied.
- `--atomic-crga-collapsed-height` was already introduced in the css,
just using it. (in `generated-answer.pcss`)

**When `max-collapsed-height=9`**  

<img width="848" alt="Screenshot 2025-01-03 at 3 25 35 PM"
src="https://github.com/user-attachments/assets/5d16a88d-d792-403d-8557-d9227cd08382"
/>


**When `max-collapsed-height=32`** 

<img width="479" alt="Screenshot 2025-01-03 at 3 26 43 PM"
src="https://github.com/user-attachments/assets/90353dad-7b77-40c1-8033-a8d7d74a293a"
/>

**When `max-collapsed-height` outside of the range, back to default
one**

<img width="730" alt="Screenshot 2025-01-03 at 3 27 22 PM"
src="https://github.com/user-attachments/assets/5f685e87-b62b-47f4-a1c2-667611603ef2"
/>

 

[SVCC-4450]:
https://coveord.atlassian.net/browse/SVCC-4450?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
  • Loading branch information
@jelmedini
jelmedini authored Jan 13, 2025
1 parent cf8bb89 commit db77dd0
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 11 deletions.
4 changes: 2 additions & 2 deletions packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -984,14 +984,14 @@ export declare interface AtomicFormatUnit extends Components.AtomicFormatUnit {}


@ProxyCmp({
inputs: ['collapsible', 'tabsExcluded', 'tabsIncluded', 'withToggle']
inputs: ['collapsible', 'maxCollapsedHeight', 'tabsExcluded', 'tabsIncluded', 'withToggle']
})
@Component({
selector: 'atomic-generated-answer',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['collapsible', 'tabsExcluded', 'tabsIncluded', 'withToggle'],
inputs: ['collapsible', 'maxCollapsedHeight', 'tabsExcluded', 'tabsIncluded', 'withToggle'],
})
export class AtomicGeneratedAnswer {
protected el: HTMLElement;
Expand Down
16 changes: 16 additions & 0 deletions packages/atomic/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1087,6 +1087,10 @@ export namespace Components {
* @default false
*/
"collapsible"?: boolean;
/**
* The maximum height (in rem units) of the answer when collapsed.
*/
"maxCollapsedHeight": number;
/**
* The tabs on which this generated answer must not be displayed. This property should not be used at the same time as `tabs-included`. Set this property as a stringified JSON array, e.g., ```html <atomic-generated-answer tabs-excluded='["tabIDA", "tabIDB"]'></atomic-generated-answer> ``` If you don't set this property, the generated answer can be displayed on any tab. Otherwise, the generated answer won't be displayed on any of the specified tabs.
*/
Expand Down Expand Up @@ -1233,6 +1237,10 @@ export namespace Components {
* @default false
*/
"collapsible"?: boolean;
/**
* The maximum height (in rem units) of the answer when collapsed.
*/
"maxCollapsedHeight": number;
/**
* Whether to render a toggle button that lets the user hide or show the answer.
* @default false
Expand Down Expand Up @@ -7271,6 +7279,10 @@ declare namespace LocalJSX {
* @default false
*/
"collapsible"?: boolean;
/**
* The maximum height (in rem units) of the answer when collapsed.
*/
"maxCollapsedHeight"?: number;
/**
* The tabs on which this generated answer must not be displayed. This property should not be used at the same time as `tabs-included`. Set this property as a stringified JSON array, e.g., ```html <atomic-generated-answer tabs-excluded='["tabIDA", "tabIDB"]'></atomic-generated-answer> ``` If you don't set this property, the generated answer can be displayed on any tab. Otherwise, the generated answer won't be displayed on any of the specified tabs.
*/
Expand Down Expand Up @@ -7414,6 +7426,10 @@ declare namespace LocalJSX {
* @default false
*/
"collapsible"?: boolean;
/**
* The maximum height (in rem units) of the answer when collapsed.
*/
"maxCollapsedHeight"?: number;
/**
* Whether to render a toggle button that lets the user hide or show the answer.
* @default false
Expand Down
49 changes: 45 additions & 4 deletions ...rc/components/insight/atomic-insight-generated-answer/atomic-insight-generated-answer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,10 @@ export class AtomicInsightGeneratedAnswer
public searchStatus!: InsightSearchStatus;
private resizeObserver?: ResizeObserver;

private readonly DEFAULT_COLLAPSED_HEIGHT = 16;
private readonly MAX_COLLAPSED_HEIGHT = 32;
private readonly MIN_COLLAPSED_HEIGHT = 9;

@BindStateToController('generatedAnswer', {
onUpdateCallbackMethod: 'onGeneratedAnswerStateUpdate',
})
Expand Down Expand Up @@ -101,6 +105,12 @@ export class AtomicInsightGeneratedAnswer
*/
@Prop() collapsible?: boolean;

/**
* The maximum height (in rem units) of the answer when collapsed.
*
*/
@Prop() maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT;

/**
* @internal
* The unique identifier of the answer configuration to use to generate the answer.
Expand All @@ -112,7 +122,6 @@ export class AtomicInsightGeneratedAnswer

private generatedAnswerCommon!: GeneratedAnswerCommon;
private fullAnswerHeight?: number;
private maxCollapsedHeight = 250;

public initialize() {
this.generatedAnswerCommon = new GeneratedAnswerCommon({
Expand Down Expand Up @@ -213,10 +222,19 @@ export class AtomicInsightGeneratedAnswer
}

private adaptAnswerHeight() {
this.fullAnswerHeight = this.host?.shadowRoot
const answerHeight = this.host?.shadowRoot
?.querySelector('[part="generated-text"]')
?.getBoundingClientRect().height;
this.updateAnswerHeight();

if (answerHeight) {
const rootFontSize = parseFloat(
getComputedStyle(document.documentElement).fontSize
);

this.fullAnswerHeight = answerHeight / rootFontSize;

this.updateAnswerHeight();
}
}

private getAnswerContainer() {
Expand All @@ -229,15 +247,38 @@ export class AtomicInsightGeneratedAnswer
);
}

private validateMaxCollapsedHeight(): number {
const isValid =
this.maxCollapsedHeight >= this.MIN_COLLAPSED_HEIGHT &&
this.maxCollapsedHeight <= this.MAX_COLLAPSED_HEIGHT;

if (!isValid) {
console.warn(
`max-collapsed-height (${this.maxCollapsedHeight}rem) is out of the valid range (${this.MIN_COLLAPSED_HEIGHT}rem - ${this.MAX_COLLAPSED_HEIGHT}rem). Falling back to default value (${this.DEFAULT_COLLAPSED_HEIGHT}rem).`
);
}

return isValid ? this.maxCollapsedHeight : this.DEFAULT_COLLAPSED_HEIGHT;
}

private setCSSVariable(variableName: string, value: string) {
const container = this.getAnswerContainer();
if (container) {
(container as HTMLElement).style.setProperty(variableName, value);
}
}

private updateAnswerHeight() {
const container = this.getAnswerContainer();
const footer = this.getAnswerFooter();
const maxHeight = this.validateMaxCollapsedHeight();

if (!container || !footer) {
return;
}

if (this.fullAnswerHeight! > this.maxCollapsedHeight) {
if (this.fullAnswerHeight! > maxHeight) {
this.setCSSVariable('--atomic-crga-collapsed-height', `${maxHeight}rem`);
this.toggleClass(
container,
'answer-collapsed',
Expand Down
51 changes: 46 additions & 5 deletions packages/atomic/src/components/search/atomic-generated-answer/atomic-generated-answer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ export class AtomicGeneratedAnswer implements InitializableComponent {
public searchStatus!: SearchStatus;
private resizeObserver?: ResizeObserver;

private readonly DEFAULT_COLLAPSED_HEIGHT = 16;
private readonly MAX_COLLAPSED_HEIGHT = 32;
private readonly MIN_COLLAPSED_HEIGHT = 9;

@BindStateToController('generatedAnswer', {
onUpdateCallbackMethod: 'onGeneratedAnswerStateUpdate',
})
Expand Down Expand Up @@ -110,6 +114,12 @@ export class AtomicGeneratedAnswer implements InitializableComponent {
*/
@Prop() collapsible?: boolean;

/**
* The maximum height (in rem units) of the answer when collapsed.
*
*/
@Prop() maxCollapsedHeight = this.DEFAULT_COLLAPSED_HEIGHT;

/**
* @internal
* The unique identifier of the answer configuration to use to generate the answer.
Expand Down Expand Up @@ -147,7 +157,6 @@ export class AtomicGeneratedAnswer implements InitializableComponent {

private generatedAnswerCommon!: GeneratedAnswerCommon;
private fullAnswerHeight?: number;
private maxCollapsedHeight = 250;

public initialize() {
if (
Expand Down Expand Up @@ -257,10 +266,19 @@ export class AtomicGeneratedAnswer implements InitializableComponent {
}

private adaptAnswerHeight() {
this.fullAnswerHeight = this.host?.shadowRoot
const answerHeight = this.host?.shadowRoot
?.querySelector('[part="generated-text"]')
?.getBoundingClientRect().height;
this.updateAnswerHeight();

if (answerHeight) {
const rootFontSize = parseFloat(
getComputedStyle(document.documentElement).fontSize
);

this.fullAnswerHeight = answerHeight / rootFontSize;

this.updateAnswerHeight();
}
}

private getAnswerContainer() {
Expand All @@ -273,15 +291,38 @@ export class AtomicGeneratedAnswer implements InitializableComponent {
);
}

private updateAnswerHeight() {
private validateMaxCollapsedHeight(): number {
const isValid =
this.maxCollapsedHeight >= this.MIN_COLLAPSED_HEIGHT &&
this.maxCollapsedHeight <= this.MAX_COLLAPSED_HEIGHT;

if (!isValid) {
console.warn(
`max-collapsed-height (${this.maxCollapsedHeight}rem) is out of the valid range (${this.MIN_COLLAPSED_HEIGHT}rem - ${this.MAX_COLLAPSED_HEIGHT}rem). Falling back to default value (${this.DEFAULT_COLLAPSED_HEIGHT}rem).`
);
}

return isValid ? this.maxCollapsedHeight : this.DEFAULT_COLLAPSED_HEIGHT;
}

private setCSSVariable(variableName: string, value: string) {
const container = this.getAnswerContainer();
if (container) {
(container as HTMLElement).style.setProperty(variableName, value);
}
}

private updateAnswerHeight() {
const container = this.getAnswerContainer() as HTMLElement;
const footer = this.getAnswerFooter();
const maxHeight = this.validateMaxCollapsedHeight();

if (!container || !footer) {
return;
}

if (this.fullAnswerHeight! > this.maxCollapsedHeight) {
if (this.fullAnswerHeight! > maxHeight) {
this.setCSSVariable('--atomic-crga-collapsed-height', `${maxHeight}rem`);
this.toggleClass(
container,
'answer-collapsed',
Expand Down

0 comments on commit db77dd0

Please sign in to comment.