diff options
Diffstat (limited to 'doc/development/fe_guide')
-rw-r--r-- | doc/development/fe_guide/content_editor.md | 6 | ||||
-rw-r--r-- | doc/development/fe_guide/customizable_dashboards.md | 4 | ||||
-rw-r--r-- | doc/development/fe_guide/merge_request_widget_extensions.md | 4 | ||||
-rw-r--r-- | doc/development/fe_guide/source_editor.md | 2 | ||||
-rw-r--r-- | doc/development/fe_guide/style/scss.md | 35 | ||||
-rw-r--r-- | doc/development/fe_guide/view_component.md | 4 | ||||
-rw-r--r-- | doc/development/fe_guide/vuex.md | 4 |
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' }) }); } |