chore: change fluid to fullWidth (#28987)

* initial changes

* Update packages/gatsby-plugin-image/README.md

Co-authored-by: Matt Kane <[email protected]>

* remove compat

* update types

* update tests

* more test fixes

* intermediate test naming

* Update packages/gatsby-plugin-image/README.md

Co-authored-by: Matt Kane <[email protected]>

* conflict

Co-authored-by: Matt Kane <[email protected]>

Author: LB

e2e-tests/gatsby-static-image/cypress/integration/fluid.js renamed to e2e-tests/gatsby-static-image/cypress/integration/fullWidth.js

@@ -1,8 +1,8 @@
 const fluidTestId = `image-fluid`
 
-describe(`fluid`, () => {
+describe(`fullWidth`, () => {
   beforeEach(() => {
-    cy.visit(`/fluid`).waitForRouteChange()
+    cy.visit(`/fullWidth`).waitForRouteChange()
   })
 
   it(`works on png files`, () => {

e2e-tests/gatsby-static-image/cypress/integration/image.js

@@ -2,7 +2,7 @@ const fluidTestId = `image-fluid`
 
 describe(`Production gatsby-image`, () => {
   beforeEach(() => {
-    cy.visit(`/fluid`).waitForRouteChange()
+    cy.visit(`/fullWidth`).waitForRouteChange()
   })
 
   describe(`wrapping elements`, () => {
@@ -30,5 +30,4 @@ describe(`Production gatsby-image`, () => {
         .should(`not.exist`)
     })
   })
-
 })

e2e-tests/gatsby-static-image/src/pages/fluid.js renamed to e2e-tests/gatsby-static-image/src/pages/fullWidth.js

@@ -8,27 +8,27 @@ const FluidPage = () => (
     <div data-testid="image-fluid">
       <StaticImage
         src="../images/citrus-fruits.jpg"
-        layout="fluid"
+        layout="fullWidth"
         width={700}
         alt="Citrus fruits"
       />
     </div>
     <div data-testid="image-fluid-png">
       <StaticImage
         src="../images/gatsby-icon.png"
-        layout="fluid"
+        layout="fullWidth"
         alt="Gatsby icon"
       />
     </div>
     <div data-testid="image-fluid-relative">
       <StaticImage
         src="../../content/relative.jpg"
-        layout="fluid"
+        layout="fullWidth"
         alt="Citrus fruits"
       />
     </div>
     <div data-testid="invalid-image">
-      <StaticImage src="./does-not-exist.jpg" layout="fluid" />
+      <StaticImage src="./does-not-exist.jpg" layout="fullWidth" />
     </div>
   </Layout>
 )

e2e-tests/visual-regression/cypress/integration/image.js

@@ -1,14 +1,14 @@
 const testCases = [
   ["fixed image", "/images/fixed"],
   ["fixed image smaller than requested size", "/images/fixed-too-big"],
-  ["fluid image", "/images/fluid"],
+  ["fluid image", "/images/fullWidth"],
   ["constrained image", "/images/constrained"],
   ["avif format", "/images/avif"],
 ]
 const staticImageTestCases = [
   ["fixed image", "/static-images/fixed"],
   ["fixed image smaller than requested size", "/static-images/fixed-too-big"],
-  ["fluid image", "/static-images/fluid"],
+  ["fluid image", "/static-images/fullWidth"],
   ["constrained image", "/static-images/constrained"],
   ["avif format", "/static-images/avif"],
 ]

e2e-tests/visual-regression/src/pages/images/fluid.js renamed to e2e-tests/visual-regression/src/pages/images/fullWidth.js

@@ -9,15 +9,15 @@ const Page = () => {
     query {
       file(relativePath: { eq: "cornwall.jpg" }) {
         childImageSharp {
-          gatsbyImageData(width: 1024, layout: FLUID)
+          gatsbyImageData(width: 1024, layout: FULL_WIDTH)
         }
       }
     }
   `)
 
   return (
     <Layout>
-      <h1>Fluid, maxWidth</h1>
+      <h1>fullWidth, maxWidth</h1>
       <TestWrapper style={{ display: `block` }}>
         <GatsbyImage
           image={getImage(data.file)}

e2e-tests/visual-regression/src/pages/index.js

@@ -6,12 +6,20 @@ import Layout from "../components/layout"
 const IndexPage = () => (
   <Layout>
     <h1>Gatsby Image integration test</h1>
-<ul>
-  <li><Link to="/images/fixed">/images/fixed</Link></li>
-  <li><Link to="/images/fixed-too-big">/images/fixed-too-big</Link></li>
-  <li><Link to="/images/fluid">/images/fluid</Link></li>
-  <li><Link to="/images/constrained">/images/constrained</Link></li>
-</ul>
+    <ul>
+      <li>
+        <Link to="/images/fixed">/images/fixed</Link>
+      </li>
+      <li>
+        <Link to="/images/fixed-too-big">/images/fixed-too-big</Link>
+      </li>
+      <li>
+        <Link to="/images/fullWidth">/images/fullWidth</Link>
+      </li>
+      <li>
+        <Link to="/images/constrained">/images/constrained</Link>
+      </li>
+    </ul>
   </Layout>
 )
 

e2e-tests/visual-regression/src/pages/static-images/fluid.js renamed to e2e-tests/visual-regression/src/pages/static-images/fullWidth.js

@@ -11,7 +11,7 @@ const Page = () => {
         <StaticImage
           src="../../images/cornwall.jpg"
           loading="eager"
-          layout="fluid"
+          layout="fullWidth"
           width={1024}
           alt="cornwall"
         />

packages/gatsby-plugin-image/README.md

@@ -272,7 +272,7 @@ devices with widths stretching from smartphone to wide desktop monitors.
 
 To decide between the two, ask yourself: "do I know what the exact size of this image
 will be?" If yes, it's "fixed". If no and its width and/or height need to
-vary depending on the size of the screen, then it's "fluid". If you want it to shrink
+vary depending on the size of the screen, then it's "fullWidth". If you want it to shrink
 to fit on smaller screens, but not to expand larger than a maximum, then use "constrained"
 
 In Gatsby's GraphQL implementation, you specify the type of image with the `layout` argument
@@ -289,7 +289,7 @@ In Gatsby's GraphQL implementation, you specify the type of image with the `layo
 # GraphQL resolver
 
 We have added a new `gatsbyImageData` resolver to the `ImageSharp` node. Unlike the existing `fixed` and `fluid` resolvers, this returns a
-JSON type, meaning you don't specify the individual fields, but are instead given the whole object. This is because the object is then passed in to the `<GatsbyImage>` component. The API is like this:
+JSON type, meaning you don't specify the individual fields, but are instead given the whole object. This is because the object is then passed into the `<GatsbyImage>` component. The API is like this:
 
 ```graphql
 coverImage: file(relativePath: { eq: "plant.jpg" }) {
@@ -326,9 +326,9 @@ These arguments can be passed to the `gatsbyImageData()` resolver:
 - **layout**: The layout for the image.
   - `CONSTRAINED`: (default) Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size.
   - `FIXED`: A static image size, that does not resize according to the screen width
-  - `FLUID`: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen.
+  - `FULL_WIDTH`: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen.
 - **outputPixelDensities**: A list of image pixel densities to generate, for high-resolution (retina) screens. It will never generate images larger than the source, and will always include a 1x image.
-  Default is `[ 0.25, 0.5, 1, 2 ]`, for fluid/constrained images, and `[ 1, 2 ]` for fixed.
+  Default is `[ 0.25, 0.5, 1, 2 ]`, for fullWidth/constrained images, and `[ 1, 2 ]` for fixed.
 - **sizes**: The "[sizes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)" attribute, passed to the `<img>` tag. This describes the display size of the image. This does not affect the generated images, but is used by the browser to decide which images to download. You can leave this blank for fixed images, or if the responsive image container will be the full width of the screen. In these cases we will generate an appropriate value. If, however, you are generating responsive images that are not the full width of the screen, you should provide a sizes property for best performance. You can alternatively pass this value to the component.
 - **formats**: an array of file formats to generate. The default is `[AUTO, WEBP]`, which means it will generate images in the same format as the source image, as well as in the next-generation [WebP](https://developers.google.com/speed/webp) format. We strongly recommend you do not change this option, as doing so will affect performance scores.
 - **quality**: The default quality. This is overridden by any format-specific options

packages/gatsby-plugin-image/compat.browser.js

@@ -7,16 +7,12 @@
     "build:gatsby-ssr": "microbundle -i src/gatsby-ssr.tsx -f cjs -o ./[name].js --no-pkg-main --jsx React.createElement --no-compress --external=common-tags,react --no-sourcemap",
     "build:server": "microbundle -f cjs,es --jsx React.createElement --define SERVER=true",
     "build:browser": "microbundle -i src/index.browser.ts -f cjs,modern,es --jsx React.createElement -o dist/gatsby-image.browser --define SERVER=false",
-    "build:server-compat": "microbundle -i src/components/compat.tsx -f cjs,es --jsx React.createElement -o dist/gatsby-image.compat --define SERVER=true",
-    "build:browser-compat": "microbundle -i src/components/compat.browser.tsx -f cjs,modern,es --jsx React.createElement -o dist/gatsby-image.compat.browser --define SERVER=false",
     "prepare": "yarn build",
     "watch": "run-p watch:*",
     "watch:gatsby-node": "yarn build:gatsby-node --watch",
     "watch:gatsby-ssr": "yarn build:gatsby-ssr watch",
     "watch:server": "yarn build:server --no-compress watch",
     "watch:browser": "yarn build:browser --no-compress watch",
-    "watch:server-compat": "yarn build:server-compat --no-compress watch",
-    "watch:browser-compat": "yarn build:browser-compat --no-compress watch",
     "test": "jest",
     "test:watch": "jest --watch",
     "clean": "del-cli dist/*"
@@ -30,20 +26,12 @@
   "module": "dist/gatsby-image.module.js",
   "esmodule": "dist/gatsby-image.modern.js",
   "browser": {
-    "./compat.js": "./compat.browser.module.js",
-    "./compat.module.js": "./compat.browser.module.js",
-    "./compat.modern.js": "./compat.browser.modern.js",
     "./dist/gatsby-image.js": "./dist/gatsby-image.browser.js",
     "./dist/gatsby-image.module.js": "./dist/gatsby-image.browser.module.js",
     "./dist/gatsby-image.modern.js": "./dist/gatsby-image.browser.modern.js"
   },
   "files": [
     "dist/*",
-    "compat.js",
-    "compat.module.js",
-    "compat.browser.js",
-    "compat.browser.module.js",
-    "compat.browser.modern.js",
     "gatsby-node.js",
     "gatsby-ssr.js"
   ],

packages/gatsby-plugin-image/compat.browser.modern.js

@@ -37,7 +37,7 @@ const args: IGatsbyImageHelperArgs = {
 
 const fluidArgs: IGatsbyImageHelperArgs = {
   ...args,
-  layout: `fluid`,
+  layout: `fullWidth`,
 }
 
 const constrainedArgs: IGatsbyImageHelperArgs = {
@@ -153,7 +153,7 @@ describe(`the image data helper`, () => {
     expect(data.images.fallback?.sizes).toEqual(`400px`)
   })
 
-  it(`calculates sizes for fluid`, () => {
+  it(`calculates sizes for fullWidth`, () => {
     const data = generateImageData(fluidArgs)
     expect(data.images.fallback?.sizes).toEqual(`100vw`)
   })
@@ -176,7 +176,7 @@ describe(`the image data helper`, () => {
     )
   })
 
-  it(`returns URLs for fluid`, () => {
+  it(`returns URLs for fullWidth`, () => {
     const data = generateImageData(fluidArgs)
     expect(data?.images?.fallback?.src).toEqual(
       `https://example.com/afile.jpg/400/300/image.jpg`

packages/gatsby-plugin-image/compat.browser.module.js

@@ -26,7 +26,7 @@ describe(`GatsbyImage browser`, () => {
     image = {
       width: 100,
       height: 100,
-      layout: `fluid`,
+      layout: `fullWidth`,
       images: { fallback: { src: `some-src-fallback.jpg`, sizes: `192x192` } },
       placeholder: { sources: [] },
 

packages/gatsby-plugin-image/compat.js

@@ -41,8 +41,8 @@ describe(`GatsbyImage server`, () => {
   })
 
   describe(`style verifications`, () => {
-    it(`has a valid style attributes for fluid layout`, () => {
-      const layout = `fluid`
+    it(`has a valid style attributes for fullWidth layout`, () => {
+      const layout = `fullWidth`
 
       const image: IGatsbyImageData = {
         width: 100,
@@ -350,11 +350,11 @@ icon.svg`,
   })
 
   describe(`placeholder verifications`, () => {
-    it(`has a placeholder in a div with valid styles for fluid layout`, () => {
+    it(`has a placeholder in a div with valid styles for fullWidth layout`, () => {
       const image: IGatsbyImageData = {
         width: 100,
         height: 100,
-        layout: `fluid`,
+        layout: `fullWidth`,
         images: {},
         placeholder: { sources: [] },
         backgroundColor: `red`,