feat(control): add SControlButtonGroup component

lib/components/SControlButtonGroup.vue

@@ -0,0 +1,27 @@
+<template>
+ <div class="SControlButtonGroup">
+ <slot />
+ </div>
+</template>
+
+<style scoped lang="postcss">
+.SControlButtonGroup :deep(.SControlButton) {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+
+ .SButton {
+ border-left-width: 0;
+ border-radius: 0;
+ }
+
+ &:first-child .SButton {
+ border-left-width: 1px;
+ border-radius: 6px 0 0 6px;
+ }
+
+ &:last-child .SButton {
+ border-radius: 0 6px 6px 0;
+ }
+}
+</style>

stories/components/SCard.01_Playground.story.vue

@@ -8,6 +8,7 @@ import SControlActionBar from 'sefirot/components/SControlActionBar.vue'
 import SControlActionBarButton from 'sefirot/components/SControlActionBarButton.vue'
 import SControlActionBarCollapse from 'sefirot/components/SControlActionBarCollapse.vue'
 import SControlButton from 'sefirot/components/SControlButton.vue'
+import SControlButtonGroup from 'sefirot/components/SControlButtonGroup.vue'
 import SControlLeft from 'sefirot/components/SControlLeft.vue'
 import SControlRight from 'sefirot/components/SControlRight.vue'
 import SControlText from 'sefirot/components/SControlText.vue'
@@ -70,6 +71,10 @@ function state() {
  <SCardBlock size="large" class="s-px-24">
  <SControl>
  <SControlRight>
+ <SControlButtonGroup>
+ <SControlButton label="Prev" />
+ <SControlButton label="Next" />
+ </SControlButtonGroup>
  <SControlButton label="Cancel" />
  <SControlButton mode="info" label="Submit" />
  </SControlRight>