Hello,
The components automatically adjusts itself based on its container size. Sometimes, it is desirable to have a small picker, like this:
Instead of a full-blown picker (especially when the element is a secondary element):
Unfortunately, there is currently no easy way to do that. The only workaround I’ve found is to wrap this by a with a maxInlineSize, but the issue is that the label will also be impacted, causing the label to go in two lines and being partially obstructed:
I think this component should have a size property to make this use case easier.
1 Like
When the dropzone is that small, the label won’t really fit well. You can hide the label with `labelAccessibilityVisibility=“exclusive”.If you still need the label. Just put a “s-text” above the dropzone with “s-stack”.
Here’s how i do it for my app:
<s-stack gap="small-300">
<s-text>Media</s-text>
<s-grid gridTemplateColumns="repeat(4, 1fr)" gap="small">
{/* list the uploaded images */}
{mediaFileList.map((file) => (
<s-grid-item key={file.id}>
<s-box border="base" borderRadius="base" overflow="hidden">
<s-image src={file.url}></s-image>
</s-box>
</s-grid-item>
))}
{/* the small dropzone with icon */}
<s-grid-item>
<s-drop-zone
label="Media"
accessibilityLabel="Upload image of type jpg, png, or gif"
labelAccessibilityVisibility="exclusive"
accept=".jpg,.jpeg,.png,.gif,.webp,.heic"
onInput={(e) => uploadFile(e.currentTarget.files)}
>
<div
style={{
aspectRatio: "1/1",
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<s-icon type="plus"></s-icon>
</div>
</s-drop-zone>
</s-grid-item>
</s-grid>
</s-stack>
Result:
This was a pretty nice work around. If you need the same content that it provides by default you can just specify it instead of an icon with your example.
<s-drop-zone
id="image-dropzone"
label=""
accessibilityLabel="Upload image of type jpg, png, gif, or webp"
accept=".jpg,.png,.gif,.webp,image/*"
onChange="handleDropZoneChange(event)"
>
<div style="aspect-ratio: 1/1; width: 100%; display: flex; justify-content: center; align-items: center;">
<s-stack direction="block" gap="base" alignItems="center">
<s-button variant="secondary">Upload Image</s-button>
<s-text alignment="center" color="subdued">Accepts .jpg, .png, .gif, .webp, and image files</s-text>
</s-stack>
</div>
</s-drop-zone>
