Sticky header for PageShell

[zoubingwu]

Here is a case that we want to just use fixed header and not passing children to PageShell:

https://github.com/tidbcloud/dbaas-ui/blob/728fa1f13ac07e4e9f9835677aefbb0ddbbca8f8/src/dbaas/screens/OrgSettings/features/Billing/Billing.tsx#L43

const HistoryShell: React.FC<{}> = ({ children }) => {
  const history = useHistory()
  return (
    <Box>
      <PageShell
        headerProps={{
          withBack: true,
          onBackClick: () => {
            history.push('/console/org-settings/billing')
          }
        }}
        bodyProps={{
          pb: 0
        }}
        title="History"
      ></PageShell>
      {children}
    </Box>
  )
}

this is resolved by making children props optional, see #179

we might need a props to make header sticky when scrolling.

[zoubingwu]

checked the code and found this is already supported but we need to mention it in the doc or storybook