feat(SearchBox): Add Search Box

.changeset/brave-otters-switch.md

@@ -0,0 +1,40 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Add `SearchBox` component for your search needs. It can be used as static or expandable search.
+
+```ts
+<SearchBox inputProps={{placeholder:'Basic search'}} />
+<SearchBox expandable inputProps={{placeholder:'Expandable search'}} />
+```
+
+`SearchBox` has subcomponents which can be passed as children to customise the look.
+
+`SearchBox.Icon` - Icon to use within searchbox. By default it has looking glass svg.
+`SearchBox.Button` - Icon button to use within searchbox. By default it has looking glass svg as content.
+`SearchBox.Input` - Input component to use within searchbox.
+`SearchBox.CloseButton` - Button that will close searchbox when expanded.
+`SearchBox.OpenButton` - Button that will expand searchbox when collapsed.
+
+```ts
+<SearchBox>
+  <SearchBox.Button title='Search button' />
+  <SearchBox.Input placeholder='Basic search with custom interactions' />
+  <Text
+    isMuted
+    variant='body'
+    as='p'
+    style={{ paddingRight: 'var(--iui-size-s)', alignSelf: 'center' }}
+  >
+    0/3
+  </Text>
+  <Divider orientation='vertical' />
+  <SearchBox.Button styleType='borderless'>
+    <SvgCaretUpSmall />
+  </SearchBox.Button>
+  <SearchBox.Button styleType='borderless'>
+    <SvgCaretDownSmall />
+  </SearchBox.Button>
+</SearchBox>
+```

.changeset/long-buttons-glow.md

@@ -0,0 +1,8 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+- Add `iui-input-flex-container` class for inputs with icons and buttons within
+- Add `iui-expandable-searchbox` class for Searchbox that can be expanded
+  - Add `iui-search-icon` for styling icons within search
+  - Additional styling for buttons and input is not needed

apps/storybook/src/SearchBox.stories.tsx

@@ -0,0 +1,109 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { Meta, StoryFn } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+import {
+  SearchBox,
+  SearchBoxProps,
+  IconButton,
+  Text,
+  Divider,
+} from '@itwin/itwinui-react';
+import { SvgCaretDownSmall, SvgCaretUpSmall } from '@itwin/itwinui-icons-react';
+
+export default {
+  component: SearchBox,
+  argTypes: {
+    className: { control: { disable: true } },
+    style: { control: { disable: true } },
+  },
+  title: 'Input/SearchBox',
+} as Meta<SearchBoxProps>;
+
+export const Basic: StoryFn<SearchBoxProps> = () => {
+  return <SearchBox inputProps={{ placeholder: 'Basic search' }} />;
+};
+
+export const BasicWithCustomItems: StoryFn<SearchBoxProps> = () => {
+  return (
+    <SearchBox>
+      <SearchBox.Button title='Search button' />
+      <SearchBox.Input placeholder='Basic search with custom interactions' />
+      <Text
+        isMuted
+        variant='body'
+        as='p'
+        style={{ paddingRight: 'var(--iui-size-s)', alignSelf: 'center' }}
+      >
+        0/3
+      </Text>
+      <Divider orientation='vertical' />
+      <SearchBox.Button styleType='borderless'>
+        <SvgCaretUpSmall />
+      </SearchBox.Button>
+      <SearchBox.Button styleType='borderless'>
+        <SvgCaretDownSmall />
+      </SearchBox.Button>
+    </SearchBox>
+  );
+};
+
+export const Expandable: StoryFn<SearchBoxProps> = () => {
+  return <SearchBox expandable id='search-input' />;
+};
+
+export const ExpandableWithCustomItems: StoryFn<SearchBoxProps> = () => {
+  return (
+    <SearchBox expandable>
+      <SearchBox.Input placeholder='Expandable search with custom interactions' />
+      <SearchBox.Button>
+        <SvgCaretUpSmall />
+      </SearchBox.Button>
+      <SearchBox.Button>
+        <SvgCaretDownSmall />
+      </SearchBox.Button>
+      <Divider orientation='vertical' />
+      <SearchBox.CollapseButton />
+    </SearchBox>
+  );
+};
+
+export const Small: StoryFn<SearchBoxProps> = () => {
+  return <SearchBox size='small' inputProps={{ placeholder: 'Search...' }} />;
+};
+
+export const WithCustomAction: StoryFn<SearchBoxProps> = () => {
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleExpand = () => {
+    action('Expanding searchbox');
+    setExpanded(true);
+  };
+
+  const handleCollapse = () => {
+    action('Collapsing searchbox');
+    setExpanded(false);
+  };
+
+  return (
+    <SearchBox
+      expandable
+      isExpanded={expanded}
+      onExpand={handleExpand}
+      onCollapse={handleCollapse}
+    >
+      <SearchBox.Input placeholder='Test' />
+      <SearchBox.CollapseButton />
+      <Divider orientation='vertical' />
+      <IconButton styleType='borderless'>
+        <SvgCaretUpSmall />
+      </IconButton>
+      <IconButton styleType='borderless'>
+        <SvgCaretDownSmall />
+      </IconButton>
+    </SearchBox>
+  );
+};

apps/storybook/src/SearchBox.test.ts

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+describe('SearchBox', () => {
+  const storyPath = 'Input/SearchBox';
+  const tests = [
+    'Basic',
+    'Basic With Custom Items',
+    'Expandable',
+    'Expandable With Custom Items',
+    'With Custom Action',
+    'Small',
+  ];
+
+  tests.forEach((testName) => {
+    it(testName, function () {
+      const id = Cypress.storyId(storyPath, testName);
+      cy.visit('iframe', { qs: { id } });
+      cy.compareSnapshot(testName);
+      if (!testName.includes('Basic') && testName !== 'Small') {
+        cy.get('.iui-searchbox-open-button').first().click();
+        cy.compareSnapshot(`${testName} (Open)`);
+      }
+    });
+  });
+});

apps/website/src/examples/Searchbox.custom.tsx

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { SearchBox, Text, Divider, Flex } from '@itwin/itwinui-react';
+import { SvgCaretUpSmall, SvgCaretDownSmall, SvgCloseSmall } from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <Flex style={{ width: '70%' }} justifyContent='center' flexDirection='column'>
+      <SearchBox expandable>
+        <SearchBox.Input placeholder='Expandable search with custom interactions' />
+        <SearchBox.Button label='Previous result'>
+          <SvgCaretUpSmall />
+        </SearchBox.Button>
+        <SearchBox.Button label='Next result'>
+          <SvgCaretDownSmall />
+        </SearchBox.Button>
+        <Divider orientation='vertical' />
+        <SearchBox.CollapseButton label='Close search' />
+      </SearchBox>
+      <SearchBox>
+        <SearchBox.Input placeholder='Basic search with custom interactions' />
+        <Text
+          isMuted
+          variant='body'
+          as='p'
+          style={{ paddingRight: 'var(--iui-size-s)', alignSelf: 'center' }}
+        >
+          0/3
+        </Text>
+        <Divider orientation='vertical' />
+        <SearchBox.Button label='Previous result'>
+          <SvgCaretUpSmall />
+        </SearchBox.Button>
+        <SearchBox.Button label='Next result'>
+          <SvgCaretDownSmall />
+        </SearchBox.Button>
+        <SearchBox.Button label='Clear search'>
+          <SvgCloseSmall />
+        </SearchBox.Button>
+      </SearchBox>
+    </Flex>
+  );
+};

apps/website/src/examples/Searchbox.customopen.tsx

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { SearchBox, Divider, Flex } from '@itwin/itwinui-react';
+import { SvgCaretUpSmall, SvgCaretDownSmall, SvgAirplane } from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <Flex style={{ width: '70%' }} justifyContent='center' flexDirection='column'>
+      <SearchBox
+        expandable
+        collapsedState={
+          <SearchBox.ExpandButton>
+            <SvgAirplane />
+          </SearchBox.ExpandButton>
+        }
+      >
+        <SearchBox.Input placeholder='Expandable search with custom open icon' />
+        <SearchBox.Button label='Previous result'>
+          <SvgCaretUpSmall />
+        </SearchBox.Button>
+        <SearchBox.Button label='Next result'>
+          <SvgCaretDownSmall />
+        </SearchBox.Button>
+        <Divider orientation='vertical' />
+        <SearchBox.CollapseButton label='Close search' />
+      </SearchBox>
+    </Flex>
+  );
+};

apps/website/src/examples/Searchbox.expandable.tsx

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { SearchBox, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Flex style={{ width: '70%' }} justifyContent='center'>
+      <SearchBox
+        expandable
+        aria-label='Search input'
+        inputProps={{ placeholder: 'Expandable search...' }}
+      />
+    </Flex>
+  );
+};

apps/website/src/examples/Searchbox.main.tsx

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { SearchBox, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Flex style={{ width: '70%' }}>
+      <SearchBox aria-label='Search input' inputProps={{ placeholder: 'Search...' }} />
+    </Flex>
+  );
+};

apps/website/src/examples/Searchbox.size.tsx

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { SearchBox, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Flex style={{ width: '70%' }} flexDirection='column'>
+      <SearchBox size='small' inputProps={{ placeholder: 'Small search...' }} />
+      <SearchBox size='large' inputProps={{ placeholder: 'Large search...' }} />
+    </Flex>
+  );
+};

apps/website/src/examples/Searchbox.status.tsx

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { SearchBox, Flex } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <Flex style={{ width: '70%' }} flexDirection='column'>
+      <SearchBox status='positive' inputProps={{ placeholder: 'Positive search...' }} />
+      <SearchBox status='warning' inputProps={{ placeholder: 'Warning search...' }} />
+      <SearchBox status='negative' inputProps={{ placeholder: 'Negative search...' }} />
+    </Flex>
+  );
+};

apps/website/src/examples/index.tsx

@@ -156,6 +156,13 @@ export { default as RadioStatusesExample } from './Radio.statuses';
 export { default as RadioTileMainExample } from './RadioTile.main';
 export { default as RadioTileColorExample } from './RadioTile.color';
 
+export { default as SearchboxMainExample } from './Searchbox.main';
+export { default as SearchboxSizeExample } from './Searchbox.size';
+export { default as SearchboxExpandableExample } from './Searchbox.expandable';
+export { default as SearchboxStatusExample } from './Searchbox.status';
+export { default as SearchboxCustomExample } from './Searchbox.custom';
+export { default as SearchboxCustomOpenExample } from './Searchbox.customopen';
+
 export { default as SelectMainExample } from './Select.main';
 
 export { default as SideNavigationMainExample } from './SideNavigation.main';