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

package/dist/esm/components/styles.module.css

@@ -1,221 +0,0 @@
-.buttonComboWrapper{
-  display:inline-flex;
-  align-items:center;
-}
-.buttonComboWrapper[data-full-width]{
-  flex-grow:1;
-  flex-shrink:1;
-  width:100%;
-}
-.buttonComboWrapper button[data-type=option]{
-  border-right:var(--border-width-button-combo-divider, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
-}
-.buttonComboWrapper button[data-type=option][data-size=xs]{
-  height:var(--size-button-xs, 24px);
-  border-top-left-radius:var(--radius-button-xs, 8px);
-  border-bottom-left-radius:var(--radius-button-xs, 8px);
-  padding-right:var(--space-button-xs-from-label, 8px);
-  padding-left:var(--space-button-xs-from-label, 8px);
-  border-right-width:var(--border-width-button-combo-divider, 1px);
-}
-.buttonComboWrapper button[data-type=option][data-size=s]{
-  height:var(--size-button-s, 32px);
-  border-top-left-radius:var(--radius-button-s, 12px);
-  border-bottom-left-radius:var(--radius-button-s, 12px);
-  padding-right:var(--space-button-s-from-label, 16px);
-  padding-left:var(--space-button-s-from-label, 16px);
-  border-right-width:var(--border-width-button-combo-divider, 1px);
-}
-.buttonComboWrapper button[data-type=option][data-size=m]{
-  height:var(--size-button-m, 40px);
-  border-top-left-radius:var(--radius-button-m, 14px);
-  border-bottom-left-radius:var(--radius-button-m, 14px);
-  padding-right:var(--space-button-m-from-label, 24px);
-  padding-left:var(--space-button-m-from-label, 24px);
-  border-right-width:var(--border-width-button-combo-divider, 1px);
-}
-.buttonComboWrapper button[data-type=option][data-size=l]{
-  height:var(--size-button-l, 48px);
-  border-top-left-radius:var(--radius-button-l, 16px);
-  border-bottom-left-radius:var(--radius-button-l, 16px);
-  padding-right:var(--space-button-l-from-label, 32px);
-  padding-left:var(--space-button-l-from-label, 32px);
-  border-right-width:var(--border-width-button-combo-divider, 1px);
-}
-.buttonComboWrapper button[data-type=dropdown][data-size=xs]{
-  border-top-right-radius:var(--radius-button-xs, 8px);
-  border-bottom-right-radius:var(--radius-button-xs, 8px);
-  width:var(--size-button-xs, 24px);
-  height:var(--size-button-xs, 24px);
-}
-.buttonComboWrapper button[data-type=dropdown][data-size=s]{
-  border-top-right-radius:var(--radius-button-s, 12px);
-  border-bottom-right-radius:var(--radius-button-s, 12px);
-  width:var(--size-button-s, 32px);
-  height:var(--size-button-s, 32px);
-}
-.buttonComboWrapper button[data-type=dropdown][data-size=m]{
-  border-top-right-radius:var(--radius-button-m, 14px);
-  border-bottom-right-radius:var(--radius-button-m, 14px);
-  width:var(--size-button-m, 40px);
-  height:var(--size-button-m, 40px);
-}
-.buttonComboWrapper button[data-type=dropdown][data-size=l]{
-  border-top-right-radius:var(--radius-button-l, 16px);
-  border-bottom-right-radius:var(--radius-button-l, 16px);
-  width:var(--size-button-l, 48px);
-  height:var(--size-button-l, 48px);
-}
-.buttonComboWrapper button[data-size=xs] .label{
-  font-family:var(--sans-label-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-s-font-weight, Semibold);
-  line-height:var(--sans-label-s-line-height, 14px);
-  font-size:var(--sans-label-s-font-size, 11px);
-  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
-}
-.buttonComboWrapper button[data-size=xs] .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=xs] .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=s] .label{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-.buttonComboWrapper button[data-size=s] .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=s] .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=m] .label{
-  font-family:var(--sans-label-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-l-font-weight, Semibold);
-  line-height:var(--sans-label-l-line-height, 20px);
-  font-size:var(--sans-label-l-font-size, 14px);
-  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
-}
-.buttonComboWrapper button[data-size=m] .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=m] .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=l] .label{
-  font-family:var(--sans-label-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-l-font-weight, Semibold);
-  line-height:var(--sans-label-l-line-height, 20px);
-  font-size:var(--sans-label-l-font-size, 14px);
-  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
-}
-.buttonComboWrapper button[data-size=l] .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=l] .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-loading][data-variant=label-only] .icon{
-  position:absolute;
-  top:50%;
-  left:50%;
-  transform:translate(-50%, -50%);
-}
-.buttonComboWrapper button[data-loading][data-variant=label-only] .label{
-  opacity:var(--opacity-a0, 0);
-}
-.buttonComboWrapper button[data-appearance=primary]{
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.buttonComboWrapper button[data-appearance=primary] .label{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.buttonComboWrapper button[data-appearance=primary] .icon{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-@media (hover: hover){
-  .buttonComboWrapper button[data-appearance=primary]:hover{
-    background-color:var(--sys-primary-accent-hovered, #6851a6);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:hover .label{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:hover .icon{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-}
-@media (hover: none) or (hover: hover){
-  .buttonComboWrapper button[data-appearance=primary]:focus-visible{
-    background-color:var(--sys-primary-accent-hovered, #6851a6);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:focus-visible .label{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:focus-visible .icon{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:active{
-    background-color:var(--sys-primary-accent-pressed, #5b4796);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:active .label{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:active .icon{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary][data-loading]{
-    background-color:var(--sys-primary-accent-pressed, #5b4796);
-  }
-  .buttonComboWrapper button[data-appearance=primary][data-loading] .label{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary][data-loading] .icon{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:disabled, .buttonComboWrapper button[data-appearance=primary][data-disabled]{
-    background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:disabled .label, .buttonComboWrapper button[data-appearance=primary][data-disabled] .label{
-    color:var(--sys-neutral-text-light, #8b8e9b);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:disabled .icon, .buttonComboWrapper button[data-appearance=primary][data-disabled] .icon{
-    color:var(--sys-neutral-text-light, #8b8e9b);
-  }
-}
-.buttonComboWrapper button[data-appearance=primary]:focus-visible{
-  z-index:1;
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.buttonComboWrapper button:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  outline-offset:var(--spacing-state-focus-offset, 2px);
-}

package/dist/esm/components/utils.d.ts

@@ -1,3 +0,0 @@
-import { Item } from '../types';
-export declare function extractDroplistItemProps(props: Item): Item;
-export declare function extractButtonActionsProps(props: Item): Item;

package/src/components/ButtonCombo.tsx

@@ -1,105 +0,0 @@
-import cn from 'classnames';
-import { forwardRef, useCallback, useMemo, useState } from 'react';
-
-import { ButtonPrivate, extractCommonButtonProps, HTML_TYPE, SIZE } from '@snack-uikit/button-private';
-import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
-import { Droplist, ItemId } from '@snack-uikit/list';
-import { extractSupportProps, useLayoutEffect, WithSupportProps } from '@snack-uikit/utils';
-
-import { DROPLIST_SIZE_MAP } from '../constants';
-import { BaseButtonComboProps, Item } from '../types';
-import styles from './styles.module.scss';
-import { extractButtonActionsProps, extractDroplistItemProps } from './utils';
-
-export type ButtonComboProps = WithSupportProps<BaseButtonComboProps>;
-
-export const ButtonCombo = forwardRef<HTMLDivElement, ButtonComboProps>(
-  (
-    {
-      size = SIZE.S,
-      type = HTML_TYPE.Button,
-      defaultLabel = '',
-      className,
-      dropdownClassName,
-      defaultValue,
-      items,
-      tabIndex,
-      fullWidth,
-      ...rest
-    },
-    ref,
-  ) => {
-    const [open, setOpen] = useState<boolean>(false);
-    const [activeOption, setActiveOption] = useState<Item>({});
-
-    const droplistItems = useMemo(
-      () => items.map(extractDroplistItemProps).map(item => ({ ...item, id: item?.id, content: item?.label })),
-      [items],
-    );
-
-    const handleSelectionChange = useCallback(
-      (value: ItemId) => {
-        if (value) {
-          const option = items.find(item => item?.id === value);
-
-          option && setActiveOption(option);
-        }
-      },
-      [items],
-    );
-
-    useLayoutEffect(() => {
-      if (defaultValue) {
-        handleSelectionChange(defaultValue);
-      }
-    }, [defaultValue, handleSelectionChange]);
-
-    return (
-      <div
-        {...extractSupportProps(rest)}
-        ref={ref}
-        className={cn(styles.buttonComboWrapper, className)}
-        tabIndex={tabIndex}
-        data-full-width={fullWidth || undefined}
-      >
-        <ButtonPrivate
-          {...extractCommonButtonProps(rest)}
-          {...extractButtonActionsProps(activeOption)}
-          data-type='option'
-          size={size}
-          label={activeOption?.label ?? defaultLabel}
-          type={type}
-          fullWidth={fullWidth}
-          iconClassName={styles.icon}
-          labelClassName={styles.label}
-          data-test-id='button-combo__option'
-        />
-        <Droplist
-          items={droplistItems}
-          open={open}
-          onOpenChange={setOpen}
-          selection={{
-            defaultValue,
-            mode: 'single',
-            onChange: handleSelectionChange,
-          }}
-          className={dropdownClassName}
-          size={DROPLIST_SIZE_MAP[size]}
-          placement='bottom-end'
-          closeDroplistOnItemClick
-          data-test-id='button-combo__dropdown'
-        >
-          <ButtonPrivate
-            {...extractCommonButtonProps(rest)}
-            data-type='dropdown'
-            size={size}
-            iconClassName={styles.icon}
-            labelClassName={styles.label}
-            icon={open ? <ChevronUpSVG /> : <ChevronDownSVG />}
-            data-test-id='button-combo__dropdown-button'
-          />
-        </Droplist>
-      </div>
-    );
-  },
-);

package/src/components/index.ts

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

package/src/components/styles.module.scss

@@ -1,114 +0,0 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFilled';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonCombo';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
-@use '../styles.module';
-
-$appearances: 'primary';
-$sizes: 'xs', 's', 'm', 'l';
-$typography: (
-  'xs': styles-tokens-button-buttonFilled.$sans-label-s,
-  's': styles-tokens-button-buttonFilled.$sans-label-m,
-  'm': styles-tokens-button-buttonFilled.$sans-label-l,
-  'l': styles-tokens-button-buttonFilled.$sans-label-l,
-);
-
-@mixin button-colors-styles {
-  @each $appearance in $appearances {
-    &[data-appearance='#{$appearance}'] {
-      @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-      @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-
-      background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-default');
-
-      @media (hover: hover) {
-        &:hover {
-          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-
-          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-hovered');
-        }
-      }
-
-      @media (hover: none) or (hover: hover) {
-        &:focus-visible {
-          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-
-          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-hovered');
-        }
-
-        &:active {
-          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-
-          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-pressed');
-        }
-
-        &[data-loading] {
-          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
-
-          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-pressed');
-        }
-
-        &:disabled,
-        &[data-disabled] {
-          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', 'neutral', 'text-light'));
-          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', 'neutral', 'text-light'));
-
-          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', 'neutral', 'decor-disabled');
-        }
-      }
-    }
-  }
-}
-
-@mixin button-outline-colors-styles {
-  @each $appearance in $appearances {
-    &[data-appearance='#{$appearance}'] {
-      &:focus-visible {
-        /* stylelint-disable-next-line declaration-property-value-allowed-list */
-        z-index: 1;
-        outline-color: styles-tokens-button-buttonFilled.$sys-available-complementary;
-      }
-    }
-  }
-}
-
-.buttonComboWrapper {
-  display: inline-flex;
-  align-items: center;
-
-  &[data-full-width] {
-    flex-grow: 1;
-    flex-shrink: 1;
-    width: 100%;
-  }
-
-  button {
-    &[data-type='option'] {
-      @each $size in $sizes {
-        &[data-size='#{$size}'] {
-          @include styles-tokens-element.composite-var(styles-tokens-button-buttonCombo.$button-combo, 'container', $size, 'option');
-        }
-      }
-
-      border-right: styles-theme-variables.$border-width-button-combo-divider solid
-        styles-theme-variables.$sys-neutral-decor-default;
-    }
-    &[data-type='dropdown'] {
-      @each $size in $sizes {
-        &[data-size='#{$size}'] {
-          @include styles-tokens-element.composite-var(styles-tokens-button-buttonCombo.$button-combo, 'container', $size, 'dropdown');
-        }
-      }
-    }
-
-    @include styles.button-anatomy-styles(styles-tokens-button-buttonFilled.$button-filled, $sizes, [], $typography);
-    @include styles.loading-label-only(styles-tokens-button-buttonFilled.$button-filled);
-    @include button-colors-styles;
-    @include button-outline-colors-styles;
-    @include styles.button-common-state;
-  }
-}

package/src/components/utils.ts

@@ -1,25 +0,0 @@
-import { Item } from '../types';
-
-export function extractDroplistItemProps(props: Item): Item {
-  return Object.keys(props)
-    .filter(item => !item.startsWith('on'))
-    .reduce(
-      (nextProps, prop) => ({
-        ...nextProps,
-        [prop]: props[prop as unknown as keyof Item],
-      }),
-      {},
-    );
-}
-
-export function extractButtonActionsProps(props: Item): Item {
-  return Object.keys(props)
-    .filter(item => item.startsWith('on'))
-    .reduce(
-      (nextProps, prop) => ({
-        ...nextProps,
-        [prop]: props[prop as unknown as keyof Item],
-      }),
-      {},
-    );
-}