fix: better question-icon position

gravity-ui · Mar 6, 2024 · 258f9d7 · 258f9d7
1 parent 81a8f92
commit 258f9d7
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/src/dialog/Dialog/Dialog.scss b/src/dialog/Dialog/Dialog.scss
@@ -235,4 +235,9 @@
         padding-left: 32px;
         padding-right: 32px;
     }
+
+    &__q-icon {
+        position: relative;
+        top: 2px;
+    }
 }
diff --git a/src/dialog/Dialog/Dialog.tsx b/src/dialog/Dialog/Dialog.tsx
@@ -514,7 +514,7 @@ class Dialog<
                             delayClosing={150}
                             placement={['bottom', 'top', 'right']}
                         >
-                            <TooltipIcon />
+                            <TooltipIcon className={bDialog('q-icon')} />
                         </Popover>
                     </div>
                 )}

diff --git a/src/dialog/Icon/Icon.tsx b/src/dialog/Icon/Icon.tsx
@@ -118,9 +118,10 @@ export function WarningIcon(props: React.SVGProps<SVGSVGElement>) {
     );
 }
 
-export function TooltipIcon() {
+export function TooltipIcon({className}: {className?: string} = {}) {
     return (
         <svg
+            className={className}
             width="16"
             height="16"
             viewBox="0 0 16 16"

diff --git a/src/stories/dialog/00_Base_controls.stories.tsx b/src/stories/dialog/00_Base_controls.stories.tsx
@@ -47,7 +47,7 @@ class DialogWithSelectStories extends Component {
 }
 
 function makeField<T extends string, E extends object>(type: T, extras?: E) {
-    const res = {type, name: type, required: true, caption: type};
+    const res = {type, name: type, required: true, caption: type, tooltip: `Help for ${type}`};
     if (extras) {
         Object.assign(res, {extras});
     }