fix(button): решение проблемы с тултипом и заблокированной кнопкой (#920

) * fix(button): fix disabled button & tooltip add pointer-events: none to disabled button content & wrap tooltip child with span * fix(tooltip): add overlap div to disabled child element #799 * style(tooltip): decrease z-index of overlap div to 2 * fix(tooltip): in responsive tooltip add overlap div above disabled child
core-ds · Dec 29, 2021 · d04f311 · d04f311
1 parent 4ac648a
commit d04f311
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 1 deletion.
diff --git a/packages/button/src/index.module.css b/packages/button/src/index.module.css
@@ -205,6 +205,10 @@ a.loading {
 
 .component:disabled {
     cursor: var(--disabled-cursor);
+
+    & * {
+        pointer-events: none;
+    }
 }
 
 /* Addons */

diff --git a/packages/tooltip/src/Component.tsx b/packages/tooltip/src/Component.tsx
@@ -319,6 +319,7 @@ export const Tooltip: FC<TooltipProps> = ({
     return (
         <Fragment>
             <div ref={mergeRefs([targetRef, setTarget])} {...getTargetProps()}>
+                {children.props.disabled && <div className={styles.overlap} />}
                 {children}
             </div>
 

diff --git a/packages/tooltip/src/component.responsive.tsx b/packages/tooltip/src/component.responsive.tsx
@@ -5,6 +5,8 @@ import { BottomSheet, BottomSheetProps } from '@alfalab/core-components-bottom-s
 
 import { Tooltip, TooltipProps } from '.';
 
+import styles from './responsive.module.css';
+
 type View = 'desktop' | 'mobile';
 
 type TooltipResponsiveProps = Omit<TooltipProps, 'open' | 'onClose' | 'onOpen'> & {
@@ -63,7 +65,10 @@ export const TooltipResponsive: FC<TooltipResponsiveProps> = ({
             </BottomSheet>
             {/** TODO: проверить тултип на доступность */}
             {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-            <div onClick={handleOpen}>{children}</div>
+            <div onClick={handleOpen} className={styles.target}>
+                {children.props.disabled && <div className={styles.overlap} />}
+                {children}
+            </div>
         </Fragment>
     ) : (
         <Tooltip {...restProps} content={content} onOpen={onOpen}>

diff --git a/packages/tooltip/src/index.module.css b/packages/tooltip/src/index.module.css
@@ -33,4 +33,14 @@
 
 .target {
     cursor: pointer;
+    width: max-content;
+    position: relative;
+
+    & .overlap {
+        cursor: var(--disabled-cursor);
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        z-index: 2;
+    }
 }
diff --git a/packages/tooltip/src/responsive.module.css b/packages/tooltip/src/responsive.module.css
@@ -0,0 +1,11 @@
+.target {
+    position: relative;
+    width: max-content;
+
+    & .overlap {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        z-index: 2;
+    }
+}