[polaris.shopify.com] Fix Tiles image and example widths (#7444)

kyledurand · web-flow · commit e0d6b00ba393 · 2022-10-19T10:42:32.000-04:00
diff --git a/.changeset/nice-boxes-jam.md b/.changeset/nice-boxes-jam.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Fix tile image and increase example widths on alpha components
diff --git a/polaris.shopify.com/content/components/tiles.md b/polaris.shopify.com/content/components/tiles.md
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-default.tsx b/polaris.shopify.com/pages/examples/alpha-stack-default.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaStackExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <AlphaStack>
         <Text variant="heading4xl" as="h2">
           AlphaStack
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx b/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaStackWithAlignExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Box paddingBottom="2">
         <Text variant="bodySm" as="h3">
           with align start
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx b/polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaStackWithFullWidthChildrenExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <AlphaStack fullWidth>
         <Text variant="heading4xl" as="h2">
           AlphaStack
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-spacing.tsx b/polaris.shopify.com/pages/examples/alpha-stack-with-spacing.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaStackWithSpacingExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Box paddingBottom="2">
         <Text variant="bodySm" as="h3">
           with spacing 0
diff --git a/polaris.shopify.com/pages/examples/bleed-all-directions.tsx b/polaris.shopify.com/pages/examples/bleed-all-directions.tsx
@@ -14,7 +14,7 @@ const styles = {
 
 function BleedAllDirectionsExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Box background="surface" border="base" padding="4">
         <Bleed spacing="6">
           <div style={styles}>
diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
@@ -14,7 +14,7 @@ const styles = {
 
 function BleedHorizontalExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Box background="surface" border="base" padding="4">
         <Bleed horizontal="6">
           <div style={styles}>
diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
@@ -14,7 +14,7 @@ const styles = {
 
 function BleedSpecificDirectionExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Box background="surface" border="base" padding="4">
         <Bleed top="6">
           <div style={styles}>
diff --git a/polaris.shopify.com/pages/examples/bleed-vertical.tsx b/polaris.shopify.com/pages/examples/bleed-vertical.tsx
@@ -14,7 +14,7 @@ const styles = {
 
 function BleedVerticalExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Box background="surface" border="base" padding="4">
         <Bleed vertical="6">
           <div style={styles}>
diff --git a/polaris.shopify.com/pages/examples/color-picker-with-transparent-value-full-width.tsx b/polaris.shopify.com/pages/examples/color-picker-with-transparent-value-full-width.tsx
@@ -11,7 +11,7 @@ function ColorPickerWithTransparentValueExample() {
   });
 
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <ColorPicker fullWidth onChange={setColor} color={color} allowAlpha />
     </div>
   );
diff --git a/polaris.shopify.com/pages/examples/columns-default.tsx b/polaris.shopify.com/pages/examples/columns-default.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function ColumnsExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} spacing={{xs: '2'}}>
         <div style={{background: 'var(--p-surface-success)'}}>Column one</div>
         <div style={{background: 'var(--p-surface-success)'}}>Column two</div>
diff --git a/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx b/polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function ColumnsWithVaryingGapExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Columns
         columns={{xs: 3}}
         spacing={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
diff --git a/polaris.shopify.com/pages/examples/content-block-width.tsx b/polaris.shopify.com/pages/examples/content-block-width.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function ContentBlockWidthExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <ContentBlock width="md">
         <Box background="surface" borderRadius="2" padding="5" shadow="card">
           <Text variant="bodySm" as="h3" alignment="center">
diff --git a/polaris.shopify.com/pages/examples/inline-default.tsx b/polaris.shopify.com/pages/examples/inline-default.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Inline>
         <Text variant="heading4xl" as="h2">
           Inline
diff --git a/polaris.shopify.com/pages/examples/inline-with-align-y.tsx b/polaris.shopify.com/pages/examples/inline-with-align-y.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithAlignYExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Box paddingBottom="2">
         <Text variant="bodySm" as="h3">
           with alignY top
diff --git a/polaris.shopify.com/pages/examples/inline-with-align.tsx b/polaris.shopify.com/pages/examples/inline-with-align.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithAlignExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Box paddingBottom="2">
         <Text variant="bodySm" as="h3">
           with align start
diff --git a/polaris.shopify.com/pages/examples/tiles-with-columns.tsx b/polaris.shopify.com/pages/examples/tiles-with-columns.tsx
@@ -23,7 +23,7 @@ const children = Array.from(Array(8)).map((ele, index) => (
 
 function TilesWithColumnsExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Tiles columns={{xs: 4}} gap={{xs: '2'}}>
         {children}
       </Tiles>
diff --git a/polaris.shopify.com/pages/examples/tiles-with-spacing.tsx b/polaris.shopify.com/pages/examples/tiles-with-spacing.tsx
@@ -23,7 +23,7 @@ const children = Array.from(Array(2)).map((ele, index) => (
 
 function TilesWithSpacingExample() {
   return (
-    <div style={{width: '500px'}}>
+    <div style={{width: '100%'}}>
       <Tiles columns={{xs: 1}} gap={{xs: '5'}}>
         {children}
       </Tiles>
diff --git a/polaris.shopify.com/public/images/components/tiles.png b/polaris.shopify.com/public/images/components/tiles.png
diff --git a/polaris.shopify.com/src/components/SearchResultHighlight/SearchResultHighlight.module.scss b/polaris.shopify.com/src/components/SearchResultHighlight/SearchResultHighlight.module.scss
@@ -19,7 +19,6 @@
     [data-is-current-result='true'] &,
     [data-is-current-result]:hover & {
       box-shadow: inset 0 1px rgb(255 255 255 / 15%), 0 20px 50px rgb(0 0 0);
-      mix-blend-mode: plus-lighter;
       animation: fade-in 0.1s both ease-out;
       background-color: rgba(255, 255, 255, 0.175);
     }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'polaris.shopify.com': patch
 +---
++
 +Fix tile image and increase example widths on alpha components