Enhancement: [Inline Editable] Add appearance="minimal" property

[capeoples]

Description

For the inline editable component, it would be ideal to be able to update the button styles for the "x" and "✔️" to be any supported button style. This will enable this component to fully adapt to whatever design/workflow is needed.

Which Component

Inline editable > controls enabled

Example Use Case

In the create new item workflow in Online, a user could want to create a new folder to store the item in. We need the confirm/cancel icons to support this, but it would not be appropriate for the "✔️" to use the solid button style as it's contained in a workflow that already has a primary/solid action button.

cc @paulcpederson

[macandcheese]

Is this still a valid request @capeoples ? If so, would the iconography need to be customizable as well?

[paulcpederson]

@macandcheese yes we have a few places where we could use inline-edit but don't because it destroys the established visual hierarchy. Not sure what the API for this would look like but we're still interested for sure.

[macandcheese]

Could your team provide examples of what they’d need visually?

Choosing from a set of icons (like the split-button experience where you select from a pre existing set - in this case add, check, etc) or is more control than that needed?

A similar question for color of primary button - we could allow a choice for the main button from our set of button colors (besides red). The cancel button should remain IMO, allowing that to be something like a garbage can could be conflated with deleting the row (which, I guess you could wire up)?

Short of slotting custom buttons it would be nice to have at least some set of pre defined options to keep these consistent even when teams need to adjust slightly.

[paulcpederson]

I think the main case is a secondary interface on the calcite background color with more transparent elements (would be great to have a more minimal input style for this as well). A lot of times it's a list where every single element has an inline edit functionality. (Editing abcabc folder name below)

You could argue that we could use the inline edit as is here, but it feels pretty aggressive.

[macandcheese]

Makes sense... some thoughts / options:

In the past we've heard concerns over a "minimal" input type - I agree that would be a nice solution to leverage here. Maybe that is something we can re-visit, since it applies in this case but also in the "normal" input component.

Would you be ok deferring to the provided icons at all times (read: does the check / clear ever need to be customizable)?

Would you be ok if there was a prescribed "secondary / subtle" inline-editable appearance that allowed another visual option but stopped short of explicit customizability of each button?

[paulcpederson]

Would you be ok deferring to the provided icons at all times

Yeah, that's fine. Would be better to be consistent about the icons used anyways.

Would you be ok if there was a prescribed "secondary / subtle" inline-editable appearance that allowed another visual option but stopped short of explicit customizability of each button?

Yes. I think it's probably easier if calcite just provides a slightly more subtle style. Personally I don't need super fine grained control over each button, just a way to turn the volume knob down a bit in general.

[macandcheese]

Excellent. Let's repurpose this issue as "add a secondary / subtle" appearance style to the inline-editable component. This would align with other components that have an "appearance" prop, where we provide consistent alternatives to our default styles.

[paulcpederson]

Nice, in my mind this is very similar to something like the accordion's appearance="minimal" prop. This is a property that would be welcome on lots of components like lists, etc.