Merge branch 'pinterest:master' into jbAddingDataTestIdToCheckBox

pinterest · Sep 24, 2024 · 082b98a · 082b98a
2 parents c88bbc2 + ba6b53c
commit 082b98a
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+## 159.11.0 (Sep 24, 2024)
+
+### Minor
+
+- Tooltip: implement VR changes ([#3778](https://github.com/pinterest/gestalt/pull/3778)) - [Preview link](https://deploy-preview-3778--gestalt.netlify.app?devexample=true)
+
+## 159.10.4 (Sep 24, 2024)
+
+### Patch
+
+- Tabs: fix padding ([#3777](https://github.com/pinterest/gestalt/pull/3777)) - [Preview link](https://deploy-preview-3777--gestalt.netlify.app?devexample=true)
+
 ## 159.10.3 (Sep 24, 2024)
 
 ### Patch

diff --git a/packages/eslint-plugin-gestalt/package.json b/packages/eslint-plugin-gestalt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-gestalt",
-  "version": "159.10.3",
+  "version": "159.11.0",
   "license": "Apache-2.0",
   "homepage": "https://gestalt.pinterest.systems/",
   "description": "ESLint rules for Pinterest's design language Gestalt",

diff --git a/packages/gestalt-charts/package.json b/packages/gestalt-charts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gestalt-charts",
-  "version": "159.10.3",
+  "version": "159.11.0",
   "license": "Apache-2.0",
   "homepage": "https://gestalt.pinterest.systems/",
   "description": "A React UI chart component which enforces Pinterest's design language",

diff --git a/packages/gestalt-datepicker/package.json b/packages/gestalt-datepicker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gestalt-datepicker",
-  "version": "159.10.3",
+  "version": "159.11.0",
   "license": "Apache-2.0",
   "homepage": "https://gestalt.pinterest.systems/",
   "description": "A React UI datepicker component which enforces Pinterest's design language",

diff --git a/packages/gestalt-design-tokens/package.json b/packages/gestalt-design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gestalt-design-tokens",
-  "version": "159.10.3",
+  "version": "159.11.0",
   "license": "Apache-2.0",
   "homepage": "https://gestalt.pinterest.systems/",
   "description": "Design tokens style dictionary for Gestalt",

diff --git a/packages/gestalt/package.json b/packages/gestalt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gestalt",
-  "version": "159.10.3",
+  "version": "159.11.0",
   "license": "Apache-2.0",
   "homepage": "https://gestalt.pinterest.systems/",
   "description": "A set of React UI components which enforce Pinterest's design language",

diff --git a/packages/gestalt/src/Popover/Contents.tsx b/packages/gestalt/src/Popover/Contents.tsx
@@ -15,7 +15,7 @@ export type Role = 'dialog' | 'listbox' | 'menu' | 'tooltip';
 type Props = {
   accessibilityLabel?: string;
   anchor: HTMLElement;
-  bgColor: 'blue' | 'darkGray' | 'white';
+  bgColor?: 'blue' | 'darkGray' | 'white';
   border?: boolean;
   caret?: boolean;
   children?: ReactNode;

diff --git a/packages/gestalt/src/Popover/Controller.tsx b/packages/gestalt/src/Popover/Controller.tsx
@@ -16,7 +16,7 @@ const SIZE_WIDTH_MAP = {
 type Props = {
   accessibilityLabel?: string;
   anchor: HTMLElement;
-  bgColor: 'blue' | 'darkGray' | 'white';
+  bgColor?: 'blue' | 'darkGray' | 'white';
   border?: boolean;
   caret?: boolean;
   children?: ReactNode;

diff --git a/packages/gestalt/src/Tabs.css b/packages/gestalt/src/Tabs.css
@@ -1,6 +1,5 @@
 .paddingY {
-  padding-left: var(--space-300);
-  padding-right: var(--space-300);
+  composes: paddingY3 from "./boxWhitespace.css";
 }
 
 .focused {

diff --git a/packages/gestalt/src/Tooltip/InternalTooltip.tsx b/packages/gestalt/src/Tooltip/InternalTooltip.tsx
@@ -4,6 +4,7 @@ import Layer from '../Layer';
 import Controller from '../Popover/Controller';
 import Text from '../Text';
 import useDebouncedCallback from '../useDebouncedCallback';
+import useInExperiment from '../useInExperiment';
 import { Indexable } from '../zIndex';
 
 const noop = () => {};
@@ -87,6 +88,11 @@ export default function InternalTooltip({
 
   const mouseLeaveDelay = link ? TIMEOUT : 0;
 
+  const isInVRExperiment = useInExperiment({
+    webExperimentName: 'web_gestalt_visualRefresh',
+    mwebExperimentName: 'web_gestalt_visualRefresh',
+  });
+
   useEffect(() => {
     if (disabled === true) {
       dispatch({ type: 'hoverOutIcon', disabled });
@@ -150,7 +156,7 @@ export default function InternalTooltip({
         <Layer zIndex={zIndex}>
           <Controller
             anchor={anchor}
-            bgColor="darkGray"
+            bgColor={isInVRExperiment ? undefined : 'darkGray'}
             border={false}
             caret={false}
             disablePortal
@@ -162,12 +168,14 @@ export default function InternalTooltip({
             shouldFocus={false}
           >
             <Box
+              color={isInVRExperiment ? 'inverse' : undefined}
               maxWidth={180}
               onBlur={link ? handleTextMouseLeave : undefined}
               onFocus={link ? handleTextMouseEnter : undefined}
               onMouseEnter={link ? handleTextMouseEnter : undefined}
               onMouseLeave={link ? handleTextMouseLeave : undefined}
               padding={2}
+              rounding={2}
               tabIndex={0}
             >
               <Text color="inverse" dataTestId={dataTestIdText} size="100">