[Sheet] build sheet component

[danrosenthal]

Reviewers

⚠️ This PR is now ready for review. The only outstanding work needed is improving the existing example, which will be done before merging. Reviewers should not wait on that example to provide review.

Sheet

A sheet is a large container that enters from the edge of the screen when triggered by the merchant. It’s used to provide merchants with actions and information contextual to the page. It doesn’t interrupt their flow like a modal.

implementation in web	playground desktop	playground mobile

Approach

While I previously planned on allowing this component to be used with an embedded application by delegating rendering to the App Bridge, we have decided to wait on implementing that functionality. So, for now this component is for use only within a standalone application, and will not return markup and will throw a warning if it is not rendered inside the Frame component.

This results in a simpler implementation, and allows us to give more thought to whether and how we want to enable use in an embedded context.

Playground

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

interface State {
  sheetActive: boolean;
  value: string;
}

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

  render() {
    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',
        contextualSaveBarSource:
          'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-gray.svg?6215648040070010999',
        url: 'http://jadedpixel.com',
        accessibilityLabel: 'Jaded Pixel',
      },
    };

    const {sheetActive, value} = this.state;
    return (
      <AppProvider theme={theme}>
        <Frame topBar={<TopBar />}>
          <Page title="Sheet">
            <Card sectioned>
              <Button onClick={this.handleToggleSheet}>
                {sheetActive ? 'Close sheet' : 'Open sheet'}
              </Button>
            </Card>
            <Sheet open={sheetActive} onClose={this.handleCloseSheet}>
              <TextField
                label="form"
                onChange={this.handleTextChange}
                value={value}
              />
            </Sheet>
          </Page>
        </Frame>
      </AppProvider>
    );
  }

  handleOpenSheet = () => {
    this.setState({sheetActive: true});
  };

  handleCloseSheet = () => {
    this.setState({sheetActive: false});
  };

  handleTextChange = (value: string) => {
    return this.setState({value});
  };

  handleToggleSheet = () => {
    const {sheetActive} = this.state;

    if (sheetActive) {
      this.handleCloseSheet();
    } else {
      this.handleOpenSheet();
    }
  };
}

[danrosenthal]

@gf3 @Shopify/app-bridge @tmlayton

I plan on making this new component available shortly. The plan is to also make it available through the AppBridge in an implementation similar to Modal, using a src prop that takes an iframe. Reason being is this component covers the application frame, so its rendering will need to be a concern of the Frame component.

I'm pinging you to let you know my intent, and to get eyes on the plan I've outlined in the original comment at the top of this PR. If you wouldn't mind taking a look at the plan and calling out anything I've missed, I would hugely appreciate it. Also, as I've never added any new features to the AppBridge codebase before, if there's anything I need to look out for, I'd appreciate a heads up.

Thanks in advance!

[keyfer]

Couple small things but this looks great.

[danrosenthal]

I've added an updated example that I feel a lot better about:

Example

[danrosenthal]

up to date docs screenshot

[ry5n]

Tophatted on Web and iOS simulator. I noticed some issues that stem from Storybook, but are not present when this component is tophatted in Web. So, looks good to me. I opened a separate issue to look into the issues stemming from Storybook.

[yourpalsonja]

Hey Dan, nothing blocking, just some thoughts!