⭐️

【Polaris和訳】Components/Overlays①

2021/10/29に公開約65,200字

この記事について

この記事は、Polaris/Components/Overlaysの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Overlays

モーダルとは、特定のアクションが実行されるまで、マーチャントがアプリケーションの他の部分とやり取りすることを妨げるオーバーレイです。モーダルは、マーチャントが Shopify の他の部分とやり取りする前にアクションを起こすことを要求するため、混乱を招く可能性があります。慎重に、そして控えめに使用する必要があります。

Basic modal

モーダルのデフォルトオプションとして使用します。

React
React
function ModalExample() {
  const [active, setActive] = useState(true);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const activator = <Button onClick={handleChange}>Open</Button>;

  return (
    <div style={{height: '500px'}}>
      <Modal
        activator={activator}
        open={active}
        onClose={handleChange}
        title="Reach more shoppers with Instagram product tags"
        primaryAction={{
          content: 'Add Instagram',
          onAction: handleChange,
        }}
        secondaryActions={[
          {
            content: 'Learn more',
            onAction: handleChange,
          },
        ]}
      >
        <Modal.Section>
          <TextContainer>
            <p>
              Use Instagram posts to share your products with millions of
              people. Let shoppers buy from your store without leaving
              Instagram.
            </p>
          </TextContainer>
        </Modal.Section>
      </Modal>
    </div>
  );
}
HTML
HTML
<div>
  <div style="height: 500px;">
    <div><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Open</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="modal-Polarisportal42">
      <div>
        <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
          <div>
            <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header42" tabindex="-1" class="Polaris-Modal-Dialog">
              <div class="Polaris-Modal-Dialog__Modal">
                <div class="Polaris-Modal-Header">
                  <div id="Polarismodal-header42" class="Polaris-Modal-Header__Title">
                    <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Reach more shoppers with Instagram product tags</h2>
                  </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                      </svg></span></button>
                </div>
                <div class="Polaris-Modal__BodyWrapper">
                  <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
                    <section class="Polaris-Modal-Section">
                      <div class="Polaris-TextContainer">
                        <p>Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram.</p>
                      </div>
                    </section>
                  </div>
                </div>
                <div class="Polaris-Modal-Footer">
                  <div class="Polaris-Modal-Footer__FooterContent">
                    <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                      <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                      <div class="Polaris-Stack__Item">
                        <div class="Polaris-ButtonGroup">
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Learn more</span></span></button></div>
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add Instagram</span></span></button></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Backdrop"></div>
    </div>
  </div>
</div>
<div>
  <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
    <div>
      <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header42" tabindex="-1" class="Polaris-Modal-Dialog">
        <div class="Polaris-Modal-Dialog__Modal">
          <div class="Polaris-Modal-Header">
            <div id="Polarismodal-header42" class="Polaris-Modal-Header__Title">
              <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Reach more shoppers with Instagram product tags</h2>
            </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                  <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                </svg></span></button>
          </div>
          <div class="Polaris-Modal__BodyWrapper">
            <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
              <section class="Polaris-Modal-Section">
                <div class="Polaris-TextContainer">
                  <p>Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram.</p>
                </div>
              </section>
            </div>
          </div>
          <div class="Polaris-Modal-Footer">
            <div class="Polaris-Modal-Footer__FooterContent">
              <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                <div class="Polaris-Stack__Item">
                  <div class="Polaris-ButtonGroup">
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Learn more</span></span></button></div>
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add Instagram</span></span></button></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-Backdrop"></div>

マーチャントに重要なアクションを起こさせるために使用します。

React
React
function ModalWithPrimaryActionExample() {
  const DISCOUNT_LINK = 'https://polaris.shopify.com/';

  const [active, setActive] = useState(true);
  const node = useRef(null);

  const handleClick = useCallback(() => {
    node.current && node.current.input.focus();
  }, []);

  const handleFocus = useCallback(() => {
    if (node.current == null) {
      return;
    }
    node.current.input.select();
    document.execCommand('copy');
  }, []);

  const toggleModal = useCallback(() => setActive((active) => !active), []);

  const activator = <Button onClick={toggleModal}>Open</Button>;

  return (
    <div style={{height: '500px'}}>
      <Modal
        activator={activator}
        open={active}
        onClose={toggleModal}
        title="Get a shareable link"
        primaryAction={{
          content: 'Close',
          onAction: toggleModal,
        }}
      >
        <Modal.Section>
          <Stack vertical>
            <Stack.Item>
              <TextContainer>
                <p>
                  You can share this discount link with your customers via email
                  or social media. Your discount will be automatically applied
                  at checkout.
                </p>
              </TextContainer>
            </Stack.Item>
            <Stack.Item fill>
              <TextField
                ref={node}
                label="Discount link"
                onFocus={handleFocus}
                value={DISCOUNT_LINK}
                onChange={() => {}}
                connectedRight={
                  <Button primary onClick={handleClick}>
                    Copy link
                  </Button>
                }
              />
            </Stack.Item>
          </Stack>
        </Modal.Section>
      </Modal>
    </div>
  );
}
HTML
HTML
<div>
  <div style="height: 500px;">
    <div><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Open</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="modal-Polarisportal44">
      <div>
        <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
          <div>
            <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header44" tabindex="-1" class="Polaris-Modal-Dialog">
              <div class="Polaris-Modal-Dialog__Modal">
                <div class="Polaris-Modal-Header">
                  <div id="Polarismodal-header44" class="Polaris-Modal-Header__Title">
                    <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Get a shareable link</h2>
                  </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                      </svg></span></button>
                </div>
                <div class="Polaris-Modal__BodyWrapper">
                  <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
                    <section class="Polaris-Modal-Section">
                      <div class="Polaris-Stack Polaris-Stack--vertical">
                        <div class="Polaris-Stack__Item">
                          <div class="Polaris-TextContainer">
                            <p>You can share this discount link with your customers via email or social media. Your discount will be automatically applied at checkout.</p>
                          </div>
                        </div>
                        <div class="Polaris-Stack__Item Polaris-Stack__Item--fill">
                          <div class="">
                            <div class="Polaris-Labelled__LabelWrapper">
                              <div class="Polaris-Label"><label id="PolarisTextField10Label" for="PolarisTextField10" class="Polaris-Label__Text">Discount link</label></div>
                            </div>
                            <div class="Polaris-Connected">
                              <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                                <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField10" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField10Label" aria-invalid="false" value="https://polaris.shopify.com/">
                                  <div class="Polaris-TextField__Backdrop"></div>
                                </div>
                              </div>
                              <div class="Polaris-Connected__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Copy link</span></span></button></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </section>
                  </div>
                </div>
                <div class="Polaris-Modal-Footer">
                  <div class="Polaris-Modal-Footer__FooterContent">
                    <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                      <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                      <div class="Polaris-Stack__Item">
                        <div class="Polaris-ButtonGroup">
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Close</span></span></button></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Backdrop"></div>
    </div>
  </div>
</div>
<div>
  <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
    <div>
      <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header44" tabindex="-1" class="Polaris-Modal-Dialog">
        <div class="Polaris-Modal-Dialog__Modal">
          <div class="Polaris-Modal-Header">
            <div id="Polarismodal-header44" class="Polaris-Modal-Header__Title">
              <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Get a shareable link</h2>
            </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                  <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                </svg></span></button>
          </div>
          <div class="Polaris-Modal__BodyWrapper">
            <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
              <section class="Polaris-Modal-Section">
                <div class="Polaris-Stack Polaris-Stack--vertical">
                  <div class="Polaris-Stack__Item">
                    <div class="Polaris-TextContainer">
                      <p>You can share this discount link with your customers via email or social media. Your discount will be automatically applied at checkout.</p>
                    </div>
                  </div>
                  <div class="Polaris-Stack__Item Polaris-Stack__Item--fill">
                    <div class="">
                      <div class="Polaris-Labelled__LabelWrapper">
                        <div class="Polaris-Label"><label id="PolarisTextField10Label" for="PolarisTextField10" class="Polaris-Label__Text">Discount link</label></div>
                      </div>
                      <div class="Polaris-Connected">
                        <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
                          <div class="Polaris-TextField Polaris-TextField--hasValue"><input id="PolarisTextField10" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField10Label" aria-invalid="false" value="https://polaris.shopify.com/">
                            <div class="Polaris-TextField__Backdrop"></div>
                          </div>
                        </div>
                        <div class="Polaris-Connected__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Copy link</span></span></button></div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <div class="Polaris-Modal-Footer">
            <div class="Polaris-Modal-Footer__FooterContent">
              <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                <div class="Polaris-Stack__Item">
                  <div class="Polaris-ButtonGroup">
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Close</span></span></button></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-Backdrop"></div>

マーチャントがモーダルの下部で重要なアクションを取るために使用します。

React
React
function ModalWithPrimaryAndSecondaryActionsExample() {
  const CURRENT_PAGE = 'current_page';
  const ALL_CUSTOMERS = 'all_customers';
  const SELECTED_CUSTOMERS = 'selected_customers';
  const CSV_EXCEL = 'csv_excel';
  const CSV_PLAIN = 'csv_plain';

  const [active, setActive] = useState(true);
  const [selectedExport, setSelectedExport] = useState([]);
  const [selectedExportAs, setSelectedExportAs] = useState([]);

  const handleModalChange = useCallback(() => setActive(!active), [active]);

  const handleClose = () => {
    handleModalChange();
    handleSelectedExport([]);
    handleSelectedExportAs([]);
  };

  const handleSelectedExport = useCallback(
    (value) => setSelectedExport(value),
    [],
  );

  const handleSelectedExportAs = useCallback(
    (value) => setSelectedExportAs(value),
    [],
  );

  const activator = <Button onClick={handleModalChange}>Open</Button>;

  return (
    <div style={{height: '500px'}}>
      <Modal
        activator={activator}
        open={active}
        onClose={handleClose}
        title="Export customers"
        primaryAction={{
          content: 'Export customers',
          onAction: handleClose,
        }}
        secondaryActions={[
          {
            content: 'Cancel',
            onAction: handleClose,
          },
        ]}
      >
        <Modal.Section>
          <Stack vertical>
            <Stack.Item>
              <ChoiceList
                title="Export"
                choices={[
                  {label: 'Current page', value: CURRENT_PAGE},
                  {label: 'All customers', value: ALL_CUSTOMERS},
                  {label: 'Selected customers', value: SELECTED_CUSTOMERS},
                ]}
                selected={selectedExport}
                onChange={handleSelectedExport}
              />
            </Stack.Item>
            <Stack.Item>
              <ChoiceList
                title="Export as"
                choices={[
                  {
                    label:
                      'CSV for Excel, Numbers, or other spreadsheet programs',
                    value: CSV_EXCEL,
                  },
                  {label: 'Plain CSV file', value: CSV_PLAIN},
                ]}
                selected={selectedExportAs}
                onChange={handleSelectedExportAs}
              />
            </Stack.Item>
          </Stack>
        </Modal.Section>
      </Modal>
    </div>
  );
}
HTML
HTML
<div>
  <div style="height: 500px;">
    <div><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Open</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="modal-Polarisportal46">
      <div>
        <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
          <div>
            <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header46" tabindex="-1" class="Polaris-Modal-Dialog">
              <div class="Polaris-Modal-Dialog__Modal">
                <div class="Polaris-Modal-Header">
                  <div id="Polarismodal-header46" class="Polaris-Modal-Header__Title">
                    <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Export customers</h2>
                  </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                      </svg></span></button>
                </div>
                <div class="Polaris-Modal__BodyWrapper">
                  <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
                    <section class="Polaris-Modal-Section">
                      <div class="Polaris-Stack Polaris-Stack--vertical">
                        <div class="Polaris-Stack__Item">
                          <fieldset class="Polaris-ChoiceList" id="PolarisChoiceList15" aria-invalid="false">
                            <legend class="Polaris-ChoiceList__Title">Export</legend>
                            <ul class="Polaris-ChoiceList__Choices">
                              <li><label class="Polaris-Choice" for="PolarisRadioButton36"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton36" name="PolarisChoiceList15" type="radio" class="Polaris-RadioButton__Input" value="current_page"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">Current page</span></label></li>
                              <li><label class="Polaris-Choice" for="PolarisRadioButton37"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton37" name="PolarisChoiceList15" type="radio" class="Polaris-RadioButton__Input" value="all_customers"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">All customers</span></label></li>
                              <li><label class="Polaris-Choice" for="PolarisRadioButton38"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton38" name="PolarisChoiceList15" type="radio" class="Polaris-RadioButton__Input" value="selected_customers"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">Selected customers</span></label></li>
                            </ul>
                          </fieldset>
                        </div>
                        <div class="Polaris-Stack__Item">
                          <fieldset class="Polaris-ChoiceList" id="PolarisChoiceList16" aria-invalid="false">
                            <legend class="Polaris-ChoiceList__Title">Export as</legend>
                            <ul class="Polaris-ChoiceList__Choices">
                              <li><label class="Polaris-Choice" for="PolarisRadioButton39"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton39" name="PolarisChoiceList16" type="radio" class="Polaris-RadioButton__Input" value="csv_excel"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">CSV for Excel, Numbers, or other spreadsheet programs</span></label></li>
                              <li><label class="Polaris-Choice" for="PolarisRadioButton40"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton40" name="PolarisChoiceList16" type="radio" class="Polaris-RadioButton__Input" value="csv_plain"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">Plain CSV file</span></label></li>
                            </ul>
                          </fieldset>
                        </div>
                      </div>
                    </section>
                  </div>
                </div>
                <div class="Polaris-Modal-Footer">
                  <div class="Polaris-Modal-Footer__FooterContent">
                    <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                      <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                      <div class="Polaris-Stack__Item">
                        <div class="Polaris-ButtonGroup">
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button></div>
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Export customers</span></span></button></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Backdrop"></div>
    </div>
  </div>
</div>
<div>
  <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
    <div>
      <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header46" tabindex="-1" class="Polaris-Modal-Dialog">
        <div class="Polaris-Modal-Dialog__Modal">
          <div class="Polaris-Modal-Header">
            <div id="Polarismodal-header46" class="Polaris-Modal-Header__Title">
              <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Export customers</h2>
            </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                  <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                </svg></span></button>
          </div>
          <div class="Polaris-Modal__BodyWrapper">
            <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
              <section class="Polaris-Modal-Section">
                <div class="Polaris-Stack Polaris-Stack--vertical">
                  <div class="Polaris-Stack__Item">
                    <fieldset class="Polaris-ChoiceList" id="PolarisChoiceList15" aria-invalid="false">
                      <legend class="Polaris-ChoiceList__Title">Export</legend>
                      <ul class="Polaris-ChoiceList__Choices">
                        <li><label class="Polaris-Choice" for="PolarisRadioButton36"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton36" name="PolarisChoiceList15" type="radio" class="Polaris-RadioButton__Input" value="current_page"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">Current page</span></label></li>
                        <li><label class="Polaris-Choice" for="PolarisRadioButton37"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton37" name="PolarisChoiceList15" type="radio" class="Polaris-RadioButton__Input" value="all_customers"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">All customers</span></label></li>
                        <li><label class="Polaris-Choice" for="PolarisRadioButton38"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton38" name="PolarisChoiceList15" type="radio" class="Polaris-RadioButton__Input" value="selected_customers"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">Selected customers</span></label></li>
                      </ul>
                    </fieldset>
                  </div>
                  <div class="Polaris-Stack__Item">
                    <fieldset class="Polaris-ChoiceList" id="PolarisChoiceList16" aria-invalid="false">
                      <legend class="Polaris-ChoiceList__Title">Export as</legend>
                      <ul class="Polaris-ChoiceList__Choices">
                        <li><label class="Polaris-Choice" for="PolarisRadioButton39"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton39" name="PolarisChoiceList16" type="radio" class="Polaris-RadioButton__Input" value="csv_excel"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">CSV for Excel, Numbers, or other spreadsheet programs</span></label></li>
                        <li><label class="Polaris-Choice" for="PolarisRadioButton40"><span class="Polaris-Choice__Control"><span class="Polaris-RadioButton"><input id="PolarisRadioButton40" name="PolarisChoiceList16" type="radio" class="Polaris-RadioButton__Input" value="csv_plain"><span class="Polaris-RadioButton__Backdrop"></span></span></span><span class="Polaris-Choice__Label">Plain CSV file</span></label></li>
                      </ul>
                    </fieldset>
                  </div>
                </div>
              </section>
            </div>
          </div>
          <div class="Polaris-Modal-Footer">
            <div class="Polaris-Modal-Footer__FooterContent">
              <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                <div class="Polaris-Stack__Item">
                  <div class="Polaris-ButtonGroup">
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button></div>
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Export customers</span></span></button></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-Backdrop"></div>

Large modal

モーダルの幅を広げる必要がある場合に使用します。

React
React
function LargeModalExample() {
  const [active, setActive] = useState(true);
  const [checked, setChecked] = useState(false);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const handleCheckbox = useCallback((value) => setChecked(value), []);

  const activator = <Button onClick={toggleActive}>Open</Button>;

  return (
    <div style={{height: '500px'}}>
      <Modal
        large
        activator={activator}
        open={active}
        onClose={toggleActive}
        title="Import customers by CSV"
        primaryAction={{
          content: 'Import customers',
          onAction: toggleActive,
        }}
        secondaryActions={[
          {
            content: 'Cancel',
            onAction: toggleActive,
          },
        ]}
      >
        <Modal.Section>
          <Stack vertical>
            <DropZone
              accept=".csv"
              errorOverlayText="File type must be .csv"
              type="file"
              onDrop={() => {}}
            >
              <DropZone.FileUpload />
            </DropZone>
            <Checkbox
              checked={checked}
              label="Overwrite existing customers that have the same email or phone"
              onChange={handleCheckbox}
            />
          </Stack>
        </Modal.Section>
      </Modal>
    </div>
  );
}
HTML
HTML
<div>
  <div style="height: 500px;">
    <div><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Open</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="modal-Polarisportal48">
      <div>
        <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
          <div>
            <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header48" tabindex="-1" class="Polaris-Modal-Dialog">
              <div class="Polaris-Modal-Dialog__Modal Polaris-Modal-Dialog--sizeLarge">
                <div class="Polaris-Modal-Header">
                  <div id="Polarismodal-header48" class="Polaris-Modal-Header__Title">
                    <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Import customers by CSV</h2>
                  </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                      </svg></span></button>
                </div>
                <div class="Polaris-Modal__BodyWrapper">
                  <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
                    <section class="Polaris-Modal-Section">
                      <div class="Polaris-Stack Polaris-Stack--vertical">
                        <div class="Polaris-Stack__Item">
                          <div class="Polaris-Labelled--hidden">
                            <div class="Polaris-Labelled__LabelWrapper">
                              <div class="Polaris-Label"><label id="PolarisDropZone8Label" for="PolarisDropZone8" class="Polaris-Label__Text">Upload files</label></div>
                            </div>
                            <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone8" accept=".csv" type="file" multiple="" autocomplete="off"></span>
                              <div class="Polaris-DropZone__Container">
                                <div class="Polaris-DropZone-FileUpload">
                                  <div class="Polaris-Stack Polaris-Stack--vertical">
                                    <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
                                    <div class="Polaris-Stack__Item">
                                      <div class="Polaris-DropZone-FileUpload__Button">Add files</div>
                                    </div>
                                    <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop files to upload</span></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="Polaris-Stack__Item"><label class="Polaris-Choice" for="PolarisCheckbox8"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox8" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value=""><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                      <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                                    </svg></span></span></span></span><span class="Polaris-Choice__Label">Overwrite existing customers that have the same email or phone</span></label></div>
                      </div>
                    </section>
                  </div>
                </div>
                <div class="Polaris-Modal-Footer">
                  <div class="Polaris-Modal-Footer__FooterContent">
                    <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                      <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                      <div class="Polaris-Stack__Item">
                        <div class="Polaris-ButtonGroup">
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button></div>
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Import customers</span></span></button></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Backdrop"></div>
    </div>
  </div>
</div>
<div>
  <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
    <div>
      <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header48" tabindex="-1" class="Polaris-Modal-Dialog">
        <div class="Polaris-Modal-Dialog__Modal Polaris-Modal-Dialog--sizeLarge">
          <div class="Polaris-Modal-Header">
            <div id="Polarismodal-header48" class="Polaris-Modal-Header__Title">
              <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Import customers by CSV</h2>
            </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                  <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                </svg></span></button>
          </div>
          <div class="Polaris-Modal__BodyWrapper">
            <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
              <section class="Polaris-Modal-Section">
                <div class="Polaris-Stack Polaris-Stack--vertical">
                  <div class="Polaris-Stack__Item">
                    <div class="Polaris-Labelled--hidden">
                      <div class="Polaris-Labelled__LabelWrapper">
                        <div class="Polaris-Label"><label id="PolarisDropZone8Label" for="PolarisDropZone8" class="Polaris-Label__Text">Upload files</label></div>
                      </div>
                      <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone8" accept=".csv" type="file" multiple="" autocomplete="off"></span>
                        <div class="Polaris-DropZone__Container">
                          <div class="Polaris-DropZone-FileUpload">
                            <div class="Polaris-Stack Polaris-Stack--vertical">
                              <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
                              <div class="Polaris-Stack__Item">
                                <div class="Polaris-DropZone-FileUpload__Button">Add files</div>
                              </div>
                              <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop files to upload</span></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-Stack__Item"><label class="Polaris-Choice" for="PolarisCheckbox8"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox8" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value=""><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                              </svg></span></span></span></span><span class="Polaris-Choice__Label">Overwrite existing customers that have the same email or phone</span></label></div>
                </div>
              </section>
            </div>
          </div>
          <div class="Polaris-Modal-Footer">
            <div class="Polaris-Modal-Footer__FooterContent">
              <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                <div class="Polaris-Stack__Item">
                  <div class="Polaris-ButtonGroup">
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button></div>
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Import customers</span></span></button></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-Backdrop"></div>

Small modal

モーダルの幅を小さくする必要がある場合に使用します。

React
React
function SmallModalExample() {
  const [active, setActive] = useState(true);
  const [checked, setChecked] = useState(false);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const handleCheckbox = useCallback((value) => setChecked(value), []);

  const activator = <Button onClick={toggleActive}>Open</Button>;

  return (
    <div style={{height: '500px'}}>
      <Modal
        small
        activator={activator}
        open={active}
        onClose={toggleActive}
        title="Import customers by CSV"
        primaryAction={{
          content: 'Import customers',
          onAction: toggleActive,
        }}
        secondaryActions={[
          {
            content: 'Cancel',
            onAction: toggleActive,
          },
        ]}
      >
        <Modal.Section>
          <Stack vertical>
            <DropZone
              accept=".csv"
              errorOverlayText="File type must be .csv"
              type="file"
              onDrop={() => {}}
            >
              <DropZone.FileUpload />
            </DropZone>
            <Checkbox
              checked={checked}
              label="Overwrite existing customers that have the same email or phone"
              onChange={handleCheckbox}
            />
          </Stack>
        </Modal.Section>
      </Modal>
    </div>
  );
}
HTML
HTML
<div>
  <div style="height: 500px;">
    <div><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Open</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="modal-Polarisportal50">
      <div>
        <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
          <div>
            <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header50" tabindex="-1" class="Polaris-Modal-Dialog">
              <div class="Polaris-Modal-Dialog__Modal Polaris-Modal-Dialog--sizeSmall">
                <div class="Polaris-Modal-Header">
                  <div id="Polarismodal-header50" class="Polaris-Modal-Header__Title">
                    <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Import customers by CSV</h2>
                  </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                      </svg></span></button>
                </div>
                <div class="Polaris-Modal__BodyWrapper">
                  <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
                    <section class="Polaris-Modal-Section">
                      <div class="Polaris-Stack Polaris-Stack--vertical">
                        <div class="Polaris-Stack__Item">
                          <div class="Polaris-Labelled--hidden">
                            <div class="Polaris-Labelled__LabelWrapper">
                              <div class="Polaris-Label"><label id="PolarisDropZone10Label" for="PolarisDropZone10" class="Polaris-Label__Text">Upload files</label></div>
                            </div>
                            <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone10" accept=".csv" type="file" multiple="" autocomplete="off"></span>
                              <div class="Polaris-DropZone__Container">
                                <div class="Polaris-DropZone-FileUpload">
                                  <div class="Polaris-Stack Polaris-Stack--vertical">
                                    <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
                                    <div class="Polaris-Stack__Item">
                                      <div class="Polaris-DropZone-FileUpload__Button">Add files</div>
                                    </div>
                                    <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop files to upload</span></div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="Polaris-Stack__Item"><label class="Polaris-Choice" for="PolarisCheckbox10"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox10" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value=""><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                      <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                                    </svg></span></span></span></span><span class="Polaris-Choice__Label">Overwrite existing customers that have the same email or phone</span></label></div>
                      </div>
                    </section>
                  </div>
                </div>
                <div class="Polaris-Modal-Footer">
                  <div class="Polaris-Modal-Footer__FooterContent">
                    <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                      <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                      <div class="Polaris-Stack__Item">
                        <div class="Polaris-ButtonGroup">
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button></div>
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Import customers</span></span></button></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Backdrop"></div>
    </div>
  </div>
</div>
<div>
  <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
    <div>
      <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header50" tabindex="-1" class="Polaris-Modal-Dialog">
        <div class="Polaris-Modal-Dialog__Modal Polaris-Modal-Dialog--sizeSmall">
          <div class="Polaris-Modal-Header">
            <div id="Polarismodal-header50" class="Polaris-Modal-Header__Title">
              <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Import customers by CSV</h2>
            </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                  <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                </svg></span></button>
          </div>
          <div class="Polaris-Modal__BodyWrapper">
            <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
              <section class="Polaris-Modal-Section">
                <div class="Polaris-Stack Polaris-Stack--vertical">
                  <div class="Polaris-Stack__Item">
                    <div class="Polaris-Labelled--hidden">
                      <div class="Polaris-Labelled__LabelWrapper">
                        <div class="Polaris-Label"><label id="PolarisDropZone10Label" for="PolarisDropZone10" class="Polaris-Label__Text">Upload files</label></div>
                      </div>
                      <div class="Polaris-DropZone Polaris-DropZone--hasOutline Polaris-DropZone--sizeExtraLarge" aria-disabled="false"><span class="Polaris-VisuallyHidden"><input id="PolarisDropZone10" accept=".csv" type="file" multiple="" autocomplete="off"></span>
                        <div class="Polaris-DropZone__Container">
                          <div class="Polaris-DropZone-FileUpload">
                            <div class="Polaris-Stack Polaris-Stack--vertical">
                              <div class="Polaris-Stack__Item"><img width="40" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt=""></div>
                              <div class="Polaris-Stack__Item">
                                <div class="Polaris-DropZone-FileUpload__Button">Add files</div>
                              </div>
                              <div class="Polaris-Stack__Item"><span class="Polaris-TextStyle--variationSubdued">or drop files to upload</span></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="Polaris-Stack__Item"><label class="Polaris-Choice" for="PolarisCheckbox10"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox10" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value=""><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                              </svg></span></span></span></span><span class="Polaris-Choice__Label">Overwrite existing customers that have the same email or phone</span></label></div>
                </div>
              </section>
            </div>
          </div>
          <div class="Polaris-Modal-Footer">
            <div class="Polaris-Modal-Footer__FooterContent">
              <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                <div class="Polaris-Stack__Item">
                  <div class="Polaris-ButtonGroup">
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button></div>
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Import customers</span></span></button></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-Backdrop"></div>

タイトルはアクセシビリティのために必要ですが、非表示にしても構いません。

React
React
function ModalWithoutTitleExample() {
  const [active, setActive] = useState(true);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const activator = <Button onClick={handleChange}>Open</Button>;

  return (
    <div style={{height: '500px'}}>
      <Modal
        title="Reach more shoppers with Instagram product tags"
        titleHidden
        activator={activator}
        open={active}
        onClose={handleChange}
        primaryAction={{
          content: 'Add Instagram',
          onAction: handleChange,
        }}
        secondaryActions={[
          {
            content: 'Learn more',
            onAction: handleChange,
          },
        ]}
      >
        <Modal.Section>
          <TextContainer>
            <p>
              Use Instagram posts to share your products with millions of
              people. Let shoppers buy from your store without leaving
              Instagram.
            </p>
          </TextContainer>
        </Modal.Section>
      </Modal>
    </div>
  );
}
HTML
HTML
<div>
  <div style="height: 500px;">
    <div><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Open</span></span></button></div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="modal-Polarisportal52">
      <div>
        <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
          <div>
            <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header52" tabindex="-1" class="Polaris-Modal-Dialog">
              <div class="Polaris-Modal-Dialog__Modal">
                <div class="Polaris-Modal-Header--titleHidden">
                  <div id="Polarismodal-header52" class="Polaris-Modal-Header__Title">
                    <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Reach more shoppers with Instagram product tags</h2>
                  </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                        <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                      </svg></span></button>
                </div>
                <div class="Polaris-Modal__BodyWrapper">
                  <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
                    <section class="Polaris-Modal-Section">
                      <div class="Polaris-TextContainer">
                        <p>Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram.</p>
                      </div>
                    </section>
                  </div>
                </div>
                <div class="Polaris-Modal-Footer">
                  <div class="Polaris-Modal-Footer__FooterContent">
                    <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                      <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                      <div class="Polaris-Stack__Item">
                        <div class="Polaris-ButtonGroup">
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Learn more</span></span></button></div>
                          <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add Instagram</span></span></button></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Backdrop"></div>
    </div>
  </div>
</div>
<div>
  <div class="Polaris-Modal-Dialog__Container" data-polaris-layer="true" data-polaris-overlay="true">
    <div>
      <div role="dialog" aria-modal="true" aria-labelledby="Polarismodal-header52" tabindex="-1" class="Polaris-Modal-Dialog">
        <div class="Polaris-Modal-Dialog__Modal">
          <div class="Polaris-Modal-Header--titleHidden">
            <div id="Polarismodal-header52" class="Polaris-Modal-Header__Title">
              <h2 class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">Reach more shoppers with Instagram product tags</h2>
            </div><button class="Polaris-Modal-CloseButton" aria-label="Close"><span class="Polaris-Icon Polaris-Icon--colorBase Polaris-Icon--applyColor"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                  <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                </svg></span></button>
          </div>
          <div class="Polaris-Modal__BodyWrapper">
            <div class="Polaris-Modal__Body Polaris-Scrollable Polaris-Scrollable--vertical" data-polaris-scrollable="true">
              <section class="Polaris-Modal-Section">
                <div class="Polaris-TextContainer">
                  <p>Use Instagram posts to share your products with millions of people. Let shoppers buy from your store without leaving Instagram.</p>
                </div>
              </section>
            </div>
          </div>
          <div class="Polaris-Modal-Footer">
            <div class="Polaris-Modal-Footer__FooterContent">
              <div class="Polaris-Stack Polaris-Stack--alignmentCenter">
                <div class="Polaris-Stack__Item Polaris-Stack__Item--fill"></div>
                <div class="Polaris-Stack__Item">
                  <div class="Polaris-ButtonGroup">
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Learn more</span></span></button></div>
                    <div class="Polaris-ButtonGroup__Item"><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Add Instagram</span></span></button></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-Backdrop"></div>

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます