Refactor #5592 - For OrgChart, Paginator, Picklist, Timeline

components/lib/organizationchart/OrganizationChart.d.ts

@@ -132,29 +132,37 @@ export interface OrganizationChartPassThroughOptions {
      */
     node?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the nodeToggler's DOM element.
+     * Used to pass attributes to the node toggle button's DOM element.
      */
-    nodeToggler?: OrganizationChartPassThroughOptionType;
+    nodeToggleButton?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the nodeTogglerIcon's DOM element.
+     * Used to pass attributes to the node toggle button icon's DOM element.
      */
-    nodeTogglerIcon?: OrganizationChartPassThroughOptionType;
+    nodeToggleButtonIcon?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the lines's DOM element.
+     * Used to pass attributes to the connectors's DOM element.
      */
-    lines?: OrganizationChartPassThroughOptionType;
+    connectors?: OrganizationChartPassThroughOptionType;
     /**
      * Used to pass attributes to the lineCell's DOM element.
      */
     lineCell?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the lineDown's DOM element.
+     * Used to pass attributes to the connector down's DOM element.
      */
-    lineDown?: OrganizationChartPassThroughOptionType;
+    connectorDown?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the nodes's DOM element.
+     * Used to pass attributes to the connector left's DOM element.
      */
-    nodes?: OrganizationChartPassThroughOptionType;
+    connectorLeft?: OrganizationChartPassThroughOptionType;
+    /**
+     * Used to pass attributes to the connector right's DOM element.
+     */
+    connectorRight?: OrganizationChartPassThroughOptionType;
+    /**
+     * Used to pass attributes to the node children's DOM element.
+     */
+    nodeChildren?: OrganizationChartPassThroughOptionType;
     /**
      * Used to pass attributes to the nodeCell's DOM element.
      */

components/lib/organizationchart/OrganizationChartNode.vue

@@ -5,32 +5,32 @@
                 <td :colspan="colspan" v-bind="ptm('cell')">
                     <div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
-                        <a v-if="toggleable" tabindex="0" :class="cx('nodeToggler')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
-                            <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
-                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeTogglerIcon')" v-bind="getPTOptions('nodeTogglerIcon')" />
+                        <a v-if="toggleable" tabindex="0" :class="cx('nodeToggleButton')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggleButton')">
+                            <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
+                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
                         </a>
                     </div>
                 </td>
             </tr>
-            <tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
+            <tr :style="childStyle" :class="cx('connectors')" v-bind="ptm('connectors')">
                 <td :colspan="colspan" v-bind="ptm('lineCell')">
-                    <div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
+                    <div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></div>
                 </td>
             </tr>
-            <tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
+            <tr :style="childStyle" :class="cx('connectors')" v-bind="ptm('connectors')">
                 <template v-if="node.children && node.children.length === 1">
                     <td :colspan="colspan" v-bind="ptm('lineCell')">
-                        <div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
+                        <div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></div>
                     </td>
                 </template>
                 <template v-if="node.children && node.children.length > 1">
                     <template v-for="(child, i) of node.children" :key="child.key">
-                        <td :class="cx('lineLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
-                        <td :class="cx('lineRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
+                        <td :class="cx('connectorLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'connectorLeft')">&nbsp;</td>
+                        <td :class="cx('connectorRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'connectorRight')">&nbsp;</td>
                     </template>
                 </template>
             </tr>
-            <tr :style="childStyle" :class="cx('nodes')" v-bind="ptm('nodes')">
+            <tr :style="childStyle" :class="cx('nodeChildren')" v-bind="ptm('nodeChildren')">
                 <td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
                     <OrganizationChartNode
                         :node="child"
@@ -107,7 +107,7 @@ export default {
             });
         },
         onNodeClick(event) {
-            if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetoggler') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglericon')) {
+            if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebutton') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebuttonicon')) {
                 return;
             }
 

components/lib/organizationchart/style/OrganizationChartStyle.js

@@ -114,13 +114,13 @@ const classes = {
     root: 'p-organizationchart p-component',
     table: 'p-organizationchart-table',
     node: ({ instance }) => ['p-organizationchart-node', { 'p-organizationchart-node-selectable': instance.selectable, 'p-highlight': instance.selected }],
-    nodeToggler: 'p-organizationchart-node-toggle-button',
-    nodeTogglerIcon: 'p-organizationchart-node-toggle-button-icon',
-    lines: 'p-organizationchart-connectors',
-    lineDown: 'p-organizationchart-connector-down',
-    lineLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
-    lineRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
-    nodes: 'p-organizationchart-node-children'
+    nodeToggleButton: 'p-organizationchart-node-toggle-button',
+    nodeToggleButtonIcon: 'p-organizationchart-node-toggle-button-icon',
+    connectors: 'p-organizationchart-connectors',
+    connectorDown: 'p-organizationchart-connector-down',
+    connectorLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
+    connectorRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
+    nodeChildren: 'p-organizationchart-node-children'
 };
 
 export default BaseStyle.extend({

components/lib/paginator/FirstPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('firstPageButton')" type="button" v-bind="getPTOptions('firstPageButton')" data-pc-group-section="pagebutton">
-        <component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstPageIcon')" v-bind="getPTOptions('firstPageIcon')" />
+    <button v-ripple :class="cx('first')" type="button" v-bind="getPTOptions('first')" data-pc-group-section="pagebutton">
+        <component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstIcon')" v-bind="getPTOptions('firstIcon')" />
     </button>
 </template>
 

components/lib/paginator/LastPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('lastPageButton')" type="button" v-bind="getPTOptions('lastPageButton')" data-pc-group-section="pagebutton">
-        <component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastPageIcon')" v-bind="getPTOptions('lastPageIcon')" />
+    <button v-ripple :class="cx('last')" type="button" v-bind="getPTOptions('last')" data-pc-group-section="pagebutton">
+        <component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastIcon')" v-bind="getPTOptions('lastIcon')" />
     </button>
 </template>
 

components/lib/paginator/NextPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('nextPageButton')" type="button" v-bind="getPTOptions('nextPageButton')" data-pc-group-section="pagebutton">
-        <component :is="template || 'AngleRightIcon'" :class="cx('nextPageIcon')" v-bind="getPTOptions('nextPageIcon')" />
+    <button v-ripple :class="cx('next')" type="button" v-bind="getPTOptions('next')" data-pc-group-section="pagebutton">
+        <component :is="template || 'AngleRightIcon'" :class="cx('nextIcon')" v-bind="getPTOptions('nextIcon')" />
     </button>
 </template>
 

components/lib/paginator/PageLinks.vue

@@ -4,12 +4,12 @@
             v-for="pageLink of value"
             :key="pageLink"
             v-ripple
-            :class="cx('pageButton', { pageLink })"
+            :class="cx('page', { pageLink })"
             type="button"
             :aria-label="ariaPageLabel(pageLink)"
             :aria-current="pageLink - 1 === page ? 'page' : undefined"
             @click="onPageLinkClick($event, pageLink)"
-            v-bind="getPTOptions(pageLink - 1, 'pageButton')"
+            v-bind="getPTOptions(pageLink - 1, 'page')"
             :data-p-highlight="pageLink - 1 === page"
         >
             {{ pageLink }}

components/lib/paginator/Paginator.d.ts

@@ -74,49 +74,49 @@ export interface PaginatorPassThroughOptions<T = any> {
      */
     root?: PaginatorPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the start's DOM element.
+     * Used to pass attributes to the content start's DOM element.
      */
-    start?: PaginatorPassThroughOptionType<T>;
+    contentStart?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the first page button's DOM element.
      */
-    firstPageButton?: PaginatorPassThroughOptionType<T>;
+    first?: PaginatorPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the first page icon's DOM element.
+     * Used to pass attributes to the first icon's DOM element.
      */
-    firstPageIcon?: PaginatorPassThroughOptionType<T>;
+    firstIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the prev page button's DOM element.
      */
-    previousPageButton?: PaginatorPassThroughOptionType<T>;
+    prev?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the prev page icon's DOM element.
      */
-    previousPageIcon?: PaginatorPassThroughOptionType<T>;
+    prevIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the next page button's DOM element.
      */
-    nextPageButton?: PaginatorPassThroughOptionType<T>;
+    next?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the next page icon's DOM element.
      */
-    nextPageIcon?: PaginatorPassThroughOptionType<T>;
+    nextIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the last page button's DOM element.
      */
-    lastPageButton?: PaginatorPassThroughOptionType<T>;
+    last?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the last page icon's DOM element.
      */
-    lastPageIcon?: PaginatorPassThroughOptionType<T>;
+    lastIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the pages's DOM element.
      */
     pages?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the page button's DOM element.
      */
-    pageButton?: PaginatorPassThroughOptionType<T>;
+    page?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the current's DOM element.
      */
@@ -137,9 +137,9 @@ export interface PaginatorPassThroughOptions<T = any> {
      */
     jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the end's DOM element.
+     * Used to pass attributes to the content end's DOM element.
      */
-    end?: PaginatorPassThroughOptionType<T>;
+    contentEnd?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/paginator/Paginator.vue

@@ -1,7 +1,7 @@
 <template>
     <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptmi('paginatorWrapper')">
         <div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')">
-            <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
+            <div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
                 <slot name="start" :state="currentState"></slot>
             </div>
             <template v-for="item in value" :key="item">
@@ -47,7 +47,7 @@
                 />
                 <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" />
             </template>
-            <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
+            <div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')">
                 <slot name="end" :state="currentState"></slot>
             </div>
         </div>

components/lib/paginator/PrevPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('previousPageButton')" type="button" v-bind="getPTOptions('previousPageButton')" data-pc-group-section="pagebutton">
-        <component :is="template || 'AngleLeftIcon'" :class="cx('previousPageIcon')" v-bind="getPTOptions('previousPageIcon')" />
+    <button v-ripple :class="cx('prev')" type="button" v-bind="getPTOptions('prev')" data-pc-group-section="pagebutton">
+        <component :is="template || 'AngleLeftIcon'" :class="cx('prevIcon')" v-bind="getPTOptions('prevIcon')" />
     </button>
 </template>
 

components/lib/paginator/style/PaginatorStyle.js

@@ -83,38 +83,38 @@ const classes = {
             [`p-paginator-${key}`]: instance.hasBreakpoints()
         }
     ],
-    start: 'p-paginator-content-start',
-    end: 'p-paginator-content-end',
-    firstPageButton: ({ instance }) => [
+    contentStart: 'p-paginator-content-start',
+    contentEnd: 'p-paginator-content-end',
+    first: ({ instance }) => [
         'p-paginator-first',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    firstPageIcon: 'p-paginator-first-icon',
-    previousPageButton: ({ instance }) => [
+    firstIcon: 'p-paginator-first-icon',
+    prev: ({ instance }) => [
         'p-paginator-prev',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    previousPageIcon: 'p-paginator-prev-icon',
-    nextPageButton: ({ instance }) => [
+    prevIcon: 'p-paginator-prev-icon',
+    next: ({ instance }) => [
         'p-paginator-next',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    nextPageIcon: 'p-paginator-next-icon',
-    lastPageButton: ({ instance }) => [
+    nextIcon: 'p-paginator-next-icon',
+    last: ({ instance }) => [
         'p-paginator-last',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    lastPageIcon: 'p-paginator-last-icon',
+    lastIcon: 'p-paginator-last-icon',
     pages: 'p-paginator-pages',
-    pageButton: ({ props, pageLink }) => [
+    page: ({ props, pageLink }) => [
         'p-paginator-page',
         {
             'p-paginator-page-active': pageLink - 1 === props.page

components/lib/picklist/PickList.d.ts

@@ -169,17 +169,17 @@ export interface PickListPassThroughOptions {
      */
     sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the source wrapper's DOM element.
+     * Used to pass attributes to the source list containerr's DOM element.
      */
-    sourceWrapper?: PickListPassThroughOptionType;
+    sourceListContainer?: PickListPassThroughOptionType;
     /**
      * Used to pass attributes to the source list's DOM element.
      */
     sourceList?: PickListPassThroughOptionType;
     /**
-     * Used to pass attributes to the buttons' DOM element.
+     * Used to pass attributes to the transfer controls' DOM element.
      */
-    buttons?: PickListPassThroughOptionType;
+    transferControls?: PickListPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
      */
@@ -197,9 +197,9 @@ export interface PickListPassThroughOptions {
      */
     moveAllToSourceButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the target wrapper's DOM element.
+     * Used to pass attributes to the target list container's DOM element.
      */
-    targetWrapper?: PickListPassThroughOptionType;
+    targetListContainer?: PickListPassThroughOptionType;
     /**
      * Used to pass attributes to the target list's DOM element.
      */

components/lib/picklist/PickList.vue

@@ -32,7 +32,7 @@
             </Button>
             <slot name="sourcecontrolsend"></slot>
         </div>
-        <div :class="cx('sourceWrapper')" v-bind="ptm('sourceWrapper')" data-pc-group-section="listwrapper">
+        <div :class="cx('sourceListContainer')" v-bind="ptm('sourceListContainer')" data-pc-group-section="listcontainer">
             <Listbox
                 ref="sourceList"
                 :id="idSource + '_list'"
@@ -64,7 +64,7 @@
                 </template>
             </Listbox>
         </div>
-        <div :class="cx('buttons')" v-bind="ptm('buttons')" data-pc-group-section="controls">
+        <div :class="cx('transferControls')" v-bind="ptm('transferControls')" data-pc-group-section="controls">
             <slot name="movecontrolsstart"></slot>
             <Button :aria-label="moveToTargetAriaLabel" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...buttonProps, ...moveToTargetProps }" :pt="ptm('moveToTargetButton')" :unstyled="unstyled">
                 <template #icon>
@@ -96,7 +96,7 @@
             </Button>
             <slot name="movecontrolsend"></slot>
         </div>
-        <div :class="cx('targetWrapper')" v-bind="ptm('targetWrapper')" data-pc-group-section="listwrapper">
+        <div :class="cx('targetListContainer')" v-bind="ptm('targetListContainer')" data-pc-group-section="listcontainer">
             <Listbox
                 ref="targetList"
                 :id="idTarget + '_list'"

components/lib/picklist/style/PickListStyle.js

@@ -25,9 +25,9 @@ const theme = ({ dt }) => `
 const classes = {
     root: 'p-picklist p-component',
     sourceControls: 'p-picklist-controls p-picklist-source-controls',
-    sourceWrapper: 'p-picklist-list-container p-picklist-source-list-container',
-    buttons: 'p-picklist-controls p-picklist-transfer-controls',
-    targetWrapper: 'p-picklist-list-container p-picklist-target-list-container',
+    sourceListContainer: 'p-picklist-list-container p-picklist-source-list-container',
+    transferControls: 'p-picklist-controls p-picklist-transfer-controls',
+    targetListContainer: 'p-picklist-list-container p-picklist-target-list-container',
     targetControls: 'p-picklist-controls p-picklist-target-controls'
 };