fixes + vr implementation

pinterest · Sep 27, 2024 · 1bcb9a9 · 1bcb9a9
1 parent d1084f5
commit 1bcb9a9
Show file tree

Hide file tree

Showing 17 changed files with 1,461 additions and 223 deletions.
diff --git a/docs/docs-components/Header.tsx b/docs/docs-components/Header.tsx
@@ -195,7 +195,7 @@ function Header() {
 
         <Box display={isMobileSearchExpandedOpen ? 'none' : 'flex'} paddingX={2}>
           <Flex alignItems="center" gap={3}>
-            {showVRToggle && (
+            {true && (
               <ButtonToggle
                 iconStart="sparkle"
                 onClick={() => setExperiments(isInVRExperiment ? '' : 'Tokens')}

diff --git a/docs/examples/searchguide/avatarExample.tsx b/docs/examples/searchguide/avatarExample.tsx
@@ -12,14 +12,15 @@ export default function Example() {
     >
       <SearchGuide
         accessibilityLabel="Image"
+        color="02"
         text="Image"
         thumbnail={{
           image: (
             <Image
               alt="Image"
               naturalHeight={1}
               naturalWidth={1}
-              src="https://s3-alpha-sig.figma.com/img/c253/7eb7/32be921c7ae8fa1f273688cf3e6cf8fe?Expires=1728259200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=jr~qIaQL8sUoxz7hRDGFgpMwpFEhicmd-QEOaP6VUqQbVsh97qBOx44FGsXbDjf1qJLgkCxU5f2wN2phlfxTnCQcnmXYpGwV2OwWijLh7ZJd7YzAZfipQzlV0cb0BEdYPBA-IQYQUNZZeUqBW4EmAVx9kLwzmmfIzkJbfn92AqYdlhHLA1hZWVQIFaCb~B6JxaEA1~ys1LpgKNcn6PrTKd6BRehRzX6p61d4Km8A2NIeS~0PHTKwvzylE6fzgw0q5Zahrp33G7ErSVQWH7YGezbsUs7gxL2ryvyKANiaZAJ~I1hlqRjW7ui0D6UJlVqCGsyrPag1lqCmLmzaWCNUBQ__"
+              src="https://i.ibb.co/bBXC23j/fashion.jpg"
             />
           ),
         }}
@@ -33,13 +34,15 @@ export default function Example() {
       />
       <SearchGuide
         accessibilityLabel="Avatar"
+        color="03"
         text="Avatar"
         thumbnail={{
           avatar: <Avatar name="Keerthi" src="https://i.ibb.co/ZfCZrY8/keerthi.jpg" />,
         }}
       />
       <SearchGuide
         accessibilityLabel="AvatarGroup"
+        color="04"
         text="AvatarGroup"
         thumbnail={{
           avatarGroup: (

diff --git a/docs/examples/searchguide/expandableExample.tsx b/docs/examples/searchguide/expandableExample.tsx
@@ -24,8 +24,9 @@ export default function Example() {
           anchor={anchorRef.current}
           idealDirection="down"
           onDismiss={() => setShowOutfits(false)}
+          size="flexible"
         >
-          <Box height={120}>
+          <Box height={120} overflow="scrollX" padding={4}>
             <Flex direction="row" gap={2} wrap>
               <SearchGuide color="02" text="Casual" />
               <SearchGuide color="02" text="Formal" />

diff --git a/docs/examples/searchguide/selectedStateExample.tsx b/docs/examples/searchguide/selectedStateExample.tsx
@@ -1,9 +1,42 @@
-import { Flex, SearchGuide } from 'gestalt';
+import { useState } from 'react';
+import { Flex, Image, SearchGuide } from 'gestalt';
 
 export default function Example() {
+  const [selected, setSelected] = useState('outfit');
+
   return (
-    <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
-      <SearchGuide accessibilityLabel="Following" selected text="Following" />
+    <Flex alignItems="center" gap={2} height="100%" justifyContent="center" width="100%">
+      <SearchGuide
+        accessibilityLabel="Designs"
+        color="03"
+        onClick={() => setSelected((value) => (value === 'design' ? '' : 'design'))}
+        selected={selected === 'design'}
+        text="Designs"
+      />
+      <SearchGuide
+        accessibilityLabel="Outfit"
+        color="04"
+        onClick={() => setSelected((value) => (value === 'outfit' ? '' : 'outfit'))}
+        selected={selected === 'outfit'}
+        text="Outfit"
+        thumbnail={{
+          image: (
+            <Image
+              alt="Image"
+              naturalHeight={1}
+              naturalWidth={1}
+              src="https://i.ibb.co/bBXC23j/fashion.jpg"
+            />
+          ),
+        }}
+      />
+      <SearchGuide
+        accessibilityLabel="Vintage"
+        color="05"
+        onClick={() => setSelected((value) => (value === 'vintage' ? '' : 'vintage'))}
+        selected={selected === 'vintage'}
+        text="Vintage"
+      />
     </Flex>
   );
 }
diff --git a/docs/examples/searchguidelink/avatarExample.tsx b/docs/examples/searchguidelink/avatarExample.tsx
@@ -12,6 +12,7 @@ export default function Example() {
     >
       <SearchGuideLink
         accessibilityLabel="Image"
+        color="02"
         href="https://pinterest.com"
         text="Image"
         thumbnail={{
@@ -20,13 +21,14 @@ export default function Example() {
               alt="Image"
               naturalHeight={1}
               naturalWidth={1}
-              src="https://s.pinimg.com/webapp/protective-8fad3fab.svg"
+              src="https://i.ibb.co/bBXC23j/fashion.jpg"
             />
           ),
         }}
       />
       <SearchGuideLink
         accessibilityLabel="Icon"
+        color="03"
         href="https://pinterest.com"
         text="Icon"
         thumbnail={{
@@ -35,6 +37,7 @@ export default function Example() {
       />
       <SearchGuideLink
         accessibilityLabel="Avatar"
+        color="04"
         href="https://pinterest.com"
         text="Avatar"
         thumbnail={{

diff --git a/docs/examples/searchguidelink/expandableExample.tsx b/docs/examples/searchguidelink/expandableExample.tsx
@@ -25,8 +25,9 @@ export default function Example() {
           anchor={anchorRef.current}
           idealDirection="down"
           onDismiss={() => setShowOutfits(false)}
+          size="flexible"
         >
-          <Box height={120}>
+          <Box height={120} overflow="scrollX" padding={4}>
             <Flex direction="row" gap={2} wrap>
               <SearchGuideLink color="02" href="http://pinterest.com" text="Casual" />
               <SearchGuideLink color="02" href="http://pinterest.com" text="Formal" />

diff --git a/packages/gestalt-design-tokens/build.js b/packages/gestalt-design-tokens/build.js
@@ -374,6 +374,7 @@ function getSources({ theme, modeTheme, platform, language }) {
     ...(theme === 'vr-theme-web-mapping'
       ? [
           `tokens/vr-theme-web-mapping/base-color-dataviz-${modeTheme}.json`,
+          `tokens/vr-theme-web-mapping/base-color-searchguide-${modeTheme}.json`,
           'tokens/vr-theme-web-mapping/base-color.json',
           `tokens/vr-theme-web-mapping/base-elevation-${modeTheme}.json`,
           'tokens/vr-theme-web-mapping/base-font.json',