@snack-uikit/segmented-control 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2025-05-28)
+
+
+### Features
+
+* **PDS-1990:** added xs size for segmented control ([0f8fb0d](https://github.com/cloud-ru-tech/snack-uikit/commit/0f8fb0de09568eb983c685118068870a03ad3f92))
+
+
+
+
+
 # 0.5.0 (2025-05-21)
 
 

package/README.md

@@ -19,7 +19,7 @@ SegmentedControl
 | defaultValue | `IdType` | - | ID выбранного по умолчанию сегмента. (в uncontrolled режиме) |
 | onChange | `(value: Value) => void` | - | Колбек смены выбранного сегмента. |
 | className | `string` | - | CSS-класс контейнера. |
-| size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер компонента. |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | m | Размер компонента. |
 | outline | `boolean` | - | Обводка |
 | width | enum Width: `"auto"`, `"full"` | auto | Управление шириной компонента. |
 | name | `string` | - | Имя поля |

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

@@ -28,6 +28,10 @@
 .container[data-width=full]{
   display:flex;
 }
+.container[data-size=xs]::before{
+  border-width:var(--border-width-segmented-control-single, 1px);
+  border-radius:var(--radius-segmented-control-container-xs, 8px);
+}
 .container[data-size=s]::before{
   border-width:var(--border-width-segmented-control-single, 1px);
   border-radius:var(--radius-segmented-control-container-s, 12px);
@@ -59,6 +63,13 @@
   background-color:var(--sys-neutral-background2-level, #ffffff);
   transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
 }
+.selection[data-size=xs]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
+  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
 .selection[data-size=s]{
   border-radius:var(--radius-segmented-control-segment-s, 10px);
   padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);

package/dist/cjs/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: {
+    readonly XS: "xs";
     readonly S: "s";
     readonly M: "m";
     readonly L: "l";

package/dist/cjs/constants.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.WIDTH = exports.SIZE = void 0;
 exports.SIZE = {
+  XS: 'xs',
   S: 's',
   M: 'm',
   L: 'l'

package/dist/cjs/helperComponents/Segment/Segment.js

@@ -45,7 +45,7 @@ function Segment(_ref) {
     "data-test-id": `section-${value}`,
     "data-active": selected || undefined,
     "data-disabled": disabled || undefined,
-    "data-layout": (0, utils_1.getLayout)(icon, label),
+    "data-layout": (0, utils_1.getLayout)(icon, label, size),
     className: (0, classnames_1.default)(styles_module_scss_1.default.segment),
     onClick: onClick,
     "data-size": size,
@@ -54,7 +54,7 @@ function Segment(_ref) {
     "aria-checked": selected,
     role: 'radio',
     type: 'button',
-    children: [icon && (0, jsx_runtime_1.jsx)("div", {
+    children: [size !== 'xs' && icon && (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_1.default.icon,
       children: icon
     }), label && (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {

package/dist/cjs/helperComponents/Segment/styles.module.css

@@ -29,6 +29,27 @@
   outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
+.segment[data-size=xs][data-layout=label-only]{
+  border-radius:var(--radius-segmented-control-segment-xs, 6px);
+  padding-left:var(--space-segmented-control-segment-xs-from-label, 8px);
+  padding-right:var(--space-segmented-control-segment-xs-from-label, 8px);
+  gap:var(--space-segmented-control-segment-xs-gap, 2px);
+  height:var(--size-segmented-control-segment-xs, 20px);
+}
+.segment[data-size=xs][data-layout=icon-before]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
+  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
+.segment[data-size=xs][data-layout=icon-only]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
+  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
 .segment[data-size=s][data-layout=label-only]{
   border-radius:var(--radius-segmented-control-segment-s, 10px);
   padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
@@ -99,6 +120,14 @@
   align-items:center;
 }
 
+.label[data-size=xs]{
+  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);
+}
 .label[data-size=s]{
   font-family:var(--sans-label-m-font-family, SB Sans Interface);
   font-weight:var(--sans-label-m-font-weight, Semibold);

package/dist/cjs/utils.d.ts

@@ -1,2 +1,2 @@
 import { ReactNode } from 'react';
-export declare const getLayout: (icon?: ReactNode, label?: string) => "icon-before" | "label-only" | "icon-only";
+export declare const getLayout: (icon?: ReactNode, label?: string, size?: string) => "label-only" | "icon-before" | "icon-only";

package/dist/cjs/utils.js

@@ -4,7 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getLayout = void 0;
-const getLayout = (icon, label) => {
+const getLayout = (icon, label, size) => {
+  if (size === 'xs') {
+    return 'label-only';
+  }
   if (icon && label) {
     return 'icon-before';
   }

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

@@ -28,6 +28,10 @@
 .container[data-width=full]{
   display:flex;
 }
+.container[data-size=xs]::before{
+  border-width:var(--border-width-segmented-control-single, 1px);
+  border-radius:var(--radius-segmented-control-container-xs, 8px);
+}
 .container[data-size=s]::before{
   border-width:var(--border-width-segmented-control-single, 1px);
   border-radius:var(--radius-segmented-control-container-s, 12px);
@@ -59,6 +63,13 @@
   background-color:var(--sys-neutral-background2-level, #ffffff);
   transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
 }
+.selection[data-size=xs]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
+  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
 .selection[data-size=s]{
   border-radius:var(--radius-segmented-control-segment-s, 10px);
   padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);

package/dist/esm/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: {
+    readonly XS: "xs";
     readonly S: "s";
     readonly M: "m";
     readonly L: "l";

package/dist/esm/constants.js

@@ -1,4 +1,5 @@
 export const SIZE = {
+    XS: 'xs',
     S: 's',
     M: 'm',
     L: 'l',

package/dist/esm/helperComponents/Segment/Segment.js

@@ -16,6 +16,6 @@ export function Segment({ size, label, value, selected, onClick, disabled, icon,
             onSelectionUpdated(buttonRef.current);
         }
     }, [selected, buttonRef, onSelectionUpdated]);
-    const segment = (_jsxs("button", { ref: buttonRef, "data-test-id": `section-${value}`, "data-active": selected || undefined, "data-disabled": disabled || undefined, "data-layout": getLayout(icon, label), className: cn(styles.segment), onClick: onClick, "data-size": size, disabled: disabled, tabIndex: focusable ? 0 : -1, "aria-checked": selected, role: 'radio', type: 'button', children: [icon && _jsx("div", { className: styles.icon, children: icon }), label && _jsx(TruncateString, { className: styles.label, "data-size": size, text: label })] }));
+    const segment = (_jsxs("button", { ref: buttonRef, "data-test-id": `section-${value}`, "data-active": selected || undefined, "data-disabled": disabled || undefined, "data-layout": getLayout(icon, label, size), className: cn(styles.segment), onClick: onClick, "data-size": size, disabled: disabled, tabIndex: focusable ? 0 : -1, "aria-checked": selected, role: 'radio', type: 'button', children: [size !== 'xs' && icon && _jsx("div", { className: styles.icon, children: icon }), label && _jsx(TruncateString, { className: styles.label, "data-size": size, text: label })] }));
     return renderWrapSegment ? renderWrapSegment(segment) : segment;
 }

package/dist/esm/helperComponents/Segment/styles.module.css

@@ -29,6 +29,27 @@
   outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
+.segment[data-size=xs][data-layout=label-only]{
+  border-radius:var(--radius-segmented-control-segment-xs, 6px);
+  padding-left:var(--space-segmented-control-segment-xs-from-label, 8px);
+  padding-right:var(--space-segmented-control-segment-xs-from-label, 8px);
+  gap:var(--space-segmented-control-segment-xs-gap, 2px);
+  height:var(--size-segmented-control-segment-xs, 20px);
+}
+.segment[data-size=xs][data-layout=icon-before]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
+  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
+.segment[data-size=xs][data-layout=icon-only]{
+  border-radius:var(--radius-segmented-control-segment-s, 10px);
+  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
+  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
+  gap:var(--space-segmented-control-segment-s-gap, 4px);
+  height:var(--size-segmented-control-segment-s, 28px);
+}
 .segment[data-size=s][data-layout=label-only]{
   border-radius:var(--radius-segmented-control-segment-s, 10px);
   padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
@@ -99,6 +120,14 @@
   align-items:center;
 }
 
+.label[data-size=xs]{
+  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);
+}
 .label[data-size=s]{
   font-family:var(--sans-label-m-font-family, SB Sans Interface);
   font-weight:var(--sans-label-m-font-weight, Semibold);

package/dist/esm/utils.d.ts

@@ -1,2 +1,2 @@
 import { ReactNode } from 'react';
-export declare const getLayout: (icon?: ReactNode, label?: string) => "icon-before" | "label-only" | "icon-only";
+export declare const getLayout: (icon?: ReactNode, label?: string, size?: string) => "label-only" | "icon-before" | "icon-only";

package/dist/esm/utils.js

@@ -1,4 +1,7 @@
-export const getLayout = (icon, label) => {
+export const getLayout = (icon, label, size) => {
+    if (size === 'xs') {
+        return 'label-only';
+    }
     if (icon && label) {
         return 'icon-before';
     }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Segmented Control",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,5 +41,5 @@
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "0c8846201ac8f73ec80be3e47418fe073619541a"
+  "gitHead": "c7d15bfb4027c8177ba19f9b55be31d6f7cfcdbb"
 }

package/src/components/styles.module.scss

@@ -1,6 +1,6 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-segmentedControl';
 
-$sizes: 's', 'm', 'l';
+$sizes: 'xs', 's', 'm', 'l';
 
 .container {
   @include styles-tokens-segmentedControl.composite-var(styles-tokens-segmentedControl.$segmented-control-container);
@@ -40,7 +40,11 @@ $sizes: 's', 'm', 'l';
 
   @each $size in $sizes {
     &[data-size='#{$size}']::before {
-      @include styles-tokens-segmentedControl.composite-var(styles-tokens-segmentedControl.$segmented-control, 'background', $size);
+      @include styles-tokens-segmentedControl.composite-var(
+        styles-tokens-segmentedControl.$segmented-control,
+        'background',
+        $size
+      );
     }
   }
 }
@@ -67,11 +71,18 @@ $sizes: 's', 'm', 'l';
 
   background-color: styles-tokens-segmentedControl.$sys-neutral-background2-level;
 
-  transition: left 0.15s ease-in-out, width 0.15s ease-in-out;
+  transition:
+    left 0.15s ease-in-out,
+    width 0.15s ease-in-out;
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include styles-tokens-segmentedControl.composite-var(styles-tokens-segmentedControl.$segmented-control, 'segment', $size, 'icon-only');
+      @include styles-tokens-segmentedControl.composite-var(
+        styles-tokens-segmentedControl.$segmented-control,
+        'segment',
+        $size,
+        'icon-only'
+      );
     }
   }
-}
+}

package/src/constants.ts

@@ -1,4 +1,5 @@
 export const SIZE = {
+  XS: 'xs',
   S: 's',
   M: 'm',
   L: 'l',

package/src/helperComponents/Segment/Segment.tsx

@@ -49,7 +49,7 @@ export function Segment({
       data-test-id={`section-${value}`}
       data-active={selected || undefined}
       data-disabled={disabled || undefined}
-      data-layout={getLayout(icon, label)}
+      data-layout={getLayout(icon, label, size)}
       className={cn(styles.segment)}
       onClick={onClick}
       data-size={size}
@@ -59,7 +59,7 @@ export function Segment({
       role='radio'
       type='button'
     >
-      {icon && <div className={styles.icon}>{icon}</div>}
+      {size !== 'xs' && icon && <div className={styles.icon}>{icon}</div>}
       {label && <TruncateString className={styles.label} data-size={size} text={label} />}
     </button>
   );

package/src/helperComponents/Segment/styles.module.scss

@@ -1,9 +1,10 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-segmentedControl';
-@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
-$sizes: 's', 'm', 'l';
+$sizes: 'xs', 's', 'm', 'l';
 $layouts: 'label-only', 'icon-before', 'icon-only';
 $typographies: (
+  'xs': styles-tokens-segmentedControl.$sans-label-m,
   's': styles-tokens-segmentedControl.$sans-label-m,
   'm': styles-tokens-segmentedControl.$sans-label-m,
   'l': styles-tokens-segmentedControl.$sans-label-l,
@@ -29,7 +30,8 @@ $typographies: (
     color: styles-tokens-segmentedControl.$sys-neutral-text-main;
   }
 
-  &[data-disabled], &[data-disabled]:hover {
+  &[data-disabled],
+  &[data-disabled]:hover {
     cursor: not-allowed;
     color: styles-tokens-segmentedControl.$sys-neutral-text-disabled;
   }
@@ -37,7 +39,8 @@ $typographies: (
   &[data-active] {
     color: styles-tokens-segmentedControl.$sys-neutral-text-main;
 
-    &[data-disabled], &[data-disabled]:hover {
+    &[data-disabled],
+    &[data-disabled]:hover {
       color: styles-tokens-segmentedControl.$sys-neutral-text-disabled;
     }
   }
@@ -45,14 +48,21 @@ $typographies: (
   &:focus-visible {
     @include styles-tokens-segmentedControl.outline-inside-var(styles-tokens-element.$container-focused-s);
 
-    outline-color: styles-tokens-segmentedControl.simple-var(styles-tokens-segmentedControl.$sys-available-complementary);
+    outline-color: styles-tokens-segmentedControl.simple-var(
+      styles-tokens-segmentedControl.$sys-available-complementary
+    );
   }
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
       @each $layout in $layouts {
         &[data-layout='#{$layout}'] {
-          @include styles-tokens-segmentedControl.composite-var(styles-tokens-segmentedControl.$segmented-control, 'segment', $size, $layout);
+          @include styles-tokens-segmentedControl.composite-var(
+            styles-tokens-segmentedControl.$segmented-control,
+            'segment',
+            $size,
+            $layout
+          );
         }
       }
     }

package/src/utils.ts

@@ -1,6 +1,10 @@
 import { ReactNode } from 'react';
 
-export const getLayout = (icon?: ReactNode, label?: string) => {
+export const getLayout = (icon?: ReactNode, label?: string, size?: string) => {
+  if (size === 'xs') {
+    return 'label-only';
+  }
+
   if (icon && label) {
     return 'icon-before';
   }