@snack-uikit/button-combo 0.0.1-preview-a2f98ef7.0

package/src/constants.ts

@@ -0,0 +1,9 @@
+import { SIZE, Size } from '@snack-uikit/button-private';
+import { DroplistProps } from '@snack-uikit/list';
+
+export const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']> = {
+  [SIZE.Xs]: 's',
+  [SIZE.S]: 's',
+  [SIZE.M]: 'm',
+  [SIZE.L]: 'l',
+};

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/styles.module.scss

@@ -0,0 +1,79 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+@mixin icon-fill($color) {
+  .icon {
+    color: $color;
+  }
+}
+
+@mixin label-color($color) {
+  .label {
+    color: $color;
+  }
+}
+
+@mixin icon-size($icon-sizes, $size) {
+  .icon {
+    display: inline-flex;
+
+    svg {
+      width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+      height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    }
+  }
+}
+
+@mixin button-anatomy-styles($button-theme, $sizes, $variants, $typography, $hasLabel: true) {
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @if $hasLabel == true {
+        .label {
+          @include styles-tokens-element.composite-var($typography, $size);
+        }
+      }
+
+      .icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+
+        width: styles-tokens-element.$icon-s;
+        height: styles-tokens-element.$icon-s;
+
+        svg {
+          max-width: styles-tokens-element.$icon-s;
+          max-height: styles-tokens-element.$icon-s;
+        }
+      }
+
+      @each $variant in $variants {
+        &[data-variant='#{$variant}'] {
+          @include styles-tokens-element.composite-var($button-theme, 'container', $size, $variant);
+        }
+      }
+    }
+  }
+}
+
+@mixin loading-label-only($button-theme) {
+  &[data-loading][data-variant='label-only'] {
+    .icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .label {
+      @include styles-tokens-element.composite-var($button-theme, 'label', 'load-label-only');
+    }
+  }
+}
+
+@mixin button-common-state {
+  &:focus-visible {
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
+
+    outline-offset: styles-tokens-element.$spacing-state-focus-offset;
+  }
+}

package/src/types.ts

@@ -0,0 +1,21 @@
+import { BaseButtonProps } from '@snack-uikit/button-private';
+import { BaseItemProps } from '@snack-uikit/list';
+
+export type Item = BaseItemProps & {
+  /** Название */
+  label?: string;
+};
+
+export type BaseButtonComboProps = Pick<
+  BaseButtonProps,
+  'className' | 'disabled' | 'loading' | 'size' | 'type' | 'tabIndex' | 'fullWidth'
+> & {
+  /** CSS-класс Dropdown */
+  dropdownClassName?: string;
+  /** Начальное состояние */
+  defaultValue?: string;
+  /** Начальное состояние лейбла */
+  defaultLabel?: string;
+  /** Основные элементы списка */
+  items: Item[];
+};