fix :infotip padding (#133)

* fix: contextual help size * v0.12.2
Arize-ai · Jun 9, 2023 · 238ee62 · 238ee62
1 parent 3817e21
commit 238ee62
Show file tree

Hide file tree

Showing 5 changed files with 300 additions and 246 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.12.1",
+  "version": "0.12.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -80,11 +80,12 @@
     "@types/react": "18",
     "@types/react-dom": "18",
     "@types/react-transition-group": "^4.4.5",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.39.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-polished": "^1.1.0",
     "chromatic": "^6.5.1",
+    "eslint": "7.17.0",
     "husky": "^8.0.1",
     "polished": "^4.2.2",
     "react": "18",
@@ -102,7 +103,8 @@
     "react": "^18",
     "react-dom": "^18",
     "**/@typescript-eslint/eslint-plugin": "^4.1.1",
-    "**/@typescript-eslint/parser": "^4.1.1"
+    "**/@typescript-eslint/parser": "^4.1.1",
+    "eslint": "7.17.0"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
@@ -135,6 +137,7 @@
     "@react-stately/virtualizer": "^3.3.1",
     "@react-types/shared": "^3.15.0",
     "clsx": "^1.1.1",
+    "eslint-config-prettier": "^8.8.0",
     "react-transition-group": "^4.4.5"
   },
   "description": "Re-usable React components",

diff --git a/src/button/ActionButton.tsx b/src/button/ActionButton.tsx
@@ -53,7 +53,7 @@ function ActionButton(
 const quietButtonCSS = css`
   border: none;
   margin: 0;
-  padding: 0.2em;
+  padding: 0 0;
   color: inherit;
   background: none;
   cursor: pointer;
@@ -62,7 +62,6 @@ const quietButtonCSS = css`
   transition: all 0.2s ease-in-out;
   &:hover {
     opacity: 1;
-    background-color: ${theme.colors.gray500};
   }
   svg {
     padding: var(--ac-dimension-size-85);

diff --git a/src/icon/Icons.tsx b/src/icon/Icons.tsx
@@ -702,3 +702,30 @@ export const SunOutline = () => (
     </g>
   </svg>
 );
+
+export const ArrowDownFilled = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g data-name="Layer 2">
+      <g data-name="arrow-downward">
+        <rect
+          width="24"
+          height="24"
+          transform="rotate(-90 12 12)"
+          opacity="0"
+        />
+        <path d="M12 17a1.72 1.72 0 0 1-1.33-.64l-4.21-5.1a2.1 2.1 0 0 1-.26-2.21A1.76 1.76 0 0 1 7.79 8h8.42a1.76 1.76 0 0 1 1.59 1.05 2.1 2.1 0 0 1-.26 2.21l-4.21 5.1A1.72 1.72 0 0 1 12 17z" />
+      </g>
+    </g>
+  </svg>
+);
+
+export const ArrowUpFilled = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g data-name="Layer 2">
+      <g data-name="arrow-up">
+        <rect width="24" height="24" transform="rotate(90 12 12)" opacity="0" />
+        <path d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1 2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1z" />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/stories/ContextualHelp.stories.tsx b/stories/ContextualHelp.stories.tsx
@@ -2,14 +2,15 @@ import React, { useState } from 'react';
 import { Meta, Story } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
 import {
-  ActionButton,
+  Form,
   Provider,
   Placement,
   ContextualHelp,
   Text,
   Heading,
   theme,
   Content,
+  TextField,
 } from '../src';
 
 import css from '@emotion/css';
@@ -53,11 +54,14 @@ export default meta;
 
 export const Gallery = () => (
   <Provider>
-    <ul style={{ listStyle: 'none', marginLeft: '500px', marginTop: '200px' }}>
-      {placements.map((placement, index) => {
-        return (
-          <li key={index} style={{ margin: '10px 0' }}>
-            <ContextualHelp placement={placement} variant="info">
+    <section>
+      <Heading>Form Horizontal</Heading>
+      <Form layout="inline">
+        <TextField label="First Name" />
+        <TextField
+          label="Last Name"
+          labelExtra={
+            <ContextualHelp variant="info">
               <Heading level={3} weight="heavy">
                 Need help?
               </Heading>
@@ -67,20 +71,44 @@ export const Gallery = () => (
                   customer support team for help.
                 </Text>
               </Content>
-              <footer
-                css={css`
-                  .ac-text {
-                    text-decoration: underline;
-                    color: ${theme.colors.arizeLightBlue};
-                  }
-                `}
-              >
-                <Text textSize="small">Learn more about accounts</Text>
-              </footer>
             </ContextualHelp>
-          </li>
-        );
-      })}
-    </ul>
+          }
+        />
+      </Form>
+    </section>
+    <section>
+      <Heading>Placements</Heading>
+      <ul
+        style={{ listStyle: 'none', marginLeft: '500px', marginTop: '200px' }}
+      >
+        {placements.map((placement, index) => {
+          return (
+            <li key={index} style={{ margin: '10px 0' }}>
+              <ContextualHelp placement={placement} variant="info">
+                <Heading level={3} weight="heavy">
+                  Need help?
+                </Heading>
+                <Content>
+                  <Text elementType="p" textSize="small">
+                    If you're having issues accessing your account, contact our
+                    customer support team for help.
+                  </Text>
+                </Content>
+                <footer
+                  css={css`
+                    .ac-text {
+                      text-decoration: underline;
+                      color: ${theme.colors.arizeLightBlue};
+                    }
+                  `}
+                >
+                  <Text textSize="small">Learn more about accounts</Text>
+                </footer>
+              </ContextualHelp>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
   </Provider>
 );