Unable to use the slot in VAFileInputMultiple

[pmclaren19]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

I am working this ticket to try to implement the new va-file-input-multiple component and when trying to use the slot.

I noticed a few things...

1. Storybook doesnt have great implementation instructions on how to use this slot. The example I would expect would be something like what the va-accordion has for the headline slot. But what Im seeing here makes it look like I can just do this which is not true

const additionalFormInputsContent = (
  <div>
    <va-select className="hydrated" uswds label='What kind of file is this?' required>
      <option key="1" value="1">Public Document</option>
      <option key="2" value="2">Private Document</option>
    </va-select>
  </div>
);
  
<VaFileInputMultiple ... >
  {additionalFormInputsContent}
</VaFileInputMultiple>

2. In the code it looks like we are supposed to use class="additional-info-slot" but when I tried this, the slot isnt being used and its being added underneath the va-file-input components.

const additionalFormInputsContent = (
      <>
        {this.props.files.map(
          ({ file, docType, isEncrypted, password }, index) => (
            <div slot="additional-info-slot">
              <p key={index} >Test</p>
            </div>
        ))}
      </>
    );

          <VaFileInputMultiple
            id="file-upload"
            className="vads-u-margin-bottom--3"
            label="Upload additional evidence"
            hint="You can upload a .pdf, .gif, .jpg, .jpeg, .bmp, or .txt file. Your file should be no larger than 50MB (non-PDF) or 150 MB (PDF only)."
            accept={FILE_TYPES.map(type => `.${type}`).join(',')}
            onVaMultipleChange={e => this.changeFiles(e.detail.files)}
            name="fileUpload"
            aria-describedby="file-requirements"
          >
            {additionalFormInputsContent}
          </VaFileInputMultiple>

What I expected to happen

I expected to be able to use the slot

Reproducing

Steps to reproduce:

1. In code add the component va-file-input-multiple
2. Try to add the slot following the Storybook instructions (you can also try the things I wrote above )

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

Details

As our current work around we will continue to used the V1 version of the va-file-input component

Slack convo link here

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc

[caw310]

Here is a link to the Slack conversation around this bug. https://dsva.slack.com/archives/C01DBGX4P45/p1722966284369869

[ataker]

As a quick test I was able to successfully add va-file-input-multiple with additional content to the DS Playground in vets website locally. I don't think this is an issue with the component.

Here's the code I used:

const additionalFormInputsContent = (
    <div>
      <va-select className="hydrated" uswds label='What kind of file is this?' required>
        <option key="1" value="1">Public Document</option>
        <option key="2" value="2">Private Document</option>
      </va-select>
    </div>);
return (
  <VaFileInputMultiple>{additionalFormInputsContent}</VaFileInputMultiple>
)