Refactor #5141

components/lib/dropdown/BaseDropdown.vue

@@ -134,7 +134,7 @@ export default {
             type: Boolean,
             default: true
         },
-        showTick: {
+        checkmark: {
             type: Boolean,
             default: false
         },

components/lib/dropdown/Dropdown.d.ts

@@ -152,9 +152,9 @@ export interface DropdownPassThroughOptions<T = any> {
      */
     itemLabel?: DropdownPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the tick icon's DOM element.
+     * Used to pass attributes to the check icon's DOM element.
      */
-    tickIcon?: DropdownPassThroughOptionType<T>;
+    checkIcon?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the bank icon's DOM element.
      */
@@ -440,10 +440,10 @@ export interface DropdownProps {
      */
     highlightOnSelect?: boolean | undefined;
     /**
-     *  Whether the selected option will be shown with a tick.
+     *  Whether the selected option will be shown with a check mark.
      *  @defaultValue false
      */
-    showTick?: boolean | undefined;
+    checkmark?: boolean | undefined;
     /**
      * Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
      * @defaultValue '{0} results are available'

components/lib/dropdown/Dropdown.vue

@@ -129,8 +129,8 @@
                                             :data-p-disabled="isOptionDisabled(option)"
                                             v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
                                         >
-                                            <template v-if="showTick">
+                                            <template v-if="checkmark">
-                                                <CheckIcon v-if="isSelected(option)" :class="cx('tickIcon')" v-bind="ptm('tickIcon')" />
+                                                <CheckIcon v-if="isSelected(option)" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />
                                                 <BlankIcon v-else :class="cx('blankIcon')" v-bind="ptm('blankIcon')" />
                                             </template>
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">

components/lib/dropdown/style/DropdownStyle.js

@@ -146,7 +146,7 @@ const classes = {
         }
     ],
     itemLabel: 'p-dropdown-item-label',
-    tickIcon: 'p-dropdown-tick-icon',
+    checkIcon: 'p-dropdown-check-icon',
     blankIcon: 'p-dropdown-blank-icon',
     emptyMessage: 'p-dropdown-empty-message'
 };

doc/dropdown/CheckmarkDoc.vue

@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>An alternative way to highlight the selected option is displaying a tick instead.</p>
+        <p>An alternative way to highlight the selected option is displaying a checkmark instead.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" showTick :highlightOnSelect="false" class="w-full md:w-14rem" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" showTick :highlightOnSelect="false" class="w-full md:w-14rem" />
+<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" showTick :highlightOnSelect="false" class="w-full md:w-14rem" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" showTick :highlightOnSelect="false" class="w-full md:w-14rem" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" checkmark :highlightOnSelect="false" class="w-full md:w-14rem" />
     </div>
 </template>
 

pages/dropdown/index.vue

@@ -13,6 +13,7 @@
 <script>
 import AccessibilityDoc from '@/doc/dropdown/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/dropdown/BasicDoc.vue';
+import CheckmarkDoc from '@/doc/dropdown/CheckmarkDoc.vue';
 import ClearIconDoc from '@/doc/dropdown/ClearIconDoc.vue';
 import DisabledDoc from '@/doc/dropdown/DisabledDoc.vue';
 import EditableDoc from '@/doc/dropdown/EditableDoc.vue';
@@ -24,7 +25,6 @@ import InvalidDoc from '@/doc/dropdown/InvalidDoc.vue';
 import LazyVirtualScrollDoc from '@/doc/dropdown/LazyVirtualScrollDoc.vue';
 import LoadingStateDoc from '@/doc/dropdown/LoadingStateDoc.vue';
 import TemplateDoc from '@/doc/dropdown/TemplateDoc.vue';
-import TickDoc from '@/doc/dropdown/TickDoc.vue';
 import VirtualScrollDoc from '@/doc/dropdown/VirtualScrollDoc.vue';
 import PTComponent from '@/doc/dropdown/pt/index.vue';
 import ThemingDoc from '@/doc/dropdown/theming/index.vue';
@@ -44,9 +44,9 @@ export default {
                     component: BasicDoc
                 },
                 {
-                    id: 'tick',
+                    id: 'checkmark',
-                    label: 'Tick',
+                    label: 'Checkmark',
-                    component: TickDoc
+                    component: CheckmarkDoc
                 },
                 {
                     id: 'editable',