feat(SearchBox): Add Search Box

packages/itwinui-css/src/input-container/input-container.scss

@@ -43,13 +43,19 @@
 .iui-input-flex-container {
   @include iui-input-flex-container;
   @include iui-input-flex-size();
+  // To match borderless button left padding + border
+  --_iui-flex-input-icon-padding: 10px;
 
   &[data-iui-size='small'] {
     @include iui-input-flex-size(small);
+    // To match small borderless button left padding + border
+    --_iui-flex-input-icon-padding: 5px;
   }
 
   &[data-iui-size='large'] {
     @include iui-input-flex-size(large);
+    // To match large borderless button left padding + border
+    --_iui-flex-input-icon-padding: 16px;
   }
 
   @each $status in positive, warning, negative {

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

@@ -28,11 +28,7 @@
   margin: 0 var(--iui-size-s);
 
   &:is(:first-child) {
-    margin: 0 var(--iui-size-xs) 0 var(--iui-size-s);
-  }
-
-  &[data-iui-icon-size='s'] {
-    margin: 0 var(--iui-size-2xs) 0 var(--iui-size-xs);
+    margin: 0 var(--_iui-flex-input-icon-padding, 10px); // To match borderless button left padding + border
   }
 }
 

packages/itwinui-react/src/core/SearchBox/SearchBox.test.tsx

@@ -64,7 +64,6 @@ it.each(['small', 'large'] as const)(
   'should render SearchBox with %s size',
   (size) => {
     const { container } = render(<SearchBox size={size} />);
-    const iconSize = size === 'small' ? 's' : 'l';
 
     // Base flex container
     const searchbox = container.querySelector('.iui-input-flex-container');
@@ -74,7 +73,6 @@ it.each(['small', 'large'] as const)(
     // Search icon
     const searchIcon = searchbox?.querySelector('.iui-svg-icon');
     expect(searchIcon).toBeTruthy();
-    expect(searchIcon).toHaveAttribute('data-iui-icon-size', iconSize);
   },
 );
 

packages/itwinui-react/src/core/SearchBox/SearchBox.tsx

@@ -217,13 +217,11 @@ SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 
 const SearchBoxIcon = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
-  const { size: sizeContext } = useSafeContext(SearchBoxContext);
 
   return (
     <Icon
       aria-hidden
       className={cx('iui-search-icon', className)}
-      size={sizeContext}
       ref={ref}
       {...rest}
     >