Allow borderless SearchBox.ExpandButton

.changeset/stale-parents-kiss.md

@@ -0,0 +1,20 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Passing `styleType="borderless"` to `SearchBox.ExpandButton` now works as expected. This is because collapsed `SearchBox` will now hide its border and background in favor of the ones from `SearchBox.ExpandButton`.
+
+<details>
+<summary>Example</summary>
+
+```diff
+<SearchBox expandable>
+  <SearchBox.CollapsedState>
+-     <SearchBox.ExpandButton/>
++     <SearchBox.ExpandButton styleType="borderless"/>
+  </SearchBox.CollapsedState>
+  <SearchBox.ExpandedState>…</SearchBox.ExpandedState>
+</SearchBox>
+```
+
+</details>

.changeset/three-pillows-fail.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': minor
+---
+
+Collapsed `.iui-expandable-searchbox` will now hide its border and background in favor of the ones from the expand button.

apps/react-workshop/src/SearchBox.stories.tsx

@@ -53,6 +53,21 @@ export const Expandable = () => {
   );
 };
 
+export const BorderlessExpandButton = () => {
+  return (
+    <SearchBox expandable>
+      <SearchBox.CollapsedState>
+        <SearchBox.ExpandButton styleType='borderless' />
+      </SearchBox.CollapsedState>
+      <SearchBox.ExpandedState>
+        <SearchBox.Icon />
+        <SearchBox.Input placeholder='Expandable search with borderless ExpandButton' />
+        <SearchBox.CollapseButton />
+      </SearchBox.ExpandedState>
+    </SearchBox>
+  );
+};
+
 export const ExpandableWithCustomItems = () => {
   return (
     <SearchBox expandable>

apps/react-workshop/src/SearchBox.test.ts

@@ -9,6 +9,7 @@ describe('SearchBox', () => {
     'Basic With Status',
     'Basic With Custom Items',
     'Expandable',
+    'Borderless Expand Button',
     'Expandable With Custom Items',
     'With Custom Action',
     'Small',

apps/website/src/content/docs/searchbox.mdx

@@ -42,6 +42,14 @@ Expandable SearchBox can be customized by using `ExpandedState` and `CollapsedSt
   <AllExamples.SearchBoxCustomExample client:load />
 </LiveExample>
 
+### Borderless ExpandButton
+
+Useful for having a borderless `ExpandButton` [subcomponent](#subcomponents) similar to a borderless [`IconButton`](button#iconbutton).
+
+<LiveExample src='SearchBox.borderlessexpandbutton.jsx'>
+  <AllExamples.SearchBoxBorderlessExpandButtonExample client:load />
+</LiveExample>
+
 ### Size
 
 SearchBox can be changed to have small or large size. By default it's "medium".

examples/SearchBox.borderlessexpandbutton.css

@@ -0,0 +1,6 @@
+.demo-container {
+  width: 70%;
+  display: flex;
+  justify-content: center;
+  gap: var(--iui-size-xs);
+}

examples/SearchBox.borderlessexpandbutton.jsx

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <div className='demo-container'>
+      <SearchBox expandable>
+        <SearchBox.CollapsedState>
+          <SearchBox.ExpandButton styleType='borderless' />
+        </SearchBox.CollapsedState>
+        <SearchBox.ExpandedState>
+          <SearchBox.Icon />
+          <SearchBox.Input placeholder='Expandable search with borderless SearchBox.CollapsedState' />
+          <SearchBox.CollapseButton />
+        </SearchBox.ExpandedState>
+      </SearchBox>
+    </div>
+  );
+};

examples/SearchBox.custom.css

@@ -2,6 +2,5 @@
   width: 70%;
   display: flex;
   justify-content: center;
-  flex-direction: column;
   gap: var(--iui-size-xs);
 }

examples/index.tsx

@@ -924,6 +924,12 @@ import { default as SearchBoxSizeExampleRaw } from './SearchBox.size';
 const SearchBoxSizeExample = withThemeProvider(SearchBoxSizeExampleRaw);
 export { SearchBoxSizeExample };
 
+import { default as SearchBoxBorderlessExpandButtonExampleRaw } from './SearchBox.borderlessexpandbutton.jsx';
+const SearchBoxBorderlessExpandButtonExample = withThemeProvider(
+  SearchBoxBorderlessExpandButtonExampleRaw,
+);
+export { SearchBoxBorderlessExpandButtonExample };
+
 import { default as SearchBoxExpandableExampleRaw } from './SearchBox.expandable';
 const SearchBoxExpandableExample = withThemeProvider(
   SearchBoxExpandableExampleRaw,

packages/itwinui-css/src/searchbox/searchbox.scss

@@ -5,11 +5,19 @@
   inline-size: fit-content;
   padding-inline: 0; // To remove 1px padding from input-flex-container
 
-  // Expanded
   &:where([data-iui-expanded='true']) {
     inline-size: 100%;
     border-color: var(--_iui-input-border-color);
   }
+
+  &:not([data-iui-expanded='true']) {
+    background-color: transparent;
+
+    &::before {
+      transition: none;
+      border: none;
+    }
+  }
 }
 
 // noop https://github.com/iTwin/iTwinUI/pull/1881#discussion_r1506166537