diff --git a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
index a53b1b06be94175f718c7a02442898be775eb206..8418c0f66ac942368bb802da8b711dd40e248e00 100644
--- a/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
+++ b/app/assets/javascripts/behaviors/shortcuts/shortcuts_toggle.vue
@@ -1,11 +1,10 @@
<script>
-import { GlToggle, GlSprintf } from '@gitlab/ui';
+import { GlToggle } from '@gitlab/ui';
import AccessorUtilities from '~/lib/utils/accessor';
import { disableShortcuts, enableShortcuts, shouldDisableShortcuts } from './shortcuts_toggle';
export default {
components: {
- GlSprintf,
GlToggle,
},
data() {
@@ -32,29 +31,10 @@ export default {
<gl-toggle
v-model="shortcutsEnabled"
aria-describedby="shortcutsToggle"
- class="prepend-left-10 mb-0"
- label-position="right"
+ label="Keyboard shortcuts"
+ label-position="left"
@change="onChange"
- >
- <template #labelOn>
- <gl-sprintf
- :message="__('%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Enabled')"
- >
- <template #screenreaderOnly="{ content }">
- <span class="sr-only">{{ content }}</span>
- </template>
- </gl-sprintf>
- </template>
- <template #labelOff>
- <gl-sprintf
- :message="__('%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled')"
- >
- <template #screenreaderOnly="{ content }">
- <span class="sr-only">{{ content }}</span>
- </template>
- </gl-sprintf>
- </template>
- </gl-toggle>
+ />
<div id="shortcutsToggle" class="sr-only">{{ __('Enable or disable keyboard shortcuts') }}</div>
</div>
</template>
diff --git a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
index 54f5468bdd0ce89a8585e1b2e5750d71100ac907..87c3225085f351ae76b5570ef7cf56d37da47c97 100644
--- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
+++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
@@ -198,13 +198,7 @@ export default {
</strong>
</p>
<div class="form-check form-check-inline mt-3">
- <gl-toggle
- v-model="modSecurityEnabled"
- :label-on="__('Enabled')"
- :label-off="__('Disabled')"
- :disabled="saveButtonDisabled"
- label-position="right"
- />
+ <gl-toggle v-model="modSecurityEnabled" :disabled="saveButtonDisabled" />
</div>
<div
v-if="ingress.modsecurity_enabled"
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index bd5424c30c67909f2e1c2cc8ce3839cff5457a19..3e9a77d01b45131f563b364a02bb31818b35fd33 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -2,10 +2,6 @@
.modal-dialog.modal-lg.modal-1040
.modal-content
.modal-header
- %h4.modal-title
- = _('Keyboard Shortcuts')
- %small
- = link_to _('(Show all)'), '#', class: 'js-more-help-button'
.js-toggle-shortcuts
%button.close{ type: "button", "data-dismiss": "modal", "aria-label" => _('Close') }
%span{ "aria-hidden": true } ×
diff --git a/changelogs/unreleased/502-add-toggles-help-text-int-test-gitlab-ui-integration-test.yml b/changelogs/unreleased/502-add-toggles-help-text-int-test-gitlab-ui-integration-test.yml
new file mode 100644
index 0000000000000000000000000000000000000000..24990c85d472b502d9da368ad58def315bcd12d8
--- /dev/null
+++ b/changelogs/unreleased/502-add-toggles-help-text-int-test-gitlab-ui-integration-test.yml
@@ -0,0 +1,5 @@
+---
+title: Update gl-toggles with deprecated attributes
+merge_request: 34660
+author:
+type: changed
diff --git a/ee/app/assets/javascripts/boards/toggle_labels.js b/ee/app/assets/javascripts/boards/toggle_labels.js
index 67369df82fe543ab4c22638730624947c4c12693..4a5f92c08a89d5526624c09935fd5167bf6e1c2d 100644
--- a/ee/app/assets/javascripts/boards/toggle_labels.js
+++ b/ee/app/assets/javascripts/boards/toggle_labels.js
@@ -1,7 +1,6 @@
import Vue from 'vue';
import { mapState, mapGetters, mapActions } from 'vuex';
import { GlToggle } from '@gitlab/ui';
-import { __ } from '~/locale';
import Tracking from '~/tracking';
import store from '~/boards/stores';
@@ -15,13 +14,6 @@ export default () =>
computed: {
...mapState(['isShowingLabels']),
...mapGetters(['getLabelToggleState']),
-
- toggleOnLabel() {
- return __('Showing all labels');
- },
- toggleOffLabel() {
- return __('Hiding all labels');
- },
},
methods: {
...mapActions(['toggleShowLabels']),
@@ -37,14 +29,10 @@ export default () =>
},
template: `
<div class="board-labels-toggle-wrapper d-flex align-items-center prepend-left-10">
- <span id="board-labels-toggle-text" class="text-nowrap">
- {{ __('Show labels') }}
- </span>
<gl-toggle
:value="isShowingLabels"
- class="prepend-left-10 mb-0"
- :label-on="toggleOnLabel"
- :label-off="toggleOffLabel"
+ label="Show labels"
+ label-position="left"
aria-describedby="board-labels-toggle-text"
data-qa-selector="show_labels_toggle"
@change="onToggle"
diff --git a/ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue b/ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
index 9e6a4eb1c8f4222bb13cfbc37cef3a76fd0de808..43c20fea43e6dcb9347f052e773a2d5fd06edc2b 100644
--- a/ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
+++ b/ee/app/assets/javascripts/projects/settings_service_desk/components/service_desk_setting.vue
@@ -91,8 +91,8 @@ export default {
id="service-desk-checkbox"
:value="isEnabled"
class="d-inline-block align-middle mr-1"
- :label-on="__('Service Desk is on')"
- :label-off="__('Service Desk is off')"
+ label="Service desk"
+ label-position="left"
@change="onCheckboxToggle"
/>
<label class="align-middle" for="service-desk-checkbox">
diff --git a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue b/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue
index 8c132e29dead80f7c49b5f87708ecf256e5458ca..ebbe97cb9d7647acf670384ea8b28f68408420ba 100644
--- a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue
+++ b/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue
@@ -215,13 +215,7 @@ export default {
<h5 class="mt-4">{{ s__('NetworkPolicies|Enforcement status') }}</h5>
<p>{{ s__('NetworkPolicies|Choose whether to enforce this policy.') }}</p>
- <gl-toggle
- v-model="selectedPolicy.isEnabled"
- :label-on="__('Enabled')"
- :label-off="__('Disabled')"
- label-position="right"
- data-testid="policyToggle"
- />
+ <gl-toggle v-model="selectedPolicy.isEnabled" data-testid="policyToggle" />
</div>
</template>
</gl-drawer>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index c8125fabb4a3b485e91b99cb09c6202a70b80bbb..f55a3fd83620474354ec029f26dd6bdec67e0c4a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -567,12 +567,6 @@ msgstr ""
msgid "%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}"
msgstr ""
-msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled"
-msgstr ""
-
-msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Enabled"
-msgstr ""
-
msgid "%{service_title} %{message}."
msgstr ""
@@ -735,9 +729,6 @@ msgstr ""
msgid "(No changes)"
msgstr ""
-msgid "(Show all)"
-msgstr ""
-
msgid "(check progress)"
msgstr ""
@@ -11778,9 +11769,6 @@ msgstr[1] ""
msgid "Hide values"
msgstr ""
-msgid "Hiding all labels"
-msgstr ""
-
msgid "High or unknown vulnerabilities present"
msgstr ""
@@ -12941,9 +12929,6 @@ msgstr ""
msgid "Key: %{key}"
msgstr ""
-msgid "Keyboard Shortcuts"
-msgstr ""
-
msgid "Keyboard shortcuts"
msgstr ""
@@ -20565,12 +20550,6 @@ msgstr ""
msgid "Service Desk is enabled but not yet active"
msgstr ""
-msgid "Service Desk is off"
-msgstr ""
-
-msgid "Service Desk is on"
-msgstr ""
-
msgid "Service Templates"
msgstr ""
@@ -20893,9 +20872,6 @@ msgstr ""
msgid "Showing all issues"
msgstr ""
-msgid "Showing all labels"
-msgstr ""
-
msgid "Showing last %{size} of log -"
msgstr ""
diff --git a/package.json b/package.json
index 1a4b3674d433e346ee96d0e7f33adce47418cddf..856669229597125f0b08573f70036813ca257237 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,8 @@
"@babel/plugin-syntax-import-meta": "^7.10.1",
"@babel/preset-env": "^7.10.1",
"@gitlab/at.js": "1.5.5",
- "@gitlab/svgs": "1.144.0",
- "@gitlab/ui": "17.8.0",
+ "@gitlab/svgs": "1.139.0",
+ "@gitlab/ui": "17.8.1",
"@gitlab/visual-review-tools": "1.6.1",
"@rails/actioncable": "^6.0.3-1",
"@sentry/browser": "^5.10.2",
diff --git a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
index a9034b81d2f0f12008b933811315012861a73953..2d4f920ef3a0c324ede0df12656754e8e076eeee 100644
--- a/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
+++ b/spec/frontend/registry/shared/components/__snapshots__/expiration_policy_fields_spec.js.snap
@@ -16,9 +16,7 @@ exports[`Expiration Policy Form renders 1`] = `
>
<gl-toggle-stub
id="expiration-policy-toggle"
- labeloff="Toggle Status: OFF"
- labelon="Toggle Status: ON"
- labelposition="hidden"
+ labelposition="top"
/>
<span
diff --git a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
index f7a9827a9ad058f50dd4da16875338f6193a415f..f4ac2f57261b4b10c9983523bb745b935895fa32 100644
--- a/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
+++ b/spec/frontend/self_monitor/components/__snapshots__/self_monitor_form_spec.js.snap
@@ -47,9 +47,7 @@ exports[`self monitor component When the self monitor project has not been creat
label-for="self-monitor-toggle"
>
<gl-toggle-stub
- labeloff="Toggle Status: OFF"
- labelon="Toggle Status: ON"
- labelposition="hidden"
+ labelposition="top"
name="self-monitor-toggle"
/>
</gl-form-group-stub>
diff --git a/yarn.lock b/yarn.lock
index f5ca6a8ea29b4b07d942c52f6189b9d556229470..6b4a307fafa802b62510b9243e78d34e1fad7071 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -843,15 +843,15 @@
eslint-plugin-vue "^6.2.1"
vue-eslint-parser "^7.0.0"
-"@gitlab/svgs@1.144.0":
- version "1.144.0"
- resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.144.0.tgz#ee0ec58516405391cbaef00f5a660da6edf27538"
- integrity sha512-ejcsxoyfYwXyG8naOnn7QnY0oxrRNcWRBuH9VHrGL9/FXBJWq2NLXENi+v0TjcWvSsc2fBx/nk5V8Au96g0yEg==
-
-"@gitlab/ui@17.8.0":
- version "17.8.0"
- resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-17.8.0.tgz#187b92634d3b034f036d96238a7c39a5e7f1606b"
- integrity sha512-BwZY5D6zUilCj9Uh1nhB3VQMHsSwYxMHpz/t4qu1URIwWLeyDuEMxx6CEMT4p1Cir2eWxwxh9AauduPcmRTJPw==
+"@gitlab/svgs@1.139.0":
+ version "1.139.0"
+ resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.139.0.tgz#8a4874e76000e2dd7d3ed3a8967d62bed47d7ea7"
+ integrity sha512-o1KAmQLYL727HodlPHkmj+d+Kdw8OIgHzlKmmPYMzeE+As2l1oz6CTilca56KqXGklOgrouC9P2puMwyX8e/6g==
+
+"@gitlab/ui@17.8.1":
+ version "17.8.1"
+ resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-17.8.1.tgz#78c177f925a1bee97cf891093c0f2e606bbd7c4e"
+ integrity sha512-WzJKbX9PgdlbXEVboz1OQ30eLx9/1bOtFCIbZ9/dHEpmRu7sNK/+NlxLnQO+Ls5byAo4xk26Ykv8HDm888J7Vw==
dependencies:
"@babel/standalone" "^7.0.0"
"@gitlab/vue-toasted" "^1.3.0"