feat(atomic): add segmented scrollable component basic structure (#2100)

* basic structure https://coveord.atlassian.net/browse/KIT-1722 * draft (doesn't work) https://coveord.atlassian.net/browse/KIT-1722 * add index example, use slot https://coveord.atlassian.net/browse/KIT-1722 * styling shadowroot attempt https://coveord.atlassian.net/browse/KIT-1722 * css for segmented scrollable https://coveord.atlassian.net/browse/KIT-1722 * arrow buttons added https://coveord.atlassian.net/browse/KIT-1722 * adjusted height https://coveord.atlassian.net/browse/KIT-1722 * changed from clickable div to button https://coveord.atlassian.net/browse/KIT-1722 * removed comments https://coveord.atlassian.net/browse/KIT-1722 Co-authored-by: Jean-Félix Thibodeau <[email protected]>
coveo · Jun 21, 2022 · 7bb2d1c · 7bb2d1c
1 parent f4bb50a
commit 7bb2d1c
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 2 deletions.
diff --git a/...atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts b/...atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts
@@ -69,6 +69,7 @@ AtomicSearchBoxQuerySuggestions,
 AtomicSearchBoxRecentQueries,
 AtomicSearchInterface,
 AtomicSearchLayout,
+AtomicSegmentedFacetScrollable,
 AtomicSmartSnippet,
 AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,
@@ -150,6 +151,7 @@ AtomicSearchBoxQuerySuggestions,
 AtomicSearchBoxRecentQueries,
 AtomicSearchInterface,
 AtomicSearchLayout,
+AtomicSegmentedFacetScrollable,
 AtomicSmartSnippet,
 AtomicSmartSnippetFeedbackModal,
 AtomicSmartSnippetSuggestions,

diff --git a/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts b/packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts
@@ -1331,6 +1331,25 @@ export class AtomicSearchLayout {
 }
 
 
+export declare interface AtomicSegmentedFacetScrollable extends Components.AtomicSegmentedFacetScrollable {}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined
+})
+@Component({
+  selector: 'atomic-segmented-facet-scrollable',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>'
+})
+export class AtomicSegmentedFacetScrollable {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
 export declare interface AtomicSmartSnippet extends Components.AtomicSmartSnippet {}
 
 @ProxyCmp({

diff --git a/packages/atomic-react/src/components/stencil-generated/index.ts b/packages/atomic-react/src/components/stencil-generated/index.ts
@@ -70,6 +70,7 @@ export const AtomicSearchBoxQuerySuggestions = /*@__PURE__*/createReactComponent
 export const AtomicSearchBoxRecentQueries = /*@__PURE__*/createReactComponent<JSX.AtomicSearchBoxRecentQueries, HTMLAtomicSearchBoxRecentQueriesElement>('atomic-search-box-recent-queries');
 export const AtomicSearchInterface = /*@__PURE__*/createReactComponent<JSX.AtomicSearchInterface, HTMLAtomicSearchInterfaceElement>('atomic-search-interface');
 export const AtomicSearchLayout = /*@__PURE__*/createReactComponent<JSX.AtomicSearchLayout, HTMLAtomicSearchLayoutElement>('atomic-search-layout');
+export const AtomicSegmentedFacetScrollable = /*@__PURE__*/createReactComponent<JSX.AtomicSegmentedFacetScrollable, HTMLAtomicSegmentedFacetScrollableElement>('atomic-segmented-facet-scrollable');
 export const AtomicSmartSnippet = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippet, HTMLAtomicSmartSnippetElement>('atomic-smart-snippet');
 export const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippetFeedbackModal, HTMLAtomicSmartSnippetFeedbackModalElement>('atomic-smart-snippet-feedback-modal');
 export const AtomicSmartSnippetSuggestions = /*@__PURE__*/createReactComponent<JSX.AtomicSmartSnippetSuggestions, HTMLAtomicSmartSnippetSuggestionsElement>('atomic-smart-snippet-suggestions');

diff --git a/packages/atomic/src/components.d.ts b/packages/atomic/src/components.d.ts
@@ -1014,6 +1014,8 @@ export namespace Components {
         "sortCriteria": FacetSortCriterion;
         "withSearch": boolean;
     }
+    interface AtomicSegmentedFacetScrollable {
+    }
     interface AtomicSmartSnippet {
         /**
           * When the answer is partly hidden, how much of its height (in pixels) should be visible.
@@ -1593,6 +1595,12 @@ declare global {
         prototype: HTMLAtomicSegmentedFacetElement;
         new (): HTMLAtomicSegmentedFacetElement;
     };
+    interface HTMLAtomicSegmentedFacetScrollableElement extends Components.AtomicSegmentedFacetScrollable, HTMLStencilElement {
+    }
+    var HTMLAtomicSegmentedFacetScrollableElement: {
+        prototype: HTMLAtomicSegmentedFacetScrollableElement;
+        new (): HTMLAtomicSegmentedFacetScrollableElement;
+    };
     interface HTMLAtomicSmartSnippetElement extends Components.AtomicSmartSnippet, HTMLStencilElement {
     }
     var HTMLAtomicSmartSnippetElement: {
@@ -1739,6 +1747,7 @@ declare global {
         "atomic-search-interface": HTMLAtomicSearchInterfaceElement;
         "atomic-search-layout": HTMLAtomicSearchLayoutElement;
         "atomic-segmented-facet": HTMLAtomicSegmentedFacetElement;
+        "atomic-segmented-facet-scrollable": HTMLAtomicSegmentedFacetScrollableElement;
         "atomic-smart-snippet": HTMLAtomicSmartSnippetElement;
         "atomic-smart-snippet-answer": HTMLAtomicSmartSnippetAnswerElement;
         "atomic-smart-snippet-expandable-answer": HTMLAtomicSmartSnippetExpandableAnswerElement;
@@ -2717,6 +2726,8 @@ declare namespace LocalJSX {
         "sortCriteria"?: FacetSortCriterion;
         "withSearch"?: boolean;
     }
+    interface AtomicSegmentedFacetScrollable {
+    }
     interface AtomicSmartSnippet {
         /**
           * When the answer is partly hidden, how much of its height (in pixels) should be visible.
@@ -2937,6 +2948,7 @@ declare namespace LocalJSX {
         "atomic-search-interface": AtomicSearchInterface;
         "atomic-search-layout": AtomicSearchLayout;
         "atomic-segmented-facet": AtomicSegmentedFacet;
+        "atomic-segmented-facet-scrollable": AtomicSegmentedFacetScrollable;
         "atomic-smart-snippet": AtomicSmartSnippet;
         "atomic-smart-snippet-answer": AtomicSmartSnippetAnswer;
         "atomic-smart-snippet-expandable-answer": AtomicSmartSnippetExpandableAnswer;
@@ -3028,6 +3040,7 @@ declare module "@stencil/core" {
             "atomic-search-interface": LocalJSX.AtomicSearchInterface & JSXBase.HTMLAttributes<HTMLAtomicSearchInterfaceElement>;
             "atomic-search-layout": LocalJSX.AtomicSearchLayout & JSXBase.HTMLAttributes<HTMLAtomicSearchLayoutElement>;
             "atomic-segmented-facet": LocalJSX.AtomicSegmentedFacet & JSXBase.HTMLAttributes<HTMLAtomicSegmentedFacetElement>;
+            "atomic-segmented-facet-scrollable": LocalJSX.AtomicSegmentedFacetScrollable & JSXBase.HTMLAttributes<HTMLAtomicSegmentedFacetScrollableElement>;
             "atomic-smart-snippet": LocalJSX.AtomicSmartSnippet & JSXBase.HTMLAttributes<HTMLAtomicSmartSnippetElement>;
             "atomic-smart-snippet-answer": LocalJSX.AtomicSmartSnippetAnswer & JSXBase.HTMLAttributes<HTMLAtomicSmartSnippetAnswerElement>;
             "atomic-smart-snippet-expandable-answer": LocalJSX.AtomicSmartSnippetExpandableAnswer & JSXBase.HTMLAttributes<HTMLAtomicSmartSnippetExpandableAnswerElement>;

diff --git a/packages/atomic/src/components/common/button.tsx b/packages/atomic/src/components/common/button.tsx
@@ -22,6 +22,7 @@ export interface ButtonProps {
   ariaChecked?: string;
   ariaCurrent?: string;
   ariaControls?: string;
+  ariaHidden?: string;
   title?: string;
   ref?(element?: HTMLButtonElement): void;
 }
@@ -43,6 +44,7 @@ export const Button: FunctionalComponent<ButtonProps> = (props, children) => {
     'aria-checked': props.ariaChecked,
     'aria-current': props.ariaCurrent,
     'aria-controls': props.ariaControls,
+    'aria-hidden': props.ariaHidden,
     disabled: props.disabled,
     ref(buttonEl?: HTMLButtonElement) {
       if (props.form) {

diff --git a/...omponents/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss b/...omponents/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.pcss
@@ -0,0 +1,9 @@
+@import '../../../global/global.pcss';
+
+.wrapper-segmented {
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+.wrapper-segmented::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
diff --git a/...components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx b/...components/facets/atomic-segmented-facet-scrollable/atomic-segmented-facet-scrollable.tsx
@@ -0,0 +1,37 @@
+import {Component, Element, h} from '@stencil/core';
+import ArrowRightIcon from 'coveo-styleguide/resources/icons/svg/arrow-right-rounded.svg';
+import ArrowLeftIcon from 'coveo-styleguide/resources/icons/svg/arrow-left-rounded.svg';
+import {Button} from '../../common/button';
+
+@Component({
+  tag: 'atomic-segmented-facet-scrollable',
+  styleUrl: 'atomic-segmented-facet-scrollable.pcss',
+  shadow: true,
+})
+export class AtomicSegmentedFacetScrollable {
+  @Element() private host!: HTMLElement;
+
+  render() {
+    return (
+      <div class="flex h-9">
+        <Button
+          style="square-neutral"
+          class="flex shrink-0 basis-8 justify-center items-center rounded"
+          ariaHidden="true"
+        >
+          <atomic-icon class="w-3.5" icon={ArrowLeftIcon}></atomic-icon>
+        </Button>
+        <div class="wrapper-segmented flex flex-row overflow-x-scroll">
+          <slot></slot>
+        </div>
+        <Button
+          style="square-neutral"
+          class="flex shrink-0 basis-8 justify-center items-center rounded"
+          ariaHidden="true"
+        >
+          <atomic-icon class="w-3.5" icon={ArrowRightIcon}></atomic-icon>
+        </Button>
+      </div>
+    );
+  }
+}
diff --git a/...ges/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx b/...ges/atomic/src/components/search/facets/atomic-segmented-facet/atomic-segmented-facet.tsx
@@ -143,7 +143,7 @@ export class AtomicSegmentedFacet
     if (!this.label) {
       return;
     }
-    return <b class="inline-block my-3 mr-2">{this.label}:</b>;
+    return <b class="inline-block my-3 mx-2">{this.label}:</b>;
   }
 
   public render() {
@@ -156,7 +156,7 @@ export class AtomicSegmentedFacet
     }
 
     return (
-      <div class="flex">
+      <div class="flex whitespace-nowrap h-9 items-center">
         {this.renderLabel()}
         {this.renderValues()}
       </div>

diff --git a/packages/atomic/src/pages/index.html b/packages/atomic/src/pages/index.html
@@ -194,6 +194,9 @@
           </atomic-facet-manager>
         </atomic-layout-section>
         <atomic-layout-section section="main">
+          <atomic-segmented-facet-scrollable>
+            <atomic-segmented-facet field="objecttype" number-of-values="20"></atomic-segmented-facet>
+          </atomic-segmented-facet-scrollable>
           <atomic-layout-section section="status">
             <atomic-breadbox></atomic-breadbox>
             <atomic-query-summary></atomic-query-summary>