[TopBar] adopt search results to match width and alignment of input field

[eliias]

WHY are these changes introduced?

This addresses some of the discussions that we had after this issue popped up #956 and is also a follow up of #852. The original PR did change the width of the search input field in the TopBar but did not apply those changes to the search results container. This looks a bit weird and this PR aligns the search result with the input field and also matches the width of the field.

WHAT is this pull request doing?

It sets the position rule to be relative on the search container. This allows us to match the width with the absolutely positioned search results container.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {ActionList, AppProvider, Card, Frame, Page, TopBar} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  state = {
    userMenuOpen: false,
    searchActive: false,
    searchText: '',
  };

  toggleUserMenu = () => {
    // @ts-ignore
    this.setState(({userMenuOpen}) => ({userMenuOpen: !userMenuOpen}));
  };

  handleSearchResultsDismiss = () => {
    this.setState(() => {
      return {
        searchActive: false,
        searchText: '',
      };
    });
  };

  handleSearchChange = (value) => {
    this.setState({searchText: value});
    if (value.length > 0) {
      this.setState({searchActive: true});
    } else {
      this.setState({searchActive: false});
    }
  };

  render() {
    const {
      state,
      handleSearchChange,
      handleSearchResultsDismiss,
      toggleUserMenu,
    } = this;

    const {userMenuOpen, searchText, searchActive} = state;

    const theme = {
      colors: {
        topBar: {
          background: '#357997',
        },
      },
      logo: {
        width: 124,
        topBarSource:
          'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999',
        url: 'http://jadedpixel.com',
        accessibilityLabel: 'Jaded Pixel',
      },
    };

    const userMenuMarkup = (
      <TopBar.UserMenu
        actions={[
          {
            items: [{content: 'Back to Shopify', icon: 'arrowLeft'}],
          },
          {
            items: [{content: 'Community forums'}],
          },
        ]}
        name="Dharma"
        detail="Jaded Pixel"
        initials="D"
        open={userMenuOpen}
        onToggle={toggleUserMenu}
      />
    );

    const searchResultsMarkup = (
      <Card>
        <ActionList
          items={[
            {content: 'Shopify help center'},
            {content: 'Community forums'},
          ]}
        />
      </Card>
    );

    const searchFieldMarkup = (
      <TopBar.SearchField
        onChange={handleSearchChange}
        value={searchText}
        placeholder="Search"
      />
    );

    const topBarMarkup = (
      <TopBar
        showNavigationToggle={true}
        userMenu={userMenuMarkup}
        searchResultsVisible={searchActive}
        searchField={searchFieldMarkup}
        searchResults={searchResultsMarkup}
        onSearchResultsDismiss={handleSearchResultsDismiss}
        onNavigationToggle={() => {
          console.log('toggle navigation visibility');
        }}
      />
    );

    return (
      <Page>
        <AppProvider theme={theme}>
          <Frame topBar={topBarMarkup} />
        </AppProvider>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[ry5n]

This works for large screens, but for small screens it makes the results overlay too narrow. Previously I think we solved this by making the overlay full-width below a certain breakpoint (we’re still removing the border radius at this breakpoint now).

[kvendrik]

Make sure that there are no magic numbers/calculations in there, otherwise this LGTM 👍 Thanks for picking this up @eliias! 💯

[kvendrik]

743px maybe store this in a variable somewhere

[kvendrik]

Might wanna store this (or just the spacing() part) in a variable to create clarity around how this calculation works.

[ry5n]

This feels pretty good now. I haven’t been able to properly 🎩 on mobile browsers due to Storybook, but the scaling across screen sizes works well. The results overlay does encroach on the user menu at the right; it doesn’t block it, but there’s a tradeoff here. @jakob-stecher you should take a look at make the final call on the alignment.

[eliias]

There was still a small issue w/ alignment on mobile. So we took the chance to also reposition the results a bit. Thx for review/polish @kvendrik.

@ry5n I just used the iframe URL to test on iOS simulator http://localhost:6006/iframe.html?selectedKind=Playground&selectedStory=Playground

[kvendrik]

LGTM (one minor comment), Percy changes also make sense to me. If this looks good to @jakob-stecher and @ry5n I say let's 🚢 it.

[kvendrik]

Maybe store these numbers somewhere to make them a little less magical.

[eliias]

I have extracted both values into variables and got them hoisted to the top of the file.

[eliias]

Hey folks, we want to get this shipped w/ the next release of Polaris. Please provide your final feedback or please give it a thumbs up. @jakob-stecher @ry5n.

[ghost]

🎉 Thanks for your contribution to Polaris React!