Convert slot names to kebab-case

Convert slot names in Vue.js templates to kebab-case to match our coding style.

Convert slot names to kebab-case
Convert slot names in Vue.js templates to kebab-case to match our coding style.
0d0efbad · Vitaly Slobodin · f5c0bfd8 · 0d0efbad · 0d0efbad · 0d0efbad
Commit 0d0efbad authored Nov 13, 2020 by Vitaly Slobodin
14 changed files
--- a/app/assets/javascripts/blob/components/blob_header_filepath.vue
+++ b/app/assets/javascripts/blob/components/blob_header_filepath.vue
@@ -26,7 +26,7 @@ export default {
 </script>
 <template>
  <div class="file-header-content d-flex align-items-center lh-100">
-    <slot name="filepathPrepend"></slot>
+    <slot name="filepath-prepend"></slot>

    <template v-if="blob.path">
      <file-icon :file-name="blob.path" :size="18" aria-hidden="true" css-classes="mr-2" />

--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -343,7 +343,7 @@ export default {
          >
          <span v-else class="js-cluster-application-title">{{ title }}</span>
        </strong>
-        <slot name="installedVia"></slot>
+        <slot name="installed-via"></slot>
        <div>
          <slot name="description"></slot>
        </div>

--- a/app/assets/javascripts/design_management/components/design_notes/design_note.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_note.vue
@@ -108,7 +108,7 @@ export default {
        </span>
      </div>
      <div class="gl-display-flex gl-align-items-baseline">
-        <slot name="resolveDiscussion"></slot>
+        <slot name="resolve-discussion"></slot>
        <button
          v-if="isEditButtonVisible"
          v-gl-tooltip
@@ -127,7 +127,7 @@ export default {
        class="note-text js-note-text md"
        data-qa-selector="note_content"
      ></div>
-      <slot name="resolvedStatus"></slot>
+      <slot name="resolved-status"></slot>
    </template>
    <apollo-mutation
      v-else

--- a/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
+++ b/app/assets/javascripts/design_management/components/design_notes/design_reply_form.vue
@@ -110,7 +110,7 @@ export default {
        </textarea>
      </template>
    </markdown-field>
-    <slot name="resolveCheckbox"></slot>
+    <slot name="resolve-checkbox"></slot>
    <div class="note-form-actions gl-display-flex gl-justify-content-space-between">
      <gl-button
        ref="submitButton"

--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -207,6 +207,6 @@ export default {
        />
      </gl-collapse>
    </template>
-    <slot name="replyForm"></slot>
+    <slot name="reply-form"></slot>
  </div>
 </template>
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -69,7 +69,7 @@ export default {
  <div class="environments-container">
    <gl-loading-icon v-if="isLoading" size="md" class="gl-mt-3" label="Loading environments" />

-    <slot name="emptyState"></slot>
+    <slot name="empty-state"></slot>

    <div v-if="!isLoading && environments.length > 0" class="table-holder">
      <environment-table

--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
@@ -365,7 +365,7 @@ export default {
 <template>
  <div v-gl-resize-observer="onResize" class="prometheus-graph">
    <div class="d-flex align-items-center">
-      <slot name="topLeft"></slot>
+      <slot name="top-left"></slot>
      <h5
        ref="graphTitle"
        class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3"

--- a/app/assets/javascripts/related_issues/components/related_issues_block.vue
+++ b/app/assets/javascripts/related_issues/components/related_issues_block.vue
@@ -138,7 +138,7 @@ export default {
            href="#related-issues"
            aria-hidden="true"
          />
-          <slot name="headerText">{{ __('Linked issues') }}</slot>
+          <slot name="header-text">{{ __('Linked issues') }}</slot>
          <gl-link
            v-if="hasHelpPath"
            :href="helpPath"
@@ -167,7 +167,7 @@ export default {
            />
          </div>
        </h3>
-        <slot name="headerActions"></slot>
+        <slot name="header-actions"></slot>
      </div>
      <div
        class="linked-issues-card-body bg-gray-light"

--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -181,10 +181,10 @@ export default {
            <slot :name="slotName"></slot>
            <popover v-if="hasPopover" :options="popoverOptions" class="gl-ml-2" />
          </div>
-          <slot name="subHeading"></slot>
+          <slot name="sub-heading"></slot>
        </div>

-        <slot name="actionButtons"></slot>
+        <slot name="action-buttons"></slot>

        <button
          v-if="isCollapsible"

--- a/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue
+++ b/app/assets/javascripts/vue_shared/components/upload_dropzone/upload_dropzone.vue
@@ -147,7 +147,7 @@ export default {
        class="card upload-dropzone-border upload-dropzone-overlay gl-w-full gl-h-full gl-absolute gl-display-flex gl-align-items-center gl-justify-content-center gl-p-3 gl-bg-white"
      >
        <div v-show="!isDragDataValid" class="mw-50 gl-text-center">
-          <slot name="invalidDragDataSlot">
+          <slot name="invalid-drag-data-slot">
            <h3 :class="{ 'gl-font-base gl-display-inline': !displayAsCard }">
              {{ __('Oh no!') }}
            </h3>
@@ -159,7 +159,7 @@ export default {
          </slot>
        </div>
        <div v-show="isDragDataValid" class="mw-50 gl-text-center">
-          <slot name="validDragDataSlot">
+          <slot name="valid-drag-data-slot">
            <h3 :class="{ 'gl-font-base gl-display-inline': !displayAsCard }">
              {{ __('Incoming!') }}
            </h3>

--- a/ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/security_dashboard_table.vue
@@ -110,7 +110,7 @@ export default {
        @openModal="openModal({ vulnerability })"
      />

-      <slot v-if="showEmptyState" name="emptyState">
+      <slot v-if="showEmptyState" name="empty-state">
        <gl-empty-state
          :title="s__(`We've found no vulnerabilities`)"
          :description="

--- a/ee/app/assets/javascripts/security_dashboard/components/security_dashboard_vuex.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/security_dashboard_vuex.vue
@@ -130,7 +130,7 @@ export default {

        <security-dashboard-table>
          <template #emptyState>
-            <slot name="emptyState"></slot>
+            <slot name="empty-state"></slot>
          </template>
        </security-dashboard-table>


--- a/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue
+++ b/ee/app/assets/javascripts/threat_monitoring/components/network_policy_list.vue
@@ -233,7 +233,7 @@ export default {
      </template>

      <template #empty>
-        <slot name="emptyState">
+        <slot name="empty-state">
          <gl-empty-state
            ref="tableEmptyState"
            :title="s__('NetworkPolicies|No policies detected')"

--- a/ee/app/assets/javascripts/vue_shared/components/accordion/accordion_item.vue
+++ b/ee/app/assets/javascripts/vue_shared/components/accordion/accordion_item.vue
@@ -120,7 +120,7 @@ export default {
        :aria-labelledby="buttonId"
        role="region"
      >
-        <slot name="subTitle"></slot>
+        <slot name="sub-title"></slot>
        <div ref="content" :style="contentStyles"><slot name="default"></slot></div>
      </div>
    </template>