v9.0.0

Breaking Changes

• Tabs content no longer have any padding
• Asset input have built-in file input and no longer requires useFileInput

How to migrate

Tab Componenent

The Tab Content padding has been removed in this update. To migrate your inner-content requires an additional 12px padding on all sides

Before

<Tabs {...args}>
  {data.map((item) => (
    <TabItem id={item.id} key={item.id} label={item.label}>
      <div>{item.children}</div>
    </TabItem>
  ))}
</Tabs>

After

<Tabs {...args}>
  {data.map((item) => (
    <TabItem id={item.id} key={item.id} label={item.label}>
      <div classname="tw-p-3">{item.children}</div>
    </TabItem>
  ))}
</Tabs>

Asset Input Componenent

A file input has been added internally to the component, which will trigger onUploadClick when files have been selected in the dialog, passing the selected files as the first argument. Previously the opening of the file input was handled externally.

Before

// Hook from @frontify/app-bridge which creates a file input and simulates a click event. 
const [openFileDialog, {selectedFiles}] = useFileInput();
// Hook from @frontify/app-bridge which uploads files to Frontify. 
const [uploadFiles] = useFileUpload();

useEffect(()=>{
  uploadFiles(selectedFiles)
},[selectedFiles])

<AssetInput onUploadClick={openFileDialog}>

After

// Hook from @frontify/app-bridge which uploads files to Frontify. 
const [uploadFiles] = useFileUpload();

<AssetInput onUploadClick={uploadFiles}>

Features

• feat(Tooltip):add array and icon color by @SamCreasey in #740

Fixes

• fix!: remove tab content padding by @SamCreasey in #782
• refactor(AssetInput)!: replace useFileInput hook with file input by @NadiaPosch in #783
• fix(Tabs): fix overflow scroll by @SamCreasey in #781
• chore: inline peerDependencies by @SamuelAlev in #784

Full Changelog: v8.1.2...v9.0.0