AutoComplete: Design tokens are not being used

[fatihsolhan]

Describe the bug

AutoComplete component is not using the listed design tokens in the documentation

It uses inputtext tokens instead.

Here is the discussion link as well: https://github.com/orgs/primefaces/discussions/3067

Reproducer

https://stackblitz.com/edit/atybs1-swvfn3?file=src%2FApp.vue

PrimeVue version

4.2.2

Vue version

4.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[fatihsolhan]

Update:

I noticed it's being used when it's in multiple mode: https://github.com/primefaces/primevue/blob/312bf677ea06d92e84e9e4cb1c4001c755c6dd63/packages/primevue/src/autocomplete/AutoComplete.vue#L1-L4

[j0rgedev]

You're absolutely right, @fatihsolhan. The issue appears when the multiple prop is enabled because the InputText becomes visible, and it brings its own design tokens.

Here's what I've attempted so far to solve this:

1. Imitating the ToggleButton I tried to follow the approach used by the ToggleButton component because I thought it'd use the Button component; however, it does not since itonly applies its styles. However, this wouldn't work for the Autocomplete component because it requires the full functionality of InputText, so let's discard this attempt.

2. Adding Styles to p-autocomplete-input I noticed that the p-autocomplete-input class is being applied to the InputText, but not its styles, so i added them in the AutoCompleteStyle.js file. Unfortunately, these styles are being overridden by the default InputText styles.

3. Disabling styled Prop for InputText I found that if I set the styled prop of InputText to false and create new design tokens for p-autocomplete-input, it starts working. This approach prevents the override issue. I just created the autocomplete.inputtext.background dt which should be applied like this:

   myAutoComplete: {
   border: {
       color: 'blue',
   },
   inputtext: {
       background: 'red',
   },
   }

   new AutoComplete.js file:

   const theme = ({ dt }) => `
   .p-autocomplete-input {
   font-family: inherit;
   font-feature-settings: inherit;
   font-size: 1rem;
   color: ${dt('inputtext.color')};
   background: ${dt('autocomplete.inputtext.background')}; //new dt
   padding-block: ${dt('inputtext.padding.y')};
   padding-inline: ${dt('inputtext.padding.x')};
   border: 1px solid ${dt('inputtext.border.color')};
   transition: background ${dt('inputtext.transition.duration')},
               color ${dt('inputtext.transition.duration')},
               border-color ${dt('inputtext.transition.duration')},
               outline-color ${dt('inputtext.transition.duration')},
               box-shadow ${dt('inputtext.transition.duration')};
   appearance: none;
   border-radius: ${dt('inputtext.border.radius')};
   outline-color: transparent;
   box-shadow: ${dt('inputtext.shadow')};
   }
   // more styles ....
   `;

   However, there is a downside for this approach. As you saw in the code above, I'm reusing the InputText design tokens for the rest of the styles (e.g color, padding, etc), so to solve that, we'll just need to create new design tokens like I did for the background, which makes sense, right?

Conclusion The third option seems like the most logical solution to me. I can open a PR to show the results, but it know might get rejected as there could be better solutions.

Let me know your thoughts!