From c629ca8f51bff349ed1f051c680adc3275f53668 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Tue, 21 May 2024 10:15:51 +0300 Subject: [PATCH] SplitterPanel and InlineMessage class name convensions --- .../lib/inlinemessage/InlineMessage.spec.js | 6 +-- .../style/InlineMessageStyle.d.ts | 6 +-- .../inlinemessage/style/InlineMessageStyle.js | 40 +++++++++---------- components/lib/splitter/Splitter.spec.js | 4 +- .../lib/splitter/style/SplitterStyle.js | 6 +-- .../lib/splitterpanel/SplitterPanel.spec.js | 6 +-- .../style/SplitterPanelStyle.d.ts | 2 +- .../splitterpanel/style/SplitterPanelStyle.js | 2 +- 8 files changed, 36 insertions(+), 36 deletions(-) diff --git a/components/lib/inlinemessage/InlineMessage.spec.js b/components/lib/inlinemessage/InlineMessage.spec.js index 568ef3eb4..fff8d0422 100644 --- a/components/lib/inlinemessage/InlineMessage.spec.js +++ b/components/lib/inlinemessage/InlineMessage.spec.js @@ -12,8 +12,8 @@ describe('InlineMessage.vue', () => { } }); - expect(wrapper.find('.p-inline-message.p-component').exists()).toBe(true); - expect(wrapper.find('.p-inline-message.p-component').text()).toBe('Username is required'); - expect(wrapper.find('.p-inline-message-error').exists()).toBe(true); + expect(wrapper.find('.p-inlinemessage.p-component').exists()).toBe(true); + expect(wrapper.find('.p-inlinemessage.p-component').text()).toBe('Username is required'); + expect(wrapper.find('.p-inlinemessage-error').exists()).toBe(true); }); }); diff --git a/components/lib/inlinemessage/style/InlineMessageStyle.d.ts b/components/lib/inlinemessage/style/InlineMessageStyle.d.ts index 4c1523e7a..9a37cf6b9 100644 --- a/components/lib/inlinemessage/style/InlineMessageStyle.d.ts +++ b/components/lib/inlinemessage/style/InlineMessageStyle.d.ts @@ -10,9 +10,9 @@ import { BaseStyle } from '../../base/style'; export enum InlineMessageClasses { - root = 'p-inline-message', - icon = 'p-inline-message-icon', - text = 'p-inline-message-text' + root = 'p-inlinemessage', + icon = 'p-inlinemessage-icon', + text = 'p-inlinemessage-text' } export interface InlineMessageStyle extends BaseStyle {} diff --git a/components/lib/inlinemessage/style/InlineMessageStyle.js b/components/lib/inlinemessage/style/InlineMessageStyle.js index 20b77f748..36cceaf90 100644 --- a/components/lib/inlinemessage/style/InlineMessageStyle.js +++ b/components/lib/inlinemessage/style/InlineMessageStyle.js @@ -1,7 +1,7 @@ import BaseStyle from 'primevue/base/style'; const theme = ({ dt }) => ` -.p-inline-message { +.p-inlinemessage { display: inline-flex; align-items: center; justify-content: center; @@ -10,97 +10,97 @@ const theme = ({ dt }) => ` gap: ${dt('inlinemessage.gap')}; } -.p-inline-message-text { +.p-inlinemessage-text { font-weight: ${dt('inlinemessage.text.font.weight')}; } -.p-inline-message-icon { +.p-inlinemessage-icon { flex-shrink: 0; font-size: ${dt('inlinemessage.icon.size')}; width: ${dt('inlinemessage.icon.size')}; height: ${dt('inlinemessage.icon.size')}; } -.p-inline-message-icon-only .p-inline-message-text { +.p-inlinemessage-icon-only .p-inlinemessage-text { visibility: hidden; width: 0; } -.p-fluid .p-inline-message { +.p-fluid .p-inlinemessage { display: flex; } -.p-inline-message-info { +.p-inlinemessage-info { background: ${dt('inlinemessage.info.background')}; border: 1px solid ${dt('inlinemessage.info.border.color')}; color: ${dt('inlinemessage.info.color')}; box-shadow: ${dt('inlinemessage.info.shadow')}; } -.p-inline-message-info .p-inline-message-icon { +.p-inlinemessage-info .p-inlinemessage-icon { color: ${dt('inlinemessage.info.color')}; } -.p-inline-message-success { +.p-inlinemessage-success { background: ${dt('inlinemessage.success.background')}; border: 1px solid ${dt('inlinemessage.success.border.color')}; color: ${dt('inlinemessage.success.color')}; box-shadow: ${dt('inlinemessage.success.shadow')}; } -.p-inline-message-success .p-inline-message-icon { +.p-inlinemessage-success .p-inlinemessage-icon { color: ${dt('inlinemessage.success.color')}; } -.p-inline-message-warn { +.p-inlinemessage-warn { background: ${dt('inlinemessage.warn.background')}; border: 1px solid ${dt('inlinemessage.warn.border.color')}; color: ${dt('inlinemessage.warn.color')}; box-shadow: ${dt('inlinemessage.warn.shadow')}; } -.p-inline-message-warn .p-inline-message-icon { +.p-inlinemessage-warn .p-inlinemessage-icon { color: ${dt('inlinemessage.warn.color')}; } -.p-inline-message-error { +.p-inlinemessage-error { background: ${dt('inlinemessage.error.background')}; border: 1px solid ${dt('inlinemessage.error.border.color')}; color: ${dt('inlinemessage.error.color')}; box-shadow: ${dt('inlinemessage.error.shadow')}; } -.p-inline-message-error .p-inline-message-icon { +.p-inlinemessage-error .p-inlinemessage-icon { color: ${dt('inlinemessage.error.color')}; } -.p-inline-message-secondary { +.p-inlinemessage-secondary { background: ${dt('inlinemessage.secondary.background')}; border: 1px solid ${dt('inlinemessage.secondary.border.color')}; color: ${dt('inlinemessage.secondary.color')}; box-shadow: ${dt('inlinemessage.secondary.shadow')}; } -.p-inline-message-secondary .p-inline-message-icon { +.p-inlinemessage-secondary .p-inlinemessage-icon { color: ${dt('inlinemessage.secondary.color')}; } -.p-inline-message-contrast { +.p-inlinemessage-contrast { background: ${dt('inlinemessage.contrast.background')}; border: 1px solid ${dt('inlinemessage.contrast.border.color')}; color: ${dt('inlinemessage.contrast.color')}; box-shadow: ${dt('inlinemessage.contrast.shadow')}; } -.p-inline-message-contrast .p-inline-message-icon { +.p-inlinemessage-contrast .p-inlinemessage-icon { color: ${dt('inlinemessage.contrast.color')}; } `; const classes = { - root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }], - icon: ({ props }) => ['p-inline-message-icon', props.icon], - text: 'p-inline-message-text' + root: ({ props, instance }) => ['p-inlinemessage p-component p-inlinemessage-' + props.severity, { 'p-inlinemessage-icon-only': !instance.$slots.default }], + icon: ({ props }) => ['p-inlinemessage-icon', props.icon], + text: 'p-inlinemessage-text' }; export default BaseStyle.extend({ diff --git a/components/lib/splitter/Splitter.spec.js b/components/lib/splitter/Splitter.spec.js index d9cd48611..21614c5cf 100644 --- a/components/lib/splitter/Splitter.spec.js +++ b/components/lib/splitter/Splitter.spec.js @@ -28,13 +28,13 @@ describe('Splitter.vue', () => { it('should exist', () => { expect(wrapper.find('.p-splitter.p-component').exists()).toBe(true); expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-horizontal'); - expect(wrapper.findAll('.p-splitter-panel').length).toBe(2); + expect(wrapper.findAll('.p-splitterpanel').length).toBe(2); expect(wrapper.find('.p-splitter-gutter-handle').exists()).toBe(true); }); it('should mousedown', async () => { const gutter = wrapper.find('.p-splitter-gutter-handle').element; - const siblings = wrapper.findAll('.p-splitter-panel'); + const siblings = wrapper.findAll('.p-splitterpanel'); await wrapper.vm.onGutterMouseDown({ currentTarget: { gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0); diff --git a/components/lib/splitter/style/SplitterStyle.js b/components/lib/splitter/style/SplitterStyle.js index 90c041eab..235ab14b7 100644 --- a/components/lib/splitter/style/SplitterStyle.js +++ b/components/lib/splitter/style/SplitterStyle.js @@ -65,16 +65,16 @@ const theme = ({ dt }) => ` cursor: row-resize; } -.p-splitter-panel { +.p-splitterpanel { flex-grow: 1; overflow: hidden; } -.p-splitter-panel-nested { +.p-splitterpanel-nested { display: flex; } -.p-splitter-panel .p-splitter { +.p-splitterpanel .p-splitter { flex-grow: 1; border: 0 none; } diff --git a/components/lib/splitterpanel/SplitterPanel.spec.js b/components/lib/splitterpanel/SplitterPanel.spec.js index f756b73e5..8c3610353 100644 --- a/components/lib/splitterpanel/SplitterPanel.spec.js +++ b/components/lib/splitterpanel/SplitterPanel.spec.js @@ -16,8 +16,8 @@ describe('SplitterPanel.vue', () => { }); it('should exist', () => { - expect(wrapper.find('.p-splitter-panel').exists()).toBe(true); - expect(wrapper.attributes().class).toBe('p-splitter-panel flex align-items-center justify-content-center'); - expect(wrapper.find('.p-splitter-panel').text()).toBe('Panel 1'); + expect(wrapper.find('.p-splitterpanel').exists()).toBe(true); + expect(wrapper.attributes().class).toBe('p-splitterpanel flex align-items-center justify-content-center'); + expect(wrapper.find('.p-splitterpanel').text()).toBe('Panel 1'); }); }); diff --git a/components/lib/splitterpanel/style/SplitterPanelStyle.d.ts b/components/lib/splitterpanel/style/SplitterPanelStyle.d.ts index 6b37f7469..ea868b72b 100644 --- a/components/lib/splitterpanel/style/SplitterPanelStyle.d.ts +++ b/components/lib/splitterpanel/style/SplitterPanelStyle.d.ts @@ -10,7 +10,7 @@ import { BaseStyle } from '../../base/style'; export enum SplitterPanelClasses { - root = 'p-splitter-panel' + root = 'p-splitterpanel' } export interface SplitterPanelStyle extends BaseStyle {} diff --git a/components/lib/splitterpanel/style/SplitterPanelStyle.js b/components/lib/splitterpanel/style/SplitterPanelStyle.js index 99c929052..35093b894 100644 --- a/components/lib/splitterpanel/style/SplitterPanelStyle.js +++ b/components/lib/splitterpanel/style/SplitterPanelStyle.js @@ -1,7 +1,7 @@ import BaseStyle from 'primevue/base/style'; const classes = { - root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }] + root: ({ instance }) => ['p-splitterpanel', { 'p-splitterpanel-nested': instance.isNested }] }; export default BaseStyle.extend({