convert sass to css, fix maths

Shopify · Mar 15, 2024 · fb543bb · fb543bb
1 parent 0f6b53e
commit fb543bb
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 5 deletions.
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -44,6 +44,7 @@ import {
   TopBar,
   FooterHelp,
   Link,
+  Picker,
 } from '../src';
 import type {DropZoneProps, PageProps} from '../src';
 
@@ -624,6 +625,58 @@ export function DetailsPage() {
               {fileUpload}
             </DropZone>
           </LegacyCard>
+          <LegacyCard sectioned>
+            <FormLayout>
+              <TextField
+                label="Title"
+                value={title}
+                onChange={(title) => {
+                  setTitle(title);
+                  setIsDirty(true);
+                }}
+                autoComplete="off"
+              />
+              <TextField
+                label="Description"
+                value={descriptionValue}
+                onChange={handleChange}
+                autoComplete="off"
+                multiline
+              />
+            </FormLayout>
+          </LegacyCard>
+          <LegacyCard title="Media" sectioned>
+            <DropZone onDrop={handleDropZoneDrop}>
+              {uploadedFiles}
+              {fileUpload}
+            </DropZone>
+          </LegacyCard>
+          <LegacyCard sectioned>
+            <FormLayout>
+              <TextField
+                label="Title"
+                value={title}
+                onChange={(title) => {
+                  setTitle(title);
+                  setIsDirty(true);
+                }}
+                autoComplete="off"
+              />
+              <TextField
+                label="Description"
+                value={descriptionValue}
+                onChange={handleChange}
+                autoComplete="off"
+                multiline
+              />
+            </FormLayout>
+          </LegacyCard>
+          <LegacyCard title="Media" sectioned>
+            <DropZone onDrop={handleDropZoneDrop}>
+              {uploadedFiles}
+              {fileUpload}
+            </DropZone>
+          </LegacyCard>
         </Layout.Section>
         <Layout.Section variant="oneThird">
           <LegacyCard title="Organization">
@@ -641,6 +694,24 @@ export function DetailsPage() {
                 onChange={setSelected}
                 value={selected}
               />
+              <br />
+              <Picker
+                activator={{label: 'Vendor'}}
+                options={[
+                  {
+                    value: 'Burberry',
+                    children: 'Burberry',
+                  },
+                  {
+                    value: 'Gucci',
+                    children: 'Gucci',
+                  },
+                  {
+                    value: 'Prada',
+                    children: 'Prada',
+                  },
+                ]}
+              />
             </LegacyCard.Section>
             <LegacyCard.Section title="Collections" />
             <LegacyCard.Section title="Tags" />

diff --git a/...omponents/Activator/Activator.module.scss → ...components/Activator/Activator.module.css b/...omponents/Activator/Activator.module.scss → ...components/Activator/Activator.module.css
diff --git a/polaris-react/src/components/Picker/components/Activator/Activator.tsx b/polaris-react/src/components/Picker/components/Activator/Activator.tsx
@@ -6,7 +6,7 @@ import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
 import {UnstyledButton} from '../../../UnstyledButton';
 
-import styles from './Activator.module.scss';
+import styles from './Activator.module.css';
 
 export interface ActivatorProps {
   label: string;

diff --git a/...omponents/TextField/TextField.module.scss → ...components/TextField/TextField.module.css b/...omponents/TextField/TextField.module.scss → ...components/TextField/TextField.module.css
diff --git a/polaris-react/src/components/Picker/components/TextField/TextField.tsx b/polaris-react/src/components/Picker/components/TextField/TextField.tsx
@@ -5,7 +5,7 @@ import type {TextFieldProps} from '../../../TextField';
 import {useComboboxTextField} from '../../../../utilities/combobox';
 import {InlineStack} from '../../../InlineStack';
 
-import styles from './TextField.module.scss';
+import styles from './TextField.module.css';
 
 export function TextField({
   value,

diff --git a/polaris-react/src/components/PositionedOverlay/utilities/math.ts b/polaris-react/src/components/PositionedOverlay/utilities/math.ts
@@ -20,6 +20,7 @@ export function calculateVerticalPosition(
   fixed: boolean | undefined,
   topBarOffset = 0,
 ) {
+  const log = console.log;
   const activatorTop = activatorRect.top;
   const activatorBottom = activatorTop + activatorRect.height;
   const spaceAbove = activatorRect.top - topBarOffset;
@@ -67,7 +68,7 @@ export function calculateVerticalPosition(
 
   const positionIfCoverBelow = {
     height: heightIfBelowCover - verticalMargins,
-    top: activatorTop - containerRectTop,
+    top: activatorTop + containerRectTop,
     positioning: 'cover',
   };
 
@@ -101,6 +102,7 @@ export function calculateVerticalPosition(
   }
 
   if (preferredPosition === 'cover') {
+    log('is covered');
     return (enoughSpaceFromBottomScroll ||
       (distanceToBottomScroll >= distanceToTopScroll &&
         !enoughSpaceFromTopScroll)) &&
@@ -109,11 +111,11 @@ export function calculateVerticalPosition(
       ? positionIfCoverBelow
       : positionIfCoverAbove;
   }
-
+  log('is not covered');
   if (enoughSpaceFromTopScroll && enoughSpaceFromBottomScroll) {
     return spaceAbove > spaceBelow ? positionIfAbove : positionIfBelow;
   }
-
+  log('is super not covered');
   return distanceToTopScroll > minimumSpaceToScroll
     ? positionIfAbove
     : positionIfBelow;