@snack-uikit/tag 0.7.5 → 0.8.1-preview-3bc93fc3.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.8.0 (2024-02-23)
+
+
+### Features
+
+* **FF-4221:** add tabIndex prop ([e087f40](https://github.com/cloud-ru-tech/snack-uikit/commit/e087f401caefb2731e9e7fa6a03e4599d337cfb1))
+
+
+
+
+
 ## 0.7.5 (2024-02-22)
 
 ### Only dependencies have been changed

package/README.md

@@ -16,6 +16,7 @@
 | appearance | enum Appearance: `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | neutral | Внешний вид |
 | onDelete | `MouseEventHandler<HTMLButtonElement>` | - | Коллбэк на удаление |
 | className | `string` | - | CSS-класс |
+| tabIndex | `number` | - | tabIndex кнопки удаления |
 ## TagRow
 ### Props
 | name | type | default value | description |

package/dist/components/Tag/Tag.d.ts

@@ -13,6 +13,8 @@ export type TagProps = WithSupportProps<{
     onDelete?: MouseEventHandler<HTMLButtonElement>;
     /** CSS-класс */
     className?: string;
+    /** tabIndex кнопки удаления */
+    tabIndex?: number;
 }>;
-export declare function Tag({ label, size, appearance, onDelete, className, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tag({ label, size, appearance, onDelete, className, tabIndex, ...rest }: TagProps): import("react/jsx-runtime").JSX.Element;
 export { APPEARANCE };

package/dist/components/Tag/Tag.js

@@ -17,7 +17,7 @@ import { APPEARANCE, SIZE } from '../../constants';
 import { ICON_SIZE } from './constants';
 import styles from './styles.module.css';
 export function Tag(_a) {
-    var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className } = _a, rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className"]);
-    return (_jsxs("span", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, "data-removable": Boolean(onDelete), children: [_jsx("span", { className: styles.label, children: label }), onDelete && (_jsx("button", { type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button', children: size === SIZE.Xs ? (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) : (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) }))] })));
+    var { label, size = SIZE.Xs, appearance = APPEARANCE.Neutral, onDelete, className, tabIndex } = _a, rest = __rest(_a, ["label", "size", "appearance", "onDelete", "className", "tabIndex"]);
+    return (_jsxs("span", Object.assign({}, extractSupportProps(rest), { className: cn(styles.tag, className), "data-size": size, "data-appearance": appearance, "data-removable": Boolean(onDelete), children: [_jsx("span", { className: styles.label, children: label }), onDelete && (_jsx("button", { type: 'button', className: styles.tagButton, onClick: onDelete, "data-test-id": 'tag-remove-button', tabIndex: tabIndex, children: size === SIZE.Xs ? (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) : (_jsx(CrossSVG, { size: ICON_SIZE[size], className: styles.icon })) }))] })));
 }
 export { APPEARANCE };

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

@@ -82,9 +82,6 @@
 .tag[data-appearance=neutral]{
   background-color:var(--sys-neutral-decor-default, #dfe2ec);
 }
-.tag[data-appearance=neutral][data-removable=false]{
-  background-color:var(--sys-neutral-decor-disabled, #e8eaf1);
-}
 .tag[data-appearance=neutral] .label{
   color:var(--sys-neutral-text-support, #656771);
 }
@@ -103,9 +100,6 @@
 .tag[data-appearance=primary]{
   background-color:var(--sys-primary-decor-default, #ebdefd);
 }
-.tag[data-appearance=primary][data-removable=false]{
-  background-color:var(--sys-primary-decor-disabled, #f0e7fd);
-}
 .tag[data-appearance=primary] .label{
   color:var(--sys-primary-text-support, #5b4796);
 }
@@ -124,9 +118,6 @@
 .tag[data-appearance=red]{
   background-color:var(--sys-red-decor-default, #fdd6cd);
 }
-.tag[data-appearance=red][data-removable=false]{
-  background-color:var(--sys-red-decor-disabled, #fce2dc);
-}
 .tag[data-appearance=red] .label{
   color:var(--sys-red-text-support, #ab423e);
 }
@@ -145,9 +136,6 @@
 .tag[data-appearance=orange]{
   background-color:var(--sys-orange-decor-default, #fed8b8);
 }
-.tag[data-appearance=orange][data-removable=false]{
-  background-color:var(--sys-orange-decor-disabled, #ffe4c8);
-}
 .tag[data-appearance=orange] .label{
   color:var(--sys-orange-text-support, #c06735);
 }
@@ -166,9 +154,6 @@
 .tag[data-appearance=yellow]{
   background-color:var(--sys-yellow-decor-default, #f0dfb1);
 }
-.tag[data-appearance=yellow][data-removable=false]{
-  background-color:var(--sys-yellow-decor-disabled, #f7ebc7);
-}
 .tag[data-appearance=yellow] .label{
   color:var(--sys-yellow-text-support, #a57b0e);
 }
@@ -187,9 +172,6 @@
 .tag[data-appearance=green]{
   background-color:var(--sys-green-decor-default, #d2ead0);
 }
-.tag[data-appearance=green][data-removable=false]{
-  background-color:var(--sys-green-decor-disabled, #e0f0de);
-}
 .tag[data-appearance=green] .label{
   color:var(--sys-green-text-support, #568a56);
 }
@@ -208,9 +190,6 @@
 .tag[data-appearance=blue]{
   background-color:var(--sys-blue-decor-default, #d6e2f4);
 }
-.tag[data-appearance=blue][data-removable=false]{
-  background-color:var(--sys-blue-decor-disabled, #e3edfa);
-}
 .tag[data-appearance=blue] .label{
   color:var(--sys-blue-text-support, #4975a9);
 }
@@ -229,9 +208,6 @@
 .tag[data-appearance=violet]{
   background-color:var(--sys-violet-decor-default, #efd9ef);
 }
-.tag[data-appearance=violet][data-removable=false]{
-  background-color:var(--sys-violet-decor-disabled, #f8e6f7);
-}
 .tag[data-appearance=violet] .label{
   color:var(--sys-violet-text-support, #8c5d93);
 }
@@ -250,9 +226,6 @@
 .tag[data-appearance=pink]{
   background-color:var(--sys-pink-decor-default, #f5d9e1);
 }
-.tag[data-appearance=pink][data-removable=false]{
-  background-color:var(--sys-pink-decor-disabled, #fbe6ec);
-}
 .tag[data-appearance=pink] .label{
   color:var(--sys-pink-text-support, #aa597d);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tag",
-  "version": "0.7.5",
+  "version": "0.8.1-preview-3bc93fc3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,5 +38,5 @@
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "6aa9d988eebb76712315def67343b8b2e4cd268c"
+  "gitHead": "a2fa7717157c8a23fa1fc6b64c67c7b2d9dfc39c"
 }

package/src/components/Tag/Tag.tsx

@@ -20,6 +20,8 @@ export type TagProps = WithSupportProps<{
   onDelete?: MouseEventHandler<HTMLButtonElement>;
   /** CSS-класс */
   className?: string;
+  /** tabIndex кнопки удаления */
+  tabIndex?: number;
 }>;
 
 export function Tag({
@@ -28,6 +30,7 @@ export function Tag({
   appearance = APPEARANCE.Neutral,
   onDelete,
   className,
+  tabIndex,
   ...rest
 }: TagProps) {
   return (
@@ -40,7 +43,13 @@ export function Tag({
     >
       <span className={styles.label}>{label}</span>
       {onDelete && (
-        <button type='button' className={styles.tagButton} onClick={onDelete} data-test-id='tag-remove-button'>
+        <button
+          type='button'
+          className={styles.tagButton}
+          onClick={onDelete}
+          data-test-id='tag-remove-button'
+          tabIndex={tabIndex}
+        >
           {size === SIZE.Xs ? (
             <CrossSVG size={ICON_SIZE[size]} className={styles.icon} />
           ) : (

package/src/components/Tag/styles.module.scss

@@ -4,7 +4,7 @@
 $sizes: 'xs', 's';
 $label-typography: (
   'xs': $sans-label-s,
-  's': $sans-label-m
+  's': $sans-label-m,
 );
 $appearances: (
   'neutral': (
@@ -124,10 +124,10 @@ $appearances: (
   }
 
   @each $size in $sizes {
-    &[data-size=#{$size}] {
+    &[data-size='#{$size}'] {
       @include composite-var($tag, 'container', $size, 'label-only');
 
-      &[data-removable="true"] {
+      &[data-removable='true'] {
         @include composite-var($tag, 'container', $size, 'button-after');
       }
 
@@ -142,13 +142,9 @@ $appearances: (
   }
 
   @each $appearanceKey, $appearance in $appearances {
-    &[data-appearance=#{$appearanceKey}] {
+    &[data-appearance='#{$appearanceKey}'] {
       background-color: simple-var($appearance, 'container');
 
-      &[data-removable="false"] {
-        background-color: simple-var($appearance, 'container-disabled');
-      }
-
       .label {
         color: simple-var($appearance, 'label');
       }
@@ -156,11 +152,14 @@ $appearances: (
       .tagButton {
         color: simple-var($appearance, 'icon');
 
-        &:focus, &:hover, &:active {
+        &:focus,
+        &:hover,
+        &:active {
           color: simple-var($appearance, 'icon-active');
         }
 
-        &:focus, &:hover {
+        &:focus,
+        &:hover {
           background-color: simple-var($appearance, 'button-hovered');
         }