Add SearchWithin component (#1342) (#2062)

* Add SearchWithin component (#1342)

Co-authored-by: Robert Snow <[email protected]>

Author: reidbarber

packages/@adobe/spectrum-css-temp/components/searchwithin/index.css

@@ -11,49 +11,55 @@ governing permissions and limitations under the License.
 */
 
 @import '../commons/index.css';
-
-:root {
-  --spectrum-searchwithin-width: 250px;
+.spectrum-SearchWithin {
+  --spectrum-searchwithin-width: var(--spectrum-global-dimension-size-3000);
+  --spectrum-searchwithin-searchfield-width: var(--spectrum-global-dimension-size-1600);
 
   /* Force override */
   --spectrum-searchwithin-border-radius: 0;
-  --spectrum-searchwithin-dropdown-min-width: 0;
+  --spectrum-searchwithin-picker-min-width: 0;
 }
 
 .spectrum-SearchWithin {
-  width: var(--spectrum-searchwithin-width);
+  inline-size: var(--spectrum-searchwithin-width);
   display: inline-flex;
   position: relative;
+}
 
-  .spectrum-Dropdown {
-    width: auto;
-    min-width: 0;
-  }
+.spectrum-SearchWithin-picker {
+  inline-size: auto;
+  min-inline-size: var(--spectrum-global-dimension-size-900);
+  flex-shrink: 0;
 
-  .spectrum-Dropdown-trigger {
-    border-top-right-radius: var(--spectrum-searchwithin-border-radius);
-    border-bottom-right-radius: var(--spectrum-searchwithin-border-radius);
+  > button {
+    contain: unset;
+    border-end-start-radius: var(--spectrum-searchwithin-border-radius);
+    border-start-start-radius: var(--spectrum-searchwithin-border-radius);
   }
+}
+
+.spectrum-SearchWithin-searchfield {
+  min-inline-size: var(--spectrum-searchwithin-searchfield-width);
+  flex-grow: 1;
+  order: -1;
+  margin-inline-end: calc(
+    -1 * var(--spectrum-textfield-border-size)
+  ); /* hides right border */
 
-  .spectrum-Dropdown-label {
-    /* Override dropdown's min-width and be tiny */
-    min-width: var(--spectrum-searchwithin-dropdown-min-width);
+  &:focus-within {
+    z-index: 1; /* shows entire focus ring */
   }
 
-  .spectrum-Textfield {
+  > input {
+    border-end-end-radius: var(--spectrum-searchwithin-border-radius);
+    border-start-end-radius: var(--spectrum-searchwithin-border-radius);
     flex: 1;
-    margin-left: calc(var(--spectrum-textfield-border-size) * -1); /* hides left border */
-    border-top-left-radius: var(--spectrum-searchwithin-border-radius);
-    border-bottom-left-radius: var(--spectrum-searchwithin-border-radius);
+    box-sizing: border-box;
+    min-inline-size: inherit;
 
-    &:hover, &:focus {
-      position: relative; /* shows left border */
+    &:hover,
+    &:focus {
+      position: relative; /* shows right border */
     }
   }
-
-  .spectrum-ClearButton {
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
 }

packages/@react-spectrum/form/stories/Form.stories.tsx

@@ -21,6 +21,8 @@ import {Item, Picker} from '@react-spectrum/picker';
 import {NumberField} from '@react-spectrum/numberfield';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
 import React, {Key, useState} from 'react';
+import {SearchField} from '@react-spectrum/searchfield';
+import {SearchWithin} from '@react-spectrum/searchwithin';
 import {storiesOf} from '@storybook/react';
 import {TextArea, TextField} from '@react-spectrum/textfield';
 
@@ -162,6 +164,12 @@ function render(props: any = {}) {
         <Item>Purple</Item>
       </Picker>
       <TextArea label="Comments" placeholder="How do you feel?" />
+      <SearchWithin label="Search">
+        <SearchField placeholder="Search" />
+        <Picker label="State" placeholder="Select a state" items={states}>
+          {item => <Item key={item.abbr}>{item.name}</Item>}
+        </Picker>
+      </SearchWithin>
     </Form>
   );
 }
@@ -178,6 +186,7 @@ function FormWithControls(props: any = {}) {
   let [favoriteColor2, setFavoriteColor2] = useState('green' as Key);
   let [howIFeel2, setHowIFeel2] = useState('I feel good, o I feel so good!');
   let [preventDefault, setPreventDefault] = useState(true);
+  let [favoriteColor3, setFavoriteColor3] = useState('green' as Key);
 
   return (
     <Flex>
@@ -218,6 +227,17 @@ function FormWithControls(props: any = {}) {
         </Picker>
         <TextArea name="comments-controlled" label="Comments" placeholder="How do you feel? controlled" value={howIFeel} onChange={setHowIFeel} />
         <TextArea name="comments-uncontrolled" label="Comments" placeholder="How do you feel? default" defaultValue="hello" />
+        <SearchWithin label="Search">
+          <SearchField placeholder="Search" />
+          <Picker name="favorite-color3" label="Favorite color searchwithin" selectedKey={favoriteColor3} onSelectionChange={setFavoriteColor3}>
+            <Item key="red">Red</Item>
+            <Item key="orange">Orange</Item>
+            <Item key="yellow">Yellow</Item>
+            <Item key="green">Green</Item>
+            <Item key="blue">Blue</Item>
+            <Item key="purple">Purple</Item>
+          </Picker>
+        </SearchWithin>
         <ButtonGroup>
           <Button variant="primary" type="submit">Submit</Button>
         </ButtonGroup>
@@ -306,6 +326,18 @@ function FormWithControls(props: any = {}) {
             Comments default
             <textarea placeholder="How do you feel?" defaultValue="hello" />
           </label>
+          <label>
+            Favorite Color searchwithin
+            <input type="text" placeholder="Search" />
+            <select onChange={e => setFavoriteColor3(e.target.value)}>
+              <option value="red" selected={favoriteColor3 === 'red'}>Red</option>
+              <option value="orange" selected={favoriteColor3 === 'orange'}>Orange</option>
+              <option value="yellow" selected={favoriteColor3 === 'yellow'}>Yellow</option>
+              <option value="green" selected={favoriteColor3 === 'green'}>Green</option>
+              <option value="blue" selected={favoriteColor3 === 'blue'}>Blue</option>
+              <option value="purple" selected={favoriteColor3 === 'purple'}>Purple</option>
+            </select>
+          </label>
           <ButtonGroup>
             <Button variant="secondary" type="reset">Reset</Button>
             <Button variant="primary" type="submit">Submit</Button>

packages/@react-spectrum/picker/src/Picker.tsx

@@ -18,6 +18,7 @@ import {
   SlotProvider,
   useDOMRef,
   useIsMobileDevice,
+  useSlotProps,
   useStyleProps,
   useUnwrapDOMRef
 } from '@react-spectrum/utils';
@@ -46,6 +47,7 @@ import {useProvider, useProviderProps} from '@react-spectrum/provider';
 import {useSelectState} from '@react-stately/select';
 
 function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTMLDivElement>) {
+  props = useSlotProps(props, 'picker');
   props = useProviderProps(props);
   props = useFormProps(props);
   let formatMessage = useMessageFormatter(intlMessages);

packages/@react-spectrum/searchfield/src/SearchField.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {classNames} from '@react-spectrum/utils';
+import {classNames, useSlotProps} from '@react-spectrum/utils';
 import {ClearButton} from '@react-spectrum/button';
 import Magnifier from '@spectrum-icons/ui/Magnifier';
 import React, {forwardRef, RefObject, useRef} from 'react';
@@ -23,6 +23,7 @@ import {useSearchField} from '@react-aria/searchfield';
 import {useSearchFieldState} from '@react-stately/searchfield';
 
 function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRef>) {
+  props = useSlotProps(props, 'searchfield');
   props = useProviderProps(props);
   let defaultIcon = (
     <Magnifier data-testid="searchicon" />

packages/@react-spectrum/searchwithin/README.md

@@ -0,0 +1,3 @@
+# @react-spectrum/searchwithin
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

packages/@react-spectrum/searchwithin/chromatic/SearchWithin.chromatic.tsx

@@ -0,0 +1,118 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {generatePowerset} from '../../story-utils';
+import {Grid, repeat} from '../../layout';
+import {Item, Picker} from '@react-spectrum/picker';
+import {Meta, Story} from '@storybook/react';
+import React from 'react';
+import {SearchField} from '@react-spectrum/searchfield';
+import {SearchWithin} from '../';
+import {SpectrumSearchWithinProps} from '@react-types/searchwithin';
+
+let states = [
+  {isRequired: true},
+  {isDisabled: true},
+  {necessityIndicator: 'label'}
+];
+
+let items = [
+  {name: 'All', id: 'all'},
+  {name: 'Campaigns', id: 'campaigns'},
+  {name: 'Tags', id: 'tags'},
+  {name: 'Audiences', id: 'audiences'}
+];
+
+let combinations = generatePowerset(states);
+
+function shortName(key) {
+  let returnVal = '';
+  switch (key) {
+    case 'isRequired':
+      returnVal = 'req';
+      break;
+    case 'isDisabled':
+      returnVal = 'disable';
+      break;
+    case 'necessityIndicator':
+      returnVal = 'necInd=label';
+      break;
+  }
+  return returnVal;
+}
+
+const meta: Meta<SpectrumSearchWithinProps> = {
+  title: 'SearchWithin',
+  parameters: {
+    chromaticProvider: {colorSchemes: ['light', 'dark', 'lightest', 'darkest'], locales: ['en-US', 'ar-AE'], scales: ['medium', 'large']}
+  }
+};
+
+export default meta;
+
+const Template: Story<SpectrumSearchWithinProps> = (args) => (
+  <Grid columns={repeat(4, '1fr')} autoFlow="row" gap="size-200">
+    {combinations.map(c => {
+      let key = Object.keys(c).map(k => shortName(k)).join(' ');
+      if (!key) {
+        key = 'empty';
+      }
+
+      return (
+        <SearchWithin key={key} {...args} {...c} label={args['aria-label'] ? undefined : key}>
+          <SearchField placeholder="Search" />
+          <Picker defaultSelectedKey="all">
+            {items.map((item) => <Item key={item.id}>{item.name}</Item>)}
+          </Picker>
+        </SearchWithin>
+      );
+    })}
+  </Grid>
+);
+
+// Chromatic can't handle the size of the side label story so removed some extraneous props that don't matter for side label case.
+const TemplateSideLabel: Story<SpectrumSearchWithinProps> = (args) => (
+  <Grid columns={repeat(2, '1fr')} autoFlow="row" gap="size-200" width={900}>
+    {combinations.map(c => {
+      let key = Object.keys(c).map(k => shortName(k)).join(' ');
+      if (!key) {
+        key = 'empty';
+      }
+
+      return (
+        <SearchWithin key={key} {...args} {...c} label={args['aria-label'] ? undefined : key}>
+          <SearchField placeholder="Search" />
+          <Picker defaultSelectedKey="all">
+            {items.map((item) => <Item key={item.id}>{item.name}</Item>)}
+          </Picker>
+        </SearchWithin>
+      );
+    })}
+  </Grid>
+);
+
+export const PropDefaults = Template.bind({});
+PropDefaults.storyName = 'default';
+PropDefaults.args = {};
+
+export const PropLabelSide = TemplateSideLabel.bind({});
+PropLabelSide.storyName = 'label side';
+PropLabelSide.args = {...PropDefaults.args, labelPosition: 'side'};
+
+export const PropNoLabel = TemplateSideLabel.bind({});
+PropNoLabel.storyName = 'no label';
+PropNoLabel.args = {...PropDefaults.args, label: undefined, 'aria-label': 'Aria Label'};
+
+export const PropCustomWidth = Template.bind({});
+PropCustomWidth.storyName = 'custom width';
+PropCustomWidth.args = {...PropDefaults.args, width: 300};
+