feat(control): add "Action Bar" type support

kiaking commented 8 months ago

Add "Action Bar" type component support for <SControl>. Inspired by GitHub Primer: ActionBar.

We need this since ordinary <SControlButton> will get gap between buttons (which it should), but these Action Bar buttons that only contains icon should not have gap in between.

In the future, we could have generic <SActionBar> that can be used outside of <SControl> too, but for now, until we get solid use case for that, I'm scoping it under to <SControl>.

It adds following components that can be used inside <SControl>.

<SControlActionBar>
<SControlActionBarButton> - Generic button component.
<SControlActionBarClose> - Shorthand for close (X) button.
<SControlActionBarCollapse> - Shorthand for collapse button.

<SCard :mode="state.cardMode">
  <SCardBlock size="small" class="s-pl-24 s-pr-8">
    <SControl>
      <SControlLeft>
        <SControlText class="s-font-w-500">
          Header title
        </SControlText>
      </SControlLeft>
      <SControlRight>
        <SControlActionBar>
          <SControlActionBarCollapse />
        </SControlActionBar>
      </SControlRight>
    </SControl>
  </SCardBlock>
  ...
</SCard>

netlify[bot] commented 8 months ago

Deploy Preview for sefirot-story ready!

Name	Link
Latest commit	e63d74829e7ec47b9249dedb9e7e592f876582ce
Latest deploy log	https://app.netlify.com/sites/sefirot-story/deploys/65c040585778640008237494
Deploy Preview	https://deploy-preview-464--sefirot-story.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 8 months ago

Deploy Preview for sefirot-docs ready!

Name	Link
Latest commit	e63d74829e7ec47b9249dedb9e7e592f876582ce
Latest deploy log	https://app.netlify.com/sites/sefirot-docs/deploys/65c04058781d5a000833bf82
Deploy Preview	https://deploy-preview-464--sefirot-docs.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

globalbrain / sefirot