diff --git a/components/lib/chips/style/ChipsStyle.js b/components/lib/chips/style/ChipsStyle.js index 93526ad21..04afa58b3 100644 --- a/components/lib/chips/style/ChipsStyle.js +++ b/components/lib/chips/style/ChipsStyle.js @@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style'; const classes = { root: ({ instance, props }) => [ - 'p-chips p-component p-inputwrapper', + 'p-inputchips p-component p-inputwrapper', { 'p-disabled': props.disabled, 'p-invalid': props.invalid, @@ -12,15 +12,15 @@ const classes = { } ], container: ({ props, instance }) => [ - 'p-chips-group', + 'p-inputchips-group', { 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' } ], - token: ({ state, index }) => ['p-chips-chip', { 'p-focus': state.focusedIndex === index }], - label: 'p-chips-chip-label', - removeTokenIcon: 'p-chips-chip-icon', - inputToken: 'p-chips-input-chip' + token: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }], + label: 'p-inputchips-chip-label', + removeTokenIcon: 'p-inputchips-chip-icon', + inputToken: 'p-inputchips-input-item' }; export default BaseStyle.extend({ diff --git a/components/lib/themes/primeone/base/chips/index.js b/components/lib/themes/primeone/base/chips/index.js index deb04937a..be192aefc 100644 --- a/components/lib/themes/primeone/base/chips/index.js +++ b/components/lib/themes/primeone/base/chips/index.js @@ -1,10 +1,10 @@ export default { css: ({ dt }) => ` -.p-chips { +.p-inputchips { display: inline-flex; } -.p-chips-group { +.p-inputchips-group { margin: 0; padding: 0; list-style-type: none; @@ -25,34 +25,34 @@ export default { box-shadow: ${dt('chips.box.shadow')}; } -.p-chips:not(.p-disabled):hover .p-chips-group { +.p-inputchips:not(.p-disabled):hover .p-inputchips-group { border-color: ${dt('chips.hover.border.color')}; } -.p-chips:not(.p-disabled).p-focus .p-chips-group { +.p-inputchips:not(.p-disabled).p-focus .p-inputchips-group { border-color: ${dt('chips.focus.border.color')}; outline: 0 none; } -.p-chips.p-invalid .p-chips-group { +.p-inputchips.p-invalid .p-inputchips-group { border-color: ${dt('chips.invalid.border.color')}; } -.p-variant-filled.p-chips-group { +.p-variant-filled.p-inputchips-group { background: ${dt('chips.filled.background')}; } -.p-chips:not(.p-disabled).p-focus .p-variant-filled.p-chips-group { +.p-inputchips:not(.p-disabled).p-focus .p-variant-filled.p-inputchips-group { background: ${dt('chips.filled.focus.background')}; } -.p-chips.p-disabled .p-chips-group { +.p-inputchips.p-disabled .p-inputchips-group { opacity: 1; background: ${dt('chips.disabled.background')}; color: ${dt('chips.disabled.color')}; } -.p-chips-chip { +.p-inputchips-chip { cursor: default; display: inline-flex; align-items: center; @@ -63,24 +63,24 @@ export default { border-radius: ${dt('rounded.sm')}; } -.p-chips-chip.p-focus { +.p-inputchips-chip.p-focus { background: ${dt('chips.chip.focus.background')}; color: ${dt('chips.chip.focus.color')}; } -.p-chips-chip-icon { +.p-inputchips-chip-icon { cursor: pointer; margin-left: 0.375rem; } -.p-chips-input-chip { +.p-inputchips-input-item { padding: 0.25rem 0; margin-left: 0.5rem; flex: 1 1 auto; display: inline-flex; } -.p-chips-input-chip input { +.p-inputchips-input-item input { border: 0 none; outline: 0 none; background-color: transparent; @@ -97,11 +97,11 @@ export default { margin: 0; } -.p-chips-input-chip input::placeholder { +.p-inputchips-input-item input::placeholder { color: ${dt('chips.placeholder.color')}; } -.p-fluid .p-chips { +.p-fluid .p-inputchips { display: flex; } `