feat(search): sync with carbon react (#10337)

* feat(search): sync with carbon react * fix(search): addressed comments * fix(search): using BX instead of CDS for WC * fix(search): updated prefix
carbon-design-system · Apr 20, 2023 · 976d9f9 · 976d9f9
1 parent 9382b27
commit 976d9f9
Show file tree

Hide file tree

Showing 7 changed files with 258 additions and 103 deletions.
diff --git a/...mponents/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts b/...mponents/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts
@@ -14,7 +14,7 @@ import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { INPUT_SIZE } from '../text-input/text-input';
-import BXSearch from '../search/search';
+import CDSSearch from '../search/search';
 import styles from './data-table.scss';
 
 /**
@@ -24,7 +24,7 @@ import styles from './data-table.scss';
  * @fires cds-search-input - The custom event fired after the search content is changed upon a user gesture.
  */
 @customElement(`${prefix}-table-toolbar-search`)
-class BXTableToolbarSearch extends HostListenerMixin(BXSearch) {
+class BXTableToolbarSearch extends HostListenerMixin(CDSSearch) {
   @query('input')
   private _inputNode!: HTMLInputElement;
 

diff --git a/web-components/packages/carbon-web-components/src/components/search/defs.ts b/web-components/packages/carbon-web-components/src/components/search/defs.ts
diff --git a/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts b/web-components/packages/carbon-web-components/src/components/search/search-skeleton.ts
@@ -17,7 +17,7 @@ import styles from './search.scss';
  * Skeleton of search.
  */
 @customElement(`${prefix}-search-skeleton`)
-class BXSearchSkeleton extends LitElement {
+class CDSSearchSkeleton extends LitElement {
   /**
    * The search box size. Corresponds to the attribute with the same name.
    */
@@ -34,4 +34,4 @@ class BXSearchSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXSearchSkeleton;
+export default CDSSearchSkeleton;
diff --git a/web-components/packages/carbon-web-components/src/components/search/search-story.ts b/web-components/packages/carbon-web-components/src/components/search/search-story.ts
@@ -9,85 +9,154 @@
 
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
+import { boolean, number, select } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
 import { INPUT_SIZE } from '../text-input/text-input';
-import { SEARCH_COLOR_SCHEME } from './search';
 import './search-skeleton';
 import storyDocs from './search-story.mdx';
 import { prefix } from '../../globals/settings';
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${SEARCH_COLOR_SCHEME.LIGHT})`]: SEARCH_COLOR_SCHEME.LIGHT,
-};
-
 const sizes = {
-  'Regular size': null,
   [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
+  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
   [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
 };
 
-export const Default = (args) => {
+const widthSliderOptions = {
+  range: true,
+  min: 300,
+  max: 800,
+  step: 50,
+};
+
+export const Default = () => {
+  return html`
+    <cds-search
+      size="lg"
+      close-button-label-text="Clear search input"
+      label-text="Search"
+      placeholder="Find your items"
+      type="text"></cds-search>
+  `;
+};
+
+export const Disabled = () => {
+  return html`
+    <cds-search
+      size="lg"
+      disabled
+      close-button-label-text="Clear search input"
+      label-text="Search"
+      placeholder="Find your items"
+      type="text"></cds-search>
+  `;
+};
+
+export const Expandable = () => {
+  return html`
+    <cds-search
+      size="lg"
+      expandable
+      close-button-assistive-text="Clear search input"
+      label-text="Search"
+      placeholder="Find your items"
+      type="text"></cds-search>
+  `;
+};
+
+export const ExpandableWithLayer = () => {
+  return html`
+    <cds-layer>
+      <cds-search size="lg" expandable placeholder="Layer one"></cds-search>
+      <cds-layer>
+        <cds-search size="lg" expandable placeholder="Layer two"></cds-search>
+        <cds-layer>
+          <cds-search
+            size="lg"
+            expandable
+            placeholder="Layer three"></cds-search>
+        </cds-layer>
+      </cds-layer>
+    </cds-layer>
+  `;
+};
+
+export const WithLayer = () => {
+  return html`
+    <cds-layer>
+      <cds-search size="lg" placeholder="Layer one"></cds-search>
+      <cds-layer>
+        <cds-search size="lg" placeholder="Layer two"></cds-search>
+        <cds-layer>
+          <cds-search size="lg" placeholder="Layer three"></cds-search>
+        </cds-layer>
+      </cds-layer>
+    </cds-layer>
+  `;
+};
+
+export const Playground = (args) => {
   const {
-    closeButtonAssistiveText,
+    autoComplete,
+    closeButtonLabelText,
     colorScheme,
     disabled,
     labelText,
-    name,
     placeholder,
+    playgroundWidth,
     size,
+    role,
     type,
     value,
     onInput,
   } = args?.[`${prefix}-search`] ?? {};
+
+  const mainDiv = document.querySelector('#main-content');
+
+  if (mainDiv) {
+    (mainDiv as HTMLElement).style.width = `${playgroundWidth}px`;
+  }
+
   return html`
     <cds-search
-      close-button-assistive-text="${ifDefined(closeButtonAssistiveText)}"
+      autocomplete="${autoComplete}"
+      close-button-assistive-text="${ifDefined(closeButtonLabelText)}"
       color-scheme="${ifDefined(colorScheme)}"
       ?disabled="${disabled}"
       label-text="${ifDefined(labelText)}"
-      name="${ifDefined(name)}"
       placeholder="${ifDefined(placeholder)}"
       size="${ifDefined(size)}"
       type="${ifDefined(type)}"
+      role=${role}
       value="${ifDefined(value)}"
-      @cds-search-input="${onInput}"></cds-search>
+      @cds-search-input="${onInput}">
+    </cds-search>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
+Playground.parameters = {
   knobs: {
     [`${prefix}-search`]: () => ({
-      closeButtonAssistiveText: textNullable(
-        'The label text for the close button (close-button-assistive-text)',
+      autoComplete: textNullable('Autocomplete (autocomplete)', 'off'),
+      closeButtonLabelText: textNullable(
+        'The label text for the close button (close-button-label-text)',
         'Clear search input'
       ),
-      colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
       disabled: boolean('Disabled (disabled)', false),
       labelText: textNullable('Label text (label-text)', 'Search'),
-      name: textNullable('Name (name)', ''),
-      placeholder: textNullable('Placeholder text (placeholder)', ''),
+      placeholder: textNullable(
+        'Placeholder text (placeholder)',
+        'Placeholder text'
+      ),
+      playgroundWidth: number('Playground width', 300, widthSliderOptions),
+      role: textNullable('The role of the <input> (role)', 'searchbox'),
       size: select('Search size (size)', sizes, null),
-      type: textNullable('The type of the <input> (type)', ''),
+      type: textNullable('The type of the <input> (type)', 'text'),
       value: textNullable('Value (value)', ''),
-      onInput: action(`${prefix}-search-input`),
     }),
   },
 };
 
-export const skeleton = () =>
-  html` <cds-search-skeleton></cds-search-skeleton> `;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
 export default {
   title: 'Components/Search',
   parameters: {

diff --git a/web-components/packages/carbon-web-components/src/components/search/search.scss b/web-components/packages/carbon-web-components/src/components/search/search.scss
@@ -8,42 +8,60 @@
 $css--plex: true !default;
 
 @use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/search' as *;
 
 // https://github.com/carbon-design-system/carbon/issues/11408
 @include search;
 
-:host(#{$prefix}-search),
-:host(#{$prefix}-search-skeleton) {
-  @extend .#{$prefix}--search--lg;
-}
-
 :host(#{$prefix}-search) {
   @extend .#{$prefix}--search;
 
   outline: none;
-}
 
-:host(#{$prefix}-search[size='sm']),
-:host(#{$prefix}-search-skeleton[size='sm']) {
-  @extend .#{$prefix}--search--sm;
-}
+  &[expandable] {
+    @extend .#{$prefix}--search--expandable;
 
-:host(#{$prefix}-search[size='lg']),
-:host(#{$prefix}-search-skeleton[size='lg']) {
-  @extend .#{$prefix}--search--lg;
-}
+    &[expanded] {
+      @extend .#{$prefix}--search--expanded;
 
-// TODO: deprecate
-// :host(#{$prefix}-search[size='xl']),
-// :host(#{$prefix}-search-skeleton[size='xl']) {
-//   @extend .#{$prefix}--search--xl;
-// }
+      &[size='sm'] {
+        .#{$prefix}--search-input {
+          padding: 0 $spacing-07;
+        }
+      }
+
+      &[size='md'] {
+        .#{$prefix}--search-input {
+          padding: 0 $spacing-08;
+        }
+      }
+
+      &[size='lg'] {
+        .#{$prefix}--search-input {
+          padding: 0 $spacing-09;
+        }
+      }
+    }
+  }
+
+  &[disabled] {
+    svg {
+      fill: $icon-on-color-disabled;
+    }
 
-:host(#{$prefix}-search[color-scheme='light']) {
-  @extend .#{$prefix}--search--light;
+    .#{$prefix}--search-close {
+      pointer-events: none;
+      outline: none;
+
+      &::before {
+        background: none;
+      }
+    }
+  }
 }
 
 :host(#{$prefix}-search-skeleton) {
@@ -59,3 +77,18 @@ $css--plex: true !default;
     }
   }
 }
+
+:host(#{$prefix}-search),
+:host(#{$prefix}-search-skeleton) {
+  &[size='sm'] {
+    @extend .#{$prefix}--search--sm;
+  }
+
+  &[size='md'] {
+    @extend .#{$prefix}--search--md;
+  }
+
+  &[size='lg'] {
+    @extend .#{$prefix}--search--lg;
+  }
+}