docs: clean up examples (#6853)

react-bootstrap · Nov 10, 2024 · 03d5d19 · 03d5d19
1 parent 02c915a
commit 03d5d19
Show file tree

Hide file tree

Showing 19 changed files with 122 additions and 232 deletions.
diff --git a/www/docs/components/overlays.mdx b/www/docs/components/overlays.mdx
@@ -104,7 +104,7 @@ compliant.
 
 Hover over the links below to see tooltips.
 
-<CodeBlock language="jsx" live>
+<CodeBlock language="jsx" live noInline>
   {TooltipInCopy}
 </CodeBlock>
 

diff --git a/www/docs/examples/Button/Active.js b/www/docs/examples/Button/Active.js
@@ -5,7 +5,7 @@ function ActiveExample() {
     <>
       <Button variant="primary" size="lg" active>
         Primary button
-      </Button>{' '}
+      </Button>
       <Button variant="secondary" size="lg" active>
         Button
       </Button>

diff --git a/www/docs/examples/Button/Disabled.js b/www/docs/examples/Button/Disabled.js
@@ -5,10 +5,10 @@ function DisabledExample() {
     <>
       <Button variant="primary" size="lg" disabled>
         Primary button
-      </Button>{' '}
+      </Button>
       <Button variant="secondary" size="lg" disabled>
         Button
-      </Button>{' '}
+      </Button>
       <Button href="#" variant="secondary" size="lg" disabled>
         Link
       </Button>

diff --git a/www/docs/examples/Button/OutlineTypes.js b/www/docs/examples/Button/OutlineTypes.js
@@ -3,13 +3,13 @@ import Button from 'react-bootstrap/Button';
 function OutlineTypesExample() {
   return (
     <>
-      <Button variant="outline-primary">Primary</Button>{' '}
-      <Button variant="outline-secondary">Secondary</Button>{' '}
-      <Button variant="outline-success">Success</Button>{' '}
-      <Button variant="outline-warning">Warning</Button>{' '}
-      <Button variant="outline-danger">Danger</Button>{' '}
-      <Button variant="outline-info">Info</Button>{' '}
-      <Button variant="outline-light">Light</Button>{' '}
+      <Button variant="outline-primary">Primary</Button>
+      <Button variant="outline-secondary">Secondary</Button>
+      <Button variant="outline-success">Success</Button>
+      <Button variant="outline-warning">Warning</Button>
+      <Button variant="outline-danger">Danger</Button>
+      <Button variant="outline-info">Info</Button>
+      <Button variant="outline-light">Light</Button>
       <Button variant="outline-dark">Dark</Button>
     </>
   );

diff --git a/www/docs/examples/Button/Sizes.js b/www/docs/examples/Button/Sizes.js
@@ -3,18 +3,18 @@ import Button from 'react-bootstrap/Button';
 function SizesExample() {
   return (
     <>
-      <div className="mb-2">
+      <div className="d-flex gap-2 mb-2">
         <Button variant="primary" size="lg">
           Large button
-        </Button>{' '}
+        </Button>
         <Button variant="secondary" size="lg">
           Large button
         </Button>
       </div>
-      <div>
+      <div className="d-flex gap-2">
         <Button variant="primary" size="sm">
           Small button
-        </Button>{' '}
+        </Button>
         <Button variant="secondary" size="sm">
           Small button
         </Button>

diff --git a/www/docs/examples/Button/TagTypes.js b/www/docs/examples/Button/TagTypes.js
@@ -3,9 +3,9 @@ import Button from 'react-bootstrap/Button';
 function TagTypesExample() {
   return (
     <>
-      <Button href="#">Link</Button> <Button type="submit">Button</Button>{' '}
-      <Button as="input" type="button" value="Input" />{' '}
-      <Button as="input" type="submit" value="Submit" />{' '}
+      <Button href="#">Link</Button> <Button type="submit">Button</Button>
+      <Button as="input" type="button" value="Input" />
+      <Button as="input" type="submit" value="Submit" />
       <Button as="input" type="reset" value="Reset" />
     </>
   );

diff --git a/www/docs/examples/Button/Types.js b/www/docs/examples/Button/Types.js
@@ -3,13 +3,13 @@ import Button from 'react-bootstrap/Button';
 function TypesExample() {
   return (
     <>
-      <Button variant="primary">Primary</Button>{' '}
-      <Button variant="secondary">Secondary</Button>{' '}
-      <Button variant="success">Success</Button>{' '}
-      <Button variant="warning">Warning</Button>{' '}
-      <Button variant="danger">Danger</Button>{' '}
-      <Button variant="info">Info</Button>{' '}
-      <Button variant="light">Light</Button>{' '}
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="success">Success</Button>
+      <Button variant="warning">Warning</Button>
+      <Button variant="danger">Danger</Button>
+      <Button variant="info">Info</Button>
+      <Button variant="light">Light</Button>
       <Button variant="dark">Dark</Button>
       <Button variant="link">Link</Button>
     </>

diff --git a/www/docs/examples/ButtonGroup/Toolbar.js b/www/docs/examples/ButtonGroup/Toolbar.js
@@ -9,9 +9,9 @@ function ToolbarExample() {
     <>
       <ButtonToolbar className="mb-3" aria-label="Toolbar with Button groups">
         <ButtonGroup className="me-2" aria-label="First group">
-          <Button variant="secondary">1</Button>{' '}
-          <Button variant="secondary">2</Button>{' '}
-          <Button variant="secondary">3</Button>{' '}
+          <Button variant="secondary">1</Button>
+          <Button variant="secondary">2</Button>
+          <Button variant="secondary">3</Button>
           <Button variant="secondary">4</Button>
         </ButtonGroup>
         <InputGroup>
@@ -30,9 +30,9 @@ function ToolbarExample() {
         aria-label="Toolbar with Button groups"
       >
         <ButtonGroup aria-label="First group">
-          <Button variant="secondary">1</Button>{' '}
-          <Button variant="secondary">2</Button>{' '}
-          <Button variant="secondary">3</Button>{' '}
+          <Button variant="secondary">1</Button>
+          <Button variant="secondary">2</Button>
+          <Button variant="secondary">3</Button>
           <Button variant="secondary">4</Button>
         </ButtonGroup>
         <InputGroup>

diff --git a/www/docs/examples/ButtonGroup/ToolbarBasic.js b/www/docs/examples/ButtonGroup/ToolbarBasic.js
@@ -6,11 +6,15 @@ function ToolbarBasicExample() {
   return (
     <ButtonToolbar aria-label="Toolbar with button groups">
       <ButtonGroup className="me-2" aria-label="First group">
-        <Button>1</Button> <Button>2</Button> <Button>3</Button>{' '}
+        <Button>1</Button>
+        <Button>2</Button>
+        <Button>3</Button>
         <Button>4</Button>
       </ButtonGroup>
       <ButtonGroup className="me-2" aria-label="Second group">
-        <Button>5</Button> <Button>6</Button> <Button>7</Button>
+        <Button>5</Button>
+        <Button>6</Button>
+        <Button>7</Button>
       </ButtonGroup>
       <ButtonGroup aria-label="Third group">
         <Button>8</Button>

diff --git a/www/docs/examples/Card/Group.js b/www/docs/examples/Card/Group.js
@@ -23,7 +23,7 @@ function GroupExample() {
           <Card.Title>Card title</Card.Title>
           <Card.Text>
             This card has supporting text below as a natural lead-in to
-            additional content.{' '}
+            additional content.
           </Card.Text>
         </Card.Body>
         <Card.Footer>

diff --git a/www/docs/examples/Card/WithHeaderAndQuote.js b/www/docs/examples/Card/WithHeaderAndQuote.js
@@ -7,9 +7,8 @@ function WithHeaderAndQuoteExample() {
       <Card.Body>
         <blockquote className="blockquote mb-0">
           <p>
-            {' '}
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
-            posuere erat a ante.{' '}
+            posuere erat a ante.
           </p>
           <footer className="blockquote-footer">
             Someone famous in <cite title="Source Title">Source Title</cite>

diff --git a/www/docs/examples/Dropdown/ButtonCustom.js b/www/docs/examples/Dropdown/ButtonCustom.js
@@ -16,7 +16,7 @@ function ButtonCustomExample() {
           <Dropdown.Divider />
           <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
         </Dropdown.Menu>
-      </Dropdown>{' '}
+      </Dropdown>
       <Dropdown as={ButtonGroup}>
         <Button variant="info">mix it up style-wise</Button>
         <Dropdown.Toggle split variant="success" id="dropdown-custom-2" />

diff --git a/www/docs/examples/Dropdown/ButtonSizes.js b/www/docs/examples/Dropdown/ButtonSizes.js
@@ -6,41 +6,38 @@ import SplitButton from 'react-bootstrap/SplitButton';
 function ButtonSizesExample() {
   return (
     <>
-      <div className="mb-2">
-        {[DropdownButton, SplitButton].map((DropdownType, idx) => (
-          <DropdownType
-            as={ButtonGroup}
-            key={idx}
-            id={`dropdown-button-drop-${idx}`}
-            size="lg"
-            title="Drop large"
-          >
-            <Dropdown.Item eventKey="1">Action</Dropdown.Item>
-            <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
-            <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
-            <Dropdown.Divider />
-            <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
-          </DropdownType>
-        ))}
-      </div>
-      <div>
-        {[DropdownButton, SplitButton].map((DropdownType, idx) => (
-          <DropdownType
-            as={ButtonGroup}
-            key={idx}
-            id={`dropdown-button-drop-${idx}`}
-            size="sm"
-            variant="secondary"
-            title="Drop small"
-          >
-            <Dropdown.Item eventKey="1">Action</Dropdown.Item>
-            <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
-            <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
-            <Dropdown.Divider />
-            <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
-          </DropdownType>
-        ))}
-      </div>
+      {[DropdownButton, SplitButton].map((DropdownType, idx) => (
+        <DropdownType
+          as={ButtonGroup}
+          key={idx}
+          id={`dropdown-button-drop-${idx}`}
+          size="lg"
+          title="Drop large"
+        >
+          <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+          <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+          <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+        </DropdownType>
+      ))}
+
+      {[DropdownButton, SplitButton].map((DropdownType, idx) => (
+        <DropdownType
+          as={ButtonGroup}
+          key={idx}
+          id={`dropdown-button-drop-${idx}`}
+          size="sm"
+          variant="secondary"
+          title="Drop small"
+        >
+          <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+          <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+          <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+        </DropdownType>
+      ))}
     </>
   );
 }

diff --git a/www/docs/examples/Dropdown/DropDirections.js b/www/docs/examples/Dropdown/DropDirections.js
@@ -2,51 +2,47 @@ import Dropdown from 'react-bootstrap/Dropdown';
 import DropdownButton from 'react-bootstrap/DropdownButton';
 import SplitButton from 'react-bootstrap/SplitButton';
 
-function DropDirectioExample() {
+function DropDirectionExample() {
   return (
     <>
-      <div className="mb-2">
-        {['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
-          (direction) => (
-            <DropdownButton
-              as={ButtonGroup}
-              key={direction}
-              id={`dropdown-button-drop-${direction}`}
-              drop={direction}
-              variant="secondary"
-              title={` Drop ${direction} `}
-            >
-              <Dropdown.Item eventKey="1">Action</Dropdown.Item>
-              <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
-              <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
-              <Dropdown.Divider />
-              <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
-            </DropdownButton>
-          ),
-        )}
-      </div>
+      {['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
+        (direction) => (
+          <DropdownButton
+            as={ButtonGroup}
+            key={direction}
+            id={`dropdown-button-drop-${direction}`}
+            drop={direction}
+            variant="secondary"
+            title={`Drop ${direction}`}
+          >
+            <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+            <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+            <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+          </DropdownButton>
+        ),
+      )}
 
-      <div>
-        {['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
-          (direction) => (
-            <SplitButton
-              key={direction}
-              id={`dropdown-button-drop-${direction}`}
-              drop={direction}
-              variant="secondary"
-              title={`Drop ${direction}`}
-            >
-              <Dropdown.Item eventKey="1">Action</Dropdown.Item>
-              <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
-              <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
-              <Dropdown.Divider />
-              <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
-            </SplitButton>
-          ),
-        )}
-      </div>
+      {['up', 'up-centered', 'down', 'down-centered', 'start', 'end'].map(
+        (direction) => (
+          <SplitButton
+            key={direction}
+            id={`dropdown-button-drop-${direction}`}
+            drop={direction}
+            variant="secondary"
+            title={`Drop ${direction}`}
+          >
+            <Dropdown.Item eventKey="1">Action</Dropdown.Item>
+            <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
+            <Dropdown.Item eventKey="3">Something else here</Dropdown.Item>
+            <Dropdown.Divider />
+            <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
+          </SplitButton>
+        ),
+      )}
     </>
   );
 }
 
-export default DropDirectioExample;
+export default DropDirectionExample;