diff --git a/components/lib/themes/primeone/base/tree/index.js b/components/lib/themes/primeone/base/tree/index.js index 84aa55542..334133d6f 100644 --- a/components/lib/themes/primeone/base/tree/index.js +++ b/components/lib/themes/primeone/base/tree/index.js @@ -8,28 +8,28 @@ export default { padding: 1rem; } -.p-tree-container { +.p-tree-root-children { margin: 0; padding: 0; list-style-type: none; overflow: auto; } -.p-treenode { +.p-tree-node { padding: 0 0; outline: 0 none; margin: 2px 0; } -.p-tree-container > .p-treenode:first-child { +.p-tree-root-children > .p-tree-node:first-child { margin-top: 0; } -.p-tree-container > .p-treenode:last-child { +.p-tree-root-children > .p-tree-node:last-child { margin-bottom: 0; } -.p-treenode-content { +.p-tree-node-content { border-radius: ${dt('rounded.base')}; padding: 0.25rem 0.5rem; display: flex; @@ -39,17 +39,17 @@ export default { transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; } -.p-treenode:focus-visible > .p-treenode-content { +.p-tree-node:focus-visible > .p-tree-node-content { outline: 1px solid ${dt('focus.ring.color')}; outline-offset: -2px; } -.p-treenode-content.p-highlight { +.p-tree-node-content.p-tree-node-selected { background: ${dt('highlight.background')}; color: ${dt('highlight.color')}; } -.p-tree-toggler { +.p-tree-node-toggle-button { cursor: pointer; user-select: none; display: inline-flex; @@ -69,68 +69,64 @@ export default { outline-color: transparent; } -.p-tree-toggler:enabled:hover { +.p-tree-node-toggle-button:enabled:hover { background: ${dt('tree.toggle.hover.background')}; color: ${dt('tree.toggle.hover.color')}; } -.p-treenode-content.p-highlight .p-tree-toggler, -.p-treenode-content.p-highlight .p-treenode-icon { +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button, +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button-icon { color: inherit; } -.p-treenode-content.p-highlight .p-tree-toggler:hover { +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover { background: ${dt('tree.toggle.highlight.hover.background')}; } -.p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover { background: ${dt('tree.node.hover.background')}; color: ${dt('tree.node.hover.color')}; } -.p-treenode-content.p-treenode-selectable:not(.p-highlight):hover .p-tree-toggler { +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-toggle-button { color: ${dt('tree.toggle.hover.color')}; } -.p-treenode-content.p-treenode-selectable:not(.p-highlight):hover .p-treenode-icon { +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon { color: ${dt('tree.icon.hover.color')}; } -.p-treenode-children { +.p-tree-node-children { margin: 0; padding: 0; list-style-type: none; padding: 0 0 0 1rem; } -.p-tree-wrapper { +.p-tree-root { overflow: auto; } -.p-treenode-selectable { +.p-tree-node-selectable { cursor: pointer; user-select: none; } -.p-treenode-leaf > .p-treenode-content .p-tree-toggler { +.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button { visibility: hidden; } -.p-treenode-icon { +.p-tree-node-icon { margin-right: 0.5rem; color: ${dt('tree.icon.color')}; transition: color ${dt('transition.duration')}; } -.p-treenode-content .p-checkbox { +.p-tree-node-content .p-checkbox { margin-right: 0.5rem; } -.p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { - color: ${dt('tree.indeterminate.color')}; -} - -.p-tree-filter { +.p-tree-filter-input { width: 100%; padding-right: 1.75rem; } @@ -147,7 +143,7 @@ export default { top: 50%; margin-top: -0.5rem; right: 0.75rem; - color: #94a3b8; + color: ${dt('tree.filter.icon.color')}; } .p-tree-loading { @@ -161,7 +157,7 @@ export default { height: 2rem; } -.p-tree-loading-overlay { +.p-tree-mask { position: absolute; z-index: 1; display: flex; @@ -176,7 +172,7 @@ export default { flex-direction: column; } -.p-tree-flex-scrollable .p-tree-wrapper { +.p-tree-flex-scrollable .p-tree-root { flex: 1; } ` diff --git a/components/lib/themes/primeone/presets/aura/tree/index.js b/components/lib/themes/primeone/presets/aura/tree/index.js index 2157bf54d..f06864e15 100644 --- a/components/lib/themes/primeone/presets/aura/tree/index.js +++ b/components/lib/themes/primeone/presets/aura/tree/index.js @@ -20,8 +20,8 @@ export default { color: '{surface.500}', hoverColor: '{surface.600}' }, - indeterminate: { - color: '{surface.500}' + filterIcon: { + color: '{surface.400}' } }, dark: { @@ -44,7 +44,7 @@ export default { color: '{surface.400}', hoverColor: '{surface.300}' }, - indeterminate: { + filterIcon: { color: '{surface.400}' } } diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js index 90ee72351..19c335e07 100644 --- a/components/lib/tree/style/TreeStyle.js +++ b/components/lib/tree/style/TreeStyle.js @@ -9,33 +9,29 @@ const classes = { 'p-tree-flex-scrollable': props.scrollHeight === 'flex' } ], - loadingOverlay: 'p-tree-loading-overlay p-component-overlay', + loadingOverlay: 'p-tree-mask p-component-overlay', loadingIcon: 'p-tree-loading-icon', filterContainer: 'p-tree-filter-container', - input: 'p-tree-filter', + input: 'p-tree-filter-input', searchIcon: 'p-tree-filter-icon', - wrapper: 'p-tree-wrapper', - container: 'p-tree-container', - node: ({ instance }) => ['p-treenode', { 'p-treenode-leaf': instance.leaf }], + wrapper: 'p-tree-root', + container: 'p-tree-root-children', + node: ({ instance }) => ['p-tree-node', { 'p-tree-node-leaf': instance.leaf }], content: ({ instance }) => [ - 'p-treenode-content', + 'p-tree-node-content', instance.node.styleClass, { - 'p-treenode-selectable': instance.selectable, - 'p-highlight': instance.checkboxMode && instance.$parentInstance.highlightOnSelect ? instance.checked : instance.selected + 'p-tree-node-selectable': instance.selectable, + 'p-tree-node-selected': instance.checkboxMode && instance.$parentInstance.highlightOnSelect ? instance.checked : instance.selected } ], - toggler: 'p-tree-toggler p-link', - togglerIcon: 'p-tree-toggler-icon', - nodeTogglerIcon: 'p-tree-node-toggler-icon', - nodeCheckbox: ({ instance }) => [ - { - 'p-indeterminate': instance.partialChecked - } - ], - nodeIcon: 'p-treenode-icon', - label: 'p-treenode-label', - subgroup: 'p-treenode-children' + toggler: 'p-tree-node-toggle-button', + togglerIcon: 'p-tree-node-toggle-button-icon', + nodeTogglerIcon: 'p-tree-node-toggler-icon', //todo: discuss + nodeCheckbox: 'p-tree-node-checkbox', + nodeIcon: 'p-tree-node-icon', + label: 'p-tree-node-label', + subgroup: 'p-tree-node-children' }; export default BaseStyle.extend({