How to set spacing and/or padding on Shopify Polaris ButtonGroup

Question

I've checked the documentation and there is a prop called "spacing" for the ButtonGroup component in Shopify Polaris. It has "spacing" listed as the type to pass in (compared to boolean, text, etc.). I've tried passing in:

"1px"
{1}
{"1px"}
{"1"}

But none of these values change the spacing. I can't find any "spacing" type other than the css attribute for text-spacing which would have accepted pixels at the very least.

Regardless of spacing, the real issue is that the Polaris ButtonGroup component changes the height of the title/heading of the IndexTable (toggles when a checkbox is selected).

If it is helpful, here is the code that sets up the functionality for this.

 <IndexTable
            resourceName={resourceName}
            itemCount={QRCodes.length}
            selectedItemsCount={
              allResourcesSelected ? "ALL" : selectedResources.length
            }
            onSelectionChange={handleSelectionChange}
            headings={
              selectedResources.length > 0
                ? [
                    {
                      title: (
                        <ButtonGroup spacing="1px">
                          {" "}
                          <Button>Cancel</Button>
                          <Button>Save</Button>
                        </ButtonGroup>
                      ),
                    },
                  ]
                : [
                    { title: "Title" },
                    { title: "Status" },
                    { title: "Date created" },
                  ]
            }
            loading={loading}
          >
            {rowMarkup}
          </IndexTable>

If you go to the list of products on Shopify, it does not do this. Any ideas?

score 0 · Answer 1 · answered Jul 16 '22 at 20:49

This answers the overall issue of providing bulk action items but the spacing specifically has yet to be discovered. There is a prop in TableIndex called bulkActions that is supposed to be used rather than creating a conditional like I had in my code.

<IndexTable
            resourceName={resourceName}
            itemCount={QRCodes.length}
            selectedItemsCount={
              allResourcesSelected ? "ALL" : selectedResources.length
            }
            bulkActions={[
              {
                content: "Import file",
                onAction: handleImportedAction,
              },
              {
                content: "Export file",
                onAction: handleExportedAction,
              },
            ]}
            onSelectionChange={handleSelectionChange}
            headings={[
              { title: "Title" },
              { title: "Status" },
              { title: "Date created" },
            ]}
            loading={loading}
          >
            {rowMarkup}
          </IndexTable>

This fixes my issue, although I am still curious as to how you would set spacing in the button group if anyone knows the answer. Hopefully someone finds this useful if they run into the same issue.

How to set spacing and/or padding on Shopify Polaris ButtonGroup

1 Answers1