From e0a6475a40f37dde00aa7c54cc843958c8560ed4 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 31 Aug 2023 15:32:49 -0400
Subject: [PATCH 1/7] docs(fab): add playground for safe area workaround

---
 docs/api/fab.md                               | 21 +++++++++++-
 .../angular/example_component_css.md          |  5 +++
 .../angular/example_component_html.md         |  7 ++++
 static/usage/v7/fab/safe-area/demo.html       | 28 ++++++++++++++++
 static/usage/v7/fab/safe-area/index.md        | 33 +++++++++++++++++++
 static/usage/v7/fab/safe-area/javascript.md   | 13 ++++++++
 .../usage/v7/fab/safe-area/react/main_css.md  |  5 +++
 .../usage/v7/fab/safe-area/react/main_tsx.md  | 18 ++++++++++
 static/usage/v7/fab/safe-area/vue.md          | 32 ++++++++++++++++++
 9 files changed, 161 insertions(+), 1 deletion(-)
 create mode 100644 static/usage/v7/fab/safe-area/angular/example_component_css.md
 create mode 100644 static/usage/v7/fab/safe-area/angular/example_component_html.md
 create mode 100644 static/usage/v7/fab/safe-area/demo.html
 create mode 100644 static/usage/v7/fab/safe-area/index.md
 create mode 100644 static/usage/v7/fab/safe-area/javascript.md
 create mode 100644 static/usage/v7/fab/safe-area/react/main_css.md
 create mode 100644 static/usage/v7/fab/safe-area/react/main_tsx.md
 create mode 100644 static/usage/v7/fab/safe-area/vue.md

diff --git a/docs/api/fab.md b/docs/api/fab.md
index 8c20a763770..a084f2b2bd5 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -41,6 +41,26 @@ import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
 
 <Positioning />
 
+### Safe Area
+
+If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/layout/safe-area) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](#application-variables).
+
+When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set:
+
+import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
+
+<SafeArea />
+
+And when using a fab with `vertical` set to `"bottom"` without an `ion-footer`, the bottom margin needs to be set:
+
+```css
+ion-fab {
+  margin-bottom: var(--ion-safe-area-bottom, 0);
+}
+```
+
+If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer.
+
 ## Button Sizing
 
 Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
@@ -68,7 +88,6 @@ import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-pr
 import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
 
 <CSSShadowParts />
- 
 
 ## Accessibility
 
diff --git a/static/usage/v7/fab/safe-area/angular/example_component_css.md b/static/usage/v7/fab/safe-area/angular/example_component_css.md
new file mode 100644
index 00000000000..c41ddb144a7
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/angular/example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-fab {
+  margin-top: var(--ion-safe-area-top, 0);
+}
+```
diff --git a/static/usage/v7/fab/safe-area/angular/example_component_html.md b/static/usage/v7/fab/safe-area/angular/example_component_html.md
new file mode 100644
index 00000000000..3ba464d7f58
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/angular/example_component_html.md
@@ -0,0 +1,7 @@
+```html
+<ion-fab slot="fixed" vertical="top" horizontal="center">
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
+```
diff --git a/static/usage/v7/fab/safe-area/demo.html b/static/usage/v7/fab/safe-area/demo.html
new file mode 100644
index 00000000000..998593d9ca7
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fab</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+
+    <style>
+      ion-fab {
+        margin-top: var(--ion-safe-area-top, 0);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-fab slot="fixed" vertical="top" horizontal="center">
+        <ion-fab-button>
+          <ion-icon name="add"></ion-icon>
+        </ion-fab-button>
+      </ion-fab>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/v7/fab/safe-area/index.md b/static/usage/v7/fab/safe-area/index.md
new file mode 100644
index 00000000000..024cc427522
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/index.md
@@ -0,0 +1,33 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react: {
+      files: {
+        'src/main.tsx': react_main_tsx,
+        'src/main.css': react_main_css,
+      },
+    },
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
+      },
+    },
+  }}
+  src="usage/v7/fab/safe-area/demo.html"
+  devicePreview={true}
+/>
diff --git a/static/usage/v7/fab/safe-area/javascript.md b/static/usage/v7/fab/safe-area/javascript.md
new file mode 100644
index 00000000000..5f4e28d8961
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/javascript.md
@@ -0,0 +1,13 @@
+```html
+<ion-fab slot="fixed" vertical="top" horizontal="center">
+  <ion-fab-button>
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
+
+<style>
+  ion-fab {
+    margin-top: var(--ion-safe-area-top, 0);
+  }
+</style>
+```
diff --git a/static/usage/v7/fab/safe-area/react/main_css.md b/static/usage/v7/fab/safe-area/react/main_css.md
new file mode 100644
index 00000000000..c41ddb144a7
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/react/main_css.md
@@ -0,0 +1,5 @@
+```css
+ion-fab {
+  margin-top: var(--ion-safe-area-top, 0);
+}
+```
diff --git a/static/usage/v7/fab/safe-area/react/main_tsx.md b/static/usage/v7/fab/safe-area/react/main_tsx.md
new file mode 100644
index 00000000000..d5a790048e7
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/react/main_tsx.md
@@ -0,0 +1,18 @@
+```tsx
+import React from 'react';
+import { IonFab, IonFabButton, IonIcon } from '@ionic/react';
+import { add } from 'ionicons/icons';
+
+import './main.css';
+
+function Example() {
+  return (
+    <IonFab slot="fixed" vertical="top" horizontal="center">
+      <IonFabButton>
+        <IonIcon icon={add}></IonIcon>
+      </IonFabButton>
+    </IonFab>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/v7/fab/safe-area/vue.md b/static/usage/v7/fab/safe-area/vue.md
new file mode 100644
index 00000000000..2ebceae1f6d
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <ion-fab slot="fixed" vertical="top" horizontal="center">
+    <ion-fab-button>
+      <ion-icon :icon="add"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
+</template>
+
+<script lang="ts">
+  import { IonFab, IonFabButton, IonIcon } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+  import { add } from 'ionicons/icons';
+
+  export default defineComponent({
+    components: {
+      IonFab,
+      IonFabButton,
+      IonIcon,
+    },
+    setup() {
+      return { add };
+    },
+  });
+</script>
+
+<style scoped>
+  ion-fab {
+    margin-top: var(--ion-safe-area-top, 0);
+  }
+</style>
+```

From 5b13f717e873e9d98ac5f0ebbffe31ae29b1012d Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Thu, 31 Aug 2023 15:59:56 -0400
Subject: [PATCH 2/7] Try to fix links

---
 docs/api/fab.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/fab.md b/docs/api/fab.md
index a084f2b2bd5..be5d3d1a41f 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -43,7 +43,7 @@ import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
 
 ### Safe Area
 
-If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/layout/safe-area) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](#application-variables).
+If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced#application-variables).
 
 When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set:
 

From c41c634e712aee8cfda83faaf2af4a5e7cdfd9bf Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Sep 2023 14:06:32 -0400
Subject: [PATCH 3/7] Add safe area sizes for stackblitzes

---
 .../safe-area/angular/example_component_css.md   |  5 -----
 .../usage/v7/fab/safe-area/angular/global_css.md | 16 ++++++++++++++++
 static/usage/v7/fab/safe-area/index.md           |  4 ++--
 static/usage/v7/fab/safe-area/javascript.md      | 11 +++++++++++
 static/usage/v7/fab/safe-area/react/main_css.md  | 11 +++++++++++
 static/usage/v7/fab/safe-area/vue.md             | 13 ++++++++++++-
 6 files changed, 52 insertions(+), 8 deletions(-)
 delete mode 100644 static/usage/v7/fab/safe-area/angular/example_component_css.md
 create mode 100644 static/usage/v7/fab/safe-area/angular/global_css.md

diff --git a/static/usage/v7/fab/safe-area/angular/example_component_css.md b/static/usage/v7/fab/safe-area/angular/example_component_css.md
deleted file mode 100644
index c41ddb144a7..00000000000
--- a/static/usage/v7/fab/safe-area/angular/example_component_css.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```css
-ion-fab {
-  margin-top: var(--ion-safe-area-top, 0);
-}
-```
diff --git a/static/usage/v7/fab/safe-area/angular/global_css.md b/static/usage/v7/fab/safe-area/angular/global_css.md
new file mode 100644
index 00000000000..07eb28b2a36
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/angular/global_css.md
@@ -0,0 +1,16 @@
+```css
+:root {
+  /**
+   * Setting the variables for DEMO purposes only.
+   * Values will be set automatically when building an iOS or Android app.
+   */
+  --ion-safe-area-top: 20px;
+  --ion-safe-area-bottom: 20px;
+  --ion-safe-area-left: 20px;
+  --ion-safe-area-right: 20px;
+}
+
+ion-fab {
+  margin-top: var(--ion-safe-area-top, 0);
+}
+```
diff --git a/static/usage/v7/fab/safe-area/index.md b/static/usage/v7/fab/safe-area/index.md
index 024cc427522..f80f1721466 100644
--- a/static/usage/v7/fab/safe-area/index.md
+++ b/static/usage/v7/fab/safe-area/index.md
@@ -8,7 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
-import angular_example_component_css from './angular/example_component_css.md';
+import angular_global_css from './angular/global_css.md';
 
 <Playground
   version="7"
@@ -24,7 +24,7 @@ import angular_example_component_css from './angular/example_component_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-        'src/app/example.component.css': angular_example_component_css,
+        'src/global.css': angular_global_css,
       },
     },
   }}
diff --git a/static/usage/v7/fab/safe-area/javascript.md b/static/usage/v7/fab/safe-area/javascript.md
index 5f4e28d8961..f5f6da2a768 100644
--- a/static/usage/v7/fab/safe-area/javascript.md
+++ b/static/usage/v7/fab/safe-area/javascript.md
@@ -6,6 +6,17 @@
 </ion-fab>
 
 <style>
+  :root {
+    /**
+   * Setting the variables for DEMO purposes only.
+   * Values will be set automatically when building an iOS or Android app.
+   */
+    --ion-safe-area-top: 20px;
+    --ion-safe-area-bottom: 20px;
+    --ion-safe-area-left: 20px;
+    --ion-safe-area-right: 20px;
+  }
+
   ion-fab {
     margin-top: var(--ion-safe-area-top, 0);
   }
diff --git a/static/usage/v7/fab/safe-area/react/main_css.md b/static/usage/v7/fab/safe-area/react/main_css.md
index c41ddb144a7..07eb28b2a36 100644
--- a/static/usage/v7/fab/safe-area/react/main_css.md
+++ b/static/usage/v7/fab/safe-area/react/main_css.md
@@ -1,4 +1,15 @@
 ```css
+:root {
+  /**
+   * Setting the variables for DEMO purposes only.
+   * Values will be set automatically when building an iOS or Android app.
+   */
+  --ion-safe-area-top: 20px;
+  --ion-safe-area-bottom: 20px;
+  --ion-safe-area-left: 20px;
+  --ion-safe-area-right: 20px;
+}
+
 ion-fab {
   margin-top: var(--ion-safe-area-top, 0);
 }
diff --git a/static/usage/v7/fab/safe-area/vue.md b/static/usage/v7/fab/safe-area/vue.md
index 2ebceae1f6d..db875838ab3 100644
--- a/static/usage/v7/fab/safe-area/vue.md
+++ b/static/usage/v7/fab/safe-area/vue.md
@@ -24,7 +24,18 @@
   });
 </script>
 
-<style scoped>
+<style>
+  :root {
+    /**
+   * Setting the variables for DEMO purposes only.
+   * Values will be set automatically when building an iOS or Android app.
+   */
+    --ion-safe-area-top: 20px;
+    --ion-safe-area-bottom: 20px;
+    --ion-safe-area-left: 20px;
+    --ion-safe-area-right: 20px;
+  }
+
   ion-fab {
     margin-top: var(--ion-safe-area-top, 0);
   }

From 46ac47fa85605227d5b896258b705b20c3afb048 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Sep 2023 15:02:52 -0400
Subject: [PATCH 4/7] Use both component & global css files

---
 .../fab/safe-area/angular/angular_example_component_css.md   | 5 +++++
 static/usage/v7/fab/safe-area/angular/global_css.md          | 4 ----
 static/usage/v7/fab/safe-area/index.md                       | 2 ++
 3 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 static/usage/v7/fab/safe-area/angular/angular_example_component_css.md

diff --git a/static/usage/v7/fab/safe-area/angular/angular_example_component_css.md b/static/usage/v7/fab/safe-area/angular/angular_example_component_css.md
new file mode 100644
index 00000000000..c41ddb144a7
--- /dev/null
+++ b/static/usage/v7/fab/safe-area/angular/angular_example_component_css.md
@@ -0,0 +1,5 @@
+```css
+ion-fab {
+  margin-top: var(--ion-safe-area-top, 0);
+}
+```
diff --git a/static/usage/v7/fab/safe-area/angular/global_css.md b/static/usage/v7/fab/safe-area/angular/global_css.md
index 07eb28b2a36..bd18709f492 100644
--- a/static/usage/v7/fab/safe-area/angular/global_css.md
+++ b/static/usage/v7/fab/safe-area/angular/global_css.md
@@ -9,8 +9,4 @@
   --ion-safe-area-left: 20px;
   --ion-safe-area-right: 20px;
 }
-
-ion-fab {
-  margin-top: var(--ion-safe-area-top, 0);
-}
 ```
diff --git a/static/usage/v7/fab/safe-area/index.md b/static/usage/v7/fab/safe-area/index.md
index f80f1721466..d8f761227c6 100644
--- a/static/usage/v7/fab/safe-area/index.md
+++ b/static/usage/v7/fab/safe-area/index.md
@@ -8,6 +8,7 @@ import react_main_css from './react/main_css.md';
 import vue from './vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_css from './angular/example_component_css.md';
 import angular_global_css from './angular/global_css.md';
 
 <Playground
@@ -24,6 +25,7 @@ import angular_global_css from './angular/global_css.md';
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.css': angular_example_component_css,
         'src/global.css': angular_global_css,
       },
     },

From a884689f0a07c604229edfb79b8e394811b4441b Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Sep 2023 15:06:48 -0400
Subject: [PATCH 5/7] Use both scoped and global style tags

---
 static/usage/v7/fab/safe-area/vue.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/static/usage/v7/fab/safe-area/vue.md b/static/usage/v7/fab/safe-area/vue.md
index db875838ab3..610aad8d032 100644
--- a/static/usage/v7/fab/safe-area/vue.md
+++ b/static/usage/v7/fab/safe-area/vue.md
@@ -35,7 +35,9 @@
     --ion-safe-area-left: 20px;
     --ion-safe-area-right: 20px;
   }
+</style>
 
+<style scoped>
   ion-fab {
     margin-top: var(--ion-safe-area-top, 0);
   }

From c856a9b39af2e1c6f7f4e5e1a780035f8a229442 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Fri, 1 Sep 2023 15:11:43 -0400
Subject: [PATCH 6/7] Add bottom

---
 docs/api/fab.md                                      | 12 +++++++++---
 ...ple_component_css.md => example_component_css.md} |  1 +
 static/usage/v7/fab/safe-area/angular/global_css.md  |  2 --
 static/usage/v7/fab/safe-area/javascript.md          |  3 +--
 static/usage/v7/fab/safe-area/react/main_css.md      |  3 +--
 static/usage/v7/fab/safe-area/vue.md                 |  3 +--
 6 files changed, 13 insertions(+), 11 deletions(-)
 rename static/usage/v7/fab/safe-area/angular/{angular_example_component_css.md => example_component_css.md} (57%)

diff --git a/docs/api/fab.md b/docs/api/fab.md
index be5d3d1a41f..2eaf9244ad6 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -47,9 +47,11 @@ If there is no `ion-header` or `ion-footer` component, the fab may be covered by
 
 When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set:
 
-import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
-
-<SafeArea />
+```css
+ion-fab {
+  margin-top: var(--ion-safe-area-top, 0);
+}
+```
 
 And when using a fab with `vertical` set to `"bottom"` without an `ion-footer`, the bottom margin needs to be set:
 
@@ -59,6 +61,10 @@ ion-fab {
 }
 ```
 
+import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
+
+<SafeArea />
+
 If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer.
 
 ## Button Sizing
diff --git a/static/usage/v7/fab/safe-area/angular/angular_example_component_css.md b/static/usage/v7/fab/safe-area/angular/example_component_css.md
similarity index 57%
rename from static/usage/v7/fab/safe-area/angular/angular_example_component_css.md
rename to static/usage/v7/fab/safe-area/angular/example_component_css.md
index c41ddb144a7..a19373c3cc5 100644
--- a/static/usage/v7/fab/safe-area/angular/angular_example_component_css.md
+++ b/static/usage/v7/fab/safe-area/angular/example_component_css.md
@@ -1,5 +1,6 @@
 ```css
 ion-fab {
   margin-top: var(--ion-safe-area-top, 0);
+  margin-bottom: var(--ion-safe-area-bottom, 0);
 }
 ```
diff --git a/static/usage/v7/fab/safe-area/angular/global_css.md b/static/usage/v7/fab/safe-area/angular/global_css.md
index bd18709f492..d1b434fa246 100644
--- a/static/usage/v7/fab/safe-area/angular/global_css.md
+++ b/static/usage/v7/fab/safe-area/angular/global_css.md
@@ -6,7 +6,5 @@
    */
   --ion-safe-area-top: 20px;
   --ion-safe-area-bottom: 20px;
-  --ion-safe-area-left: 20px;
-  --ion-safe-area-right: 20px;
 }
 ```
diff --git a/static/usage/v7/fab/safe-area/javascript.md b/static/usage/v7/fab/safe-area/javascript.md
index f5f6da2a768..4585b8d545c 100644
--- a/static/usage/v7/fab/safe-area/javascript.md
+++ b/static/usage/v7/fab/safe-area/javascript.md
@@ -13,12 +13,11 @@
    */
     --ion-safe-area-top: 20px;
     --ion-safe-area-bottom: 20px;
-    --ion-safe-area-left: 20px;
-    --ion-safe-area-right: 20px;
   }
 
   ion-fab {
     margin-top: var(--ion-safe-area-top, 0);
+    margin-bottom: var(--ion-safe-area-bottom, 0);
   }
 </style>
 ```
diff --git a/static/usage/v7/fab/safe-area/react/main_css.md b/static/usage/v7/fab/safe-area/react/main_css.md
index 07eb28b2a36..ecbcce54651 100644
--- a/static/usage/v7/fab/safe-area/react/main_css.md
+++ b/static/usage/v7/fab/safe-area/react/main_css.md
@@ -6,11 +6,10 @@
    */
   --ion-safe-area-top: 20px;
   --ion-safe-area-bottom: 20px;
-  --ion-safe-area-left: 20px;
-  --ion-safe-area-right: 20px;
 }
 
 ion-fab {
   margin-top: var(--ion-safe-area-top, 0);
+  margin-bottom: var(--ion-safe-area-bottom, 0);
 }
 ```
diff --git a/static/usage/v7/fab/safe-area/vue.md b/static/usage/v7/fab/safe-area/vue.md
index 610aad8d032..1127a3128db 100644
--- a/static/usage/v7/fab/safe-area/vue.md
+++ b/static/usage/v7/fab/safe-area/vue.md
@@ -32,14 +32,13 @@
    */
     --ion-safe-area-top: 20px;
     --ion-safe-area-bottom: 20px;
-    --ion-safe-area-left: 20px;
-    --ion-safe-area-right: 20px;
   }
 </style>
 
 <style scoped>
   ion-fab {
     margin-top: var(--ion-safe-area-top, 0);
+    margin-bottom: var(--ion-safe-area-bottom, 0);
   }
 </style>
 ```

From 48bbb8e8784714c0be7039fc03731601f4361ae8 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Tue, 5 Sep 2023 10:29:18 -0400
Subject: [PATCH 7/7] Address PR feedback

---
 docs/api/fab.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/api/fab.md b/docs/api/fab.md
index 2eaf9244ad6..13be8564843 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -61,12 +61,12 @@ ion-fab {
 }
 ```
 
+If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer.
+
 import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
 
 <SafeArea />
 
-If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer.
-
 ## Button Sizing
 
 Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.