Disclosure with button rendered as link?

[andioneto]

Hi folks, this is a follow up question/discussion to my question about how to style the disclosure button in the primitive.

In my case, I am using the disclosure to conditionally show form sections to edit and additional features.
In a feedback session with the PM, they asked for this render to decrease noise on the page from all of the form sections.
I tried it out with a secondary button, but felt like it created too much noise on the page.
Here is a sandbox of a demo form using the disclosure primitive with the button rendered as a link in two different positions.
I think having the button rendered as a link under the paragraph makes most sense, but I'm curious what you all think.
Also, is my use of the button rendered with link styling here appropriate?

[corinne-nagel]

I think having the button render under the paragraph makes the most sense!
I think the styling is correct, maybe reduce some of the padding on the left and right of the carrot by 2/4 pixels or so and move the carrot to the right of the text. Otherwise looks good!

[andioneto]

Awesome, thank you 😸

[andioneto]

@corinne-nagel below is the UI after adjusting the padding. FYI I had to create a styled <span /> wrapper with @emotion/styled because the default padding for the button component is 6px and the disclosure rendered as a button do not allow for adjusting padding.
Please let me know if that is problematic or if you see anything below that still looks off. Thanks for the quick feedback 🙌

[aayushpi]

nice, did you use Box as span?

[andioneto]

No, I couldn't because Box doesn't accept any negative padding values. 😿
The text span inside the button has padding that I couldn't modify. So instead I used styled.span({ margin: '-.5em' }).

[andioneto]

That's why the padding was indenting the button as link slightly off the alignment from the paragraph above.

[corinne-nagel]

Looks great to me! Thanks!

…

On Mon, Jun 22, 2020 at 4:45 PM Andi Oneto ***@***.***> wrote: @corinne-nagel <https://urldefense.com/v3/__https://github.com/corinne-nagel__;!!NCc8flgU!KvWoLNjTN-xxRIDBHPz8mp59Eh6Su6fMnd5u_FuF_LAnxmbk0iRuIu6i5rYevw$> below is the UI after adjusting the padding. FYI I had to create a styled <span /> wrapper with @emotion/styled because the default padding for the button component is 6px and the disclosure rendered as a button do not allow for adjusting padding. Please let me know if that is problematic or if you see anything below that still looks off. Thanks for the quick feedback 🙌 [image: Screen Shot 2020-06-22 at 3 43 26 PM] <https://urldefense.com/v3/__https://user-images.githubusercontent.com/18120906/85342337-36c68100-b49f-11ea-9e54-cca69a5ef0e9.png__;!!NCc8flgU!KvWoLNjTN-xxRIDBHPz8mp59Eh6Su6fMnd5u_FuF_LAnxmbk0iRuIu4xF9nDWQ$> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://urldefense.com/v3/__https://github.com/twilio-labs/paste/discussions/521*discussioncomment-29325__;Iw!!NCc8flgU!KvWoLNjTN-xxRIDBHPz8mp59Eh6Su6fMnd5u_FuF_LAnxmbk0iRuIu4s766Vpg$>, or unsubscribe <https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/AO3AMVDWPEIEQM7ELHBIMTTRX7NKFANCNFSM4OE6F7CQ__;!!NCc8flgU!KvWoLNjTN-xxRIDBHPz8mp59Eh6Su6fMnd5u_FuF_LAnxmbk0iRuIu446w_EAw$> .