Avoid Bootstrap columns unless there are columns (#7443)

* Avoid Bootstrap columns unless there are columns * Revert Card in GetStartedView * Fix Activate button alignment * Snapshots * Make Extension Console "Get Started" view consistent with other views (#7489)
pixiebrix · Feb 1, 2024 · bb84088 · bb84088
1 parent 7d61103
commit bb84088
Show file tree

Hide file tree

Showing 38 changed files with 1,527 additions and 1,827 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -90,6 +90,12 @@ module.exports = {
         message:
           'For safety and convenience, use this instead: import { allSettled } from "@/utils/promiseUtils";',
       },
+      {
+        message:
+          "Bootstrap columns should not be used if there's a single column. Use a plain `div` or drop the wrapper altogether if not needed. You might also consider using one of the classes 'max-550', 'max-750', or 'max-950' to limit the width of the body.",
+        selector:
+          "JSXElement[openingElement.name.name='Row'] > JSXText:first-child + JSXElement:nth-last-child(2)",
+      },
       {
         message:
           "Use the `uuid` module instead because crypto.randomUUID is not available in http: contexts",

diff --git a/src/__snapshots__/Storyshots.test.js.snap b/src/__snapshots__/Storyshots.test.js.snap
diff --git a/src/components/documentBuilder/edit/ElementEditor.tsx b/src/components/documentBuilder/edit/ElementEditor.tsx
@@ -61,27 +61,17 @@ const ElementEditor: React.FC<ElementEditorProps> = ({ documentBodyName }) => {
         </Col>
       </Row>
 
-      <Row>
-        <Col>
-          <ElementOptions />
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <MoveElement documentBodyName={documentBodyName} />
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <ConnectedCollapsibleFieldSection title="Advanced: Layout">
-            <CssSpacingField
-              name={joinName(elementName, "config", "className")}
-              schema={{ type: "string" }}
-              label="Spacing"
-            />
-          </ConnectedCollapsibleFieldSection>
-        </Col>
-      </Row>
+      <div>
+        <ElementOptions />
+      </div>
+      <MoveElement documentBodyName={documentBodyName} />
+      <ConnectedCollapsibleFieldSection title="Advanced: Layout">
+        <CssSpacingField
+          name={joinName(elementName, "config", "className")}
+          schema={{ type: "string" }}
+          label="Spacing"
+        />
+      </ConnectedCollapsibleFieldSection>
     </>
   );
 };

diff --git a/src/components/documentBuilder/edit/PipelineOptions.tsx b/src/components/documentBuilder/edit/PipelineOptions.tsx
@@ -17,7 +17,6 @@
 
 import ConnectedFieldTemplate from "@/components/form/ConnectedFieldTemplate";
 import React from "react";
-import { Col, Row } from "react-bootstrap";
 import { joinPathParts } from "@/utils/formUtils";
 
 type PipelineOptionsProps = {
@@ -26,9 +25,7 @@ type PipelineOptionsProps = {
 
 const PipelineOptions: React.FC<PipelineOptionsProps> = ({ elementName }) => (
   <>
-    <Row>
-      <Col>Use the Brick Actions Panel on the left to add and edit bricks.</Col>
-    </Row>
+    <p>Use the Brick Actions Panel on the left to add and edit bricks.</p>
     <ConnectedFieldTemplate
       name={joinPathParts(elementName, "config", "label")}
       label="Pipeline name"

diff --git a/src/components/formBuilder/edit/FormEditor.tsx b/src/components/formBuilder/edit/FormEditor.tsx
@@ -241,13 +241,11 @@ const FormEditor: React.FC<FormEditorProps> = ({
           <hr />
         </>
       )}
-      <Row className={styles.addRow}>
-        <Col>
-          <Button onClick={addProperty} variant="primary" size="sm">
-            <FontAwesomeIcon icon={faPlus} /> Add new field
-          </Button>
-        </Col>
-      </Row>
+      <div className={styles.addRow}>
+        <Button onClick={addProperty} variant="primary" size="sm">
+          <FontAwesomeIcon icon={faPlus} /> Add new field
+        </Button>
+      </div>
 
       <Row className={styles.currentFieldRow}>
         <Col xl="3" className={styles.currentField}>