Improve the way React component can extend Vanilla %placeholders

[bartaz]

React components should not include duplicates of Vanilla styling, especially Vanilla base, as it may cause conflicts when base styles override existing component styles (bug such as https://github.com/canonical/react-components/issues/1041).

To avoid this we need to allow including SCSS placeholders without including any actual Vanilla styling. This is possible with base placeholders via @include vf-b-placeholders, but is not possible with other more specific placeholders, such as included in vf-b-forms or other components.

We should extract the placeholders outside of regular Vanilla styles, so they can be included in React components without including the base/component styles themselves.

So for example any placeholders needed by forms, could be separated into vf-b-forms-placeholders (or be included in vf-b-placeholders).

Current workaround requires any Vanilla includes that are not just placeholders to be scoped within a component class name, as

.my-component {
  @include vf-b-forms; // Vanilla form styles scoped within the component
}

[bartaz]

Triage: this is quite high effort, but also high impact (it will help React devs a lot when building components with custom styling).

We are aiming for new architecture, but it could be useful to have a temporary solution for the time being. Needs discussion in the team in terms of scope/priorities.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15275.

This message was autogenerated