7 files changed, 48 insertions, 11 deletions
diff --git a/doc/development/fe_guide/content_editor.md b/doc/development/fe_guide/content_editor.md
index 982033cf2ad..6d13f419430 100644
--- a/doc/development/fe_guide/content_editor.md
+++ b/doc/development/fe_guide/content_editor.md
@@ -4,7 +4,7 @@ group: Editor
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 
-# Content Editor development guidelines **(FREE)**
+# Content Editor development guidelines
 
 The Content Editor is a UI component that provides a WYSIWYG editing
 experience for [GitLab Flavored Markdown](../../user/markdown.md) in the GitLab application.
@@ -64,7 +64,7 @@ Instead, you should obtain an instance of the `ContentEditor` class by listening
 
 ```html
 <script>
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import { __ } from '~/locale';
 
 export default {
@@ -75,7 +75,7 @@ export default {
       try {
         await this.contentEditor.setSerializedContent(this.content);
       } catch (e) {
-        createFlash(__('Could not load initial document'));
+        createAlert({ message: __('Could not load initial document') });
       }
     },
     submitChanges() {
diff --git a/doc/development/fe_guide/customizable_dashboards.md b/doc/development/fe_guide/customizable_dashboards.md
index 807f83f5bec..7e7718f8e60 100644
--- a/doc/development/fe_guide/customizable_dashboards.md
+++ b/doc/development/fe_guide/customizable_dashboards.md
@@ -4,13 +4,15 @@ group: Product Analytics
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 
-# Customizable dashboards **(PREMIUM)**
+# Customizable dashboards
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/98610) in GitLab 15.5 as an [Alpha feature](../../policy/alpha-beta-support.md#alpha-features).
 
 Customizable dashboards provide a dashboard structure that allows users to create
 their own dashboards and commit the structure to a repository.
 
+This feature is available for Premium and Ultimate subscriptions.
+
 ## Usage
 
 To use customizable dashboards:
diff --git a/doc/development/fe_guide/merge_request_widget_extensions.md b/doc/development/fe_guide/merge_request_widget_extensions.md
index 49c6664c6d6..5ad918d466b 100644
--- a/doc/development/fe_guide/merge_request_widget_extensions.md
+++ b/doc/development/fe_guide/merge_request_widget_extensions.md
@@ -4,7 +4,7 @@ group: Code Review
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 
-# Merge request widget extensions **(FREE)**
+# Merge request widget extensions
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44616) in GitLab 13.6.
 
@@ -40,7 +40,7 @@ export default {
     summary(data) {},     // Required: Level 1 summary text
     statusIcon(data) {},  // Required: Level 1 status icon
     tertiaryButtons() {}, // Optional: Level 1 action buttons
-    shouldCollapse() {}, // Optional: Add logic to determine if the widget can expand or not
+    shouldCollapse(data) {}, // Optional: Add logic to determine if the widget can expand or not
   },
   methods: {
     fetchCollapsedData(props) {}, // Required: Fetches data required for collapsed state
diff --git a/doc/development/fe_guide/source_editor.md b/doc/development/fe_guide/source_editor.md
index 4cfc68553e0..5f2e8c1e029 100644
--- a/doc/development/fe_guide/source_editor.md
+++ b/doc/development/fe_guide/source_editor.md
@@ -4,7 +4,7 @@ group: Editor
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
 ---
 
-# Source Editor **(FREE)**
+# Source Editor
 
 **Source Editor** provides the editing experience at GitLab. This thin wrapper around
 [the Monaco editor](https://microsoft.github.io/monaco-editor/) provides necessary
diff --git a/doc/development/fe_guide/style/scss.md b/doc/development/fe_guide/style/scss.md
index 7a5c955db93..b84f41311b6 100644
--- a/doc/development/fe_guide/style/scss.md
+++ b/doc/development/fe_guide/style/scss.md
@@ -61,6 +61,41 @@ Inspiration:
 - <https://tailwindcss.com/docs/utility-first>
 - <https://tailwindcss.com/docs/extracting-components>
 
+#### Utility mixins
+
+In addition to utility classes GitLab UI provides utility mixins named after the utility classes.
+
+For example a utility class `.gl-mt-3` will have a corresponding mixin `gl-mt-3`. Here's how it can be used in an SCSS file:
+
+```scss
+.my-class {
+  @include gl-mt-3;
+}
+```
+
+These mixins should be used to replace _magic values_ in our code.
+For example a `margin-top: 8px` is a good candidate for the `@include gl-mt-3` mixin replacement.
+
+Avoid using utility mixins for [pre-defined CSS keywords](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#pre-defined_keyword_values).
+For example prefer `display: flex` over `@include gl-display-flex`.
+
+```scss
+// Bad
+.my-class {
+  @include gl-display-flex;
+}
+
+// Good
+.my-class {
+  display: flex;
+}
+
+// Good
+.my-class {
+  @include gl-mt-3;
+}
+```
+
 ### Naming
 
 Filenames should use `snake_case`.
diff --git a/doc/development/fe_guide/view_component.md b/doc/development/fe_guide/view_component.md
index 90bb75514d8..f9d148d8b82 100644
--- a/doc/development/fe_guide/view_component.md
+++ b/doc/development/fe_guide/view_component.md
@@ -179,9 +179,9 @@ For the full list of options, see its
 The `Pajamas::CheckboxComponent` follows the [Pajamas Checkbox](https://design.gitlab.com/components/checkbox/) specification.
 
 NOTE:
-`Pajamas::CheckboxComponent` is used internally by the [GitLab UI form builder](haml.md#use-the-gitlab-ui-form-builder) and requires an instance of [ActionView::Helpers::FormBuilder](https://api.rubyonrails.org/v6.1.0/classes/ActionView/Helpers/FormBuilder.html) to be passed as the `form` argument.
+`Pajamas::CheckboxComponent` is used internally by the [GitLab UI form builder](haml.md#use-the-gitlab-ui-form-builder) and requires an instance of [ActionView::Helpers::FormBuilder](https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html) to be passed as the `form` argument.
 It is preferred to use the [`gitlab_ui_checkbox_component`](haml.md#gitlab_ui_checkbox_component) method to render this ViewComponent.
-To use a checkbox without an instance of [ActionView::Helpers::FormBuilder](https://api.rubyonrails.org/v6.1.0/classes/ActionView/Helpers/FormBuilder.html) use [CheckboxTagComponent](#checkbox-tag).
+To use a checkbox without an instance of [ActionView::Helpers::FormBuilder](https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html) use [CheckboxTagComponent](#checkbox-tag).
 
 For the full list of options, see its
 [source](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/components/pajamas/checkbox_component.rb).
diff --git a/doc/development/fe_guide/vuex.md b/doc/development/fe_guide/vuex.md
index 19bbfa314ea..01ee50fb6ca 100644
--- a/doc/development/fe_guide/vuex.md
+++ b/doc/development/fe_guide/vuex.md
@@ -97,7 +97,7 @@ In this file, we write the actions that call mutations for handling a list of us
 ```javascript
   import * as types from './mutation_types';
   import axios from '~/lib/utils/axios_utils';
-  import createFlash from '~/flash';
+  import { createAlert } from '~/flash';
 
   export const fetchUsers = ({ state, dispatch }) => {
     commit(types.REQUEST_USERS);
@@ -106,7 +106,7 @@ In this file, we write the actions that call mutations for handling a list of us
       .then(({ data }) => commit(types.RECEIVE_USERS_SUCCESS, data))
       .catch((error) => {
         commit(types.RECEIVE_USERS_ERROR, error)
-        createFlash({ message: 'There was an error' })
+        createAlert({ message: 'There was an error' })
       });
   }