This configures slot's default behavior, should be hardcoded

state.components should have hardcoded values with matching element
#18844

How do we allow the user to override the default rendered element?

In this case:

• via as prop, it should be handled via getSlots(), i.e. <Text as="h1" /> still should work
• via composing new component:

function TextAsH1() {
  const state = useText()
  state.components.root = 'h1'
} 

Is there anything that breaks these scenarios?

From what I'm seeing getSlot is picking the as prop from the slot in the state to get the element but getNativeElementProps strips as out as it's not a native prop. Should I not be using getNativeElementProps?

Then let's keep it as it is for now. Can you please create an issue to track it? 🙏 It's not expected behavior

Issue created #19785

I'm not sure if this needs to be here? I believe that ...props just goes on the root slot.

@czearing yes, it's correct. Overlooked it 🙄

I seem to be missing something then. How will useTextStyles hook have access to the props then?

From what I know, the props that are used for styling and what not are deconstructed and passed on:

  const { value, defaultValue } = props;
  const state: ComponentState = {
    value,
    defaultValue,
    root: getNativeElementProps('div', {
      ...
    }),

Everything else gets passed to the root:

    root: getNativeElementProps('span', {
      ref,
      ...props,
      id: useId('componentName-', props.id),
    }),

AFAIK the interface should be changed to type based on discussions and the RFC found here: #19823 and PR: #19850. WDYT?

Good point, I've gone ahead and migrated all interfaces to types.