create buttons w/ modals and panels & table examples #92
Conversation
buttons-panel-modal-example/src/app/extensions/components/ModalExample.tsx
Outdated
Show resolved
Hide resolved
| @@ -0,0 +1,17 @@ | |||
| # HubSpot Getting Started Project Template | |||
There was a problem hiding this comment.
I mentioned this for Heather's examples as well: can you check in with @aanchalHS and Amelia on what the contents of this README should be? I don't have a strong take there, and we should make it consistent with the others.
| /> | ||
| )); | ||
|
|
||
| // Define the Extension component, taking in runServerless, context, & sendAlert as props |
There was a problem hiding this comment.
I'd kill his comment. We automatically generate it, but it looks outdated to me 🤔 I'll see if we need to update the template we use for new projects to address this upstream, but might as well remove it from here
| // Define the Extension component, taking in runServerless, context, & sendAlert as props |
| Working with buttons within panels and modals can get tricky | ||
| Here are some examples that we suggest you to follow. |
There was a problem hiding this comment.
nit: typo?
| Working with buttons within panels and modals can get tricky | |
| Here are some examples that we suggest you to follow. | |
| Working with buttons within panels and modals can get tricky. | |
| Here are some examples that we suggest you follow. |
| <TableCell> | ||
| When users need context from the page below, for longer forms | ||
| and multi-step flows. These pair well with the Table component. | ||
| Follow the same guidance as recommended above, but in this case, we suggest using buttons in the footer. </TableCell> |
| <Flex direction="column" gap="small"> | ||
| <Text> | ||
| When we get all the 0's and 1's line up, a link will show in | ||
| your |
There was a problem hiding this comment.
nit: unintentional ? I haven't seen one of those in a minute!
| your | |
| your |
There was a problem hiding this comment.
This was intentional bc adding a manual space wasn't rendering properly with the next <Text> block
| <PanelSection> | ||
| <Text> | ||
| When we get all the 0's and 1's line up, a link will show in | ||
| your |
There was a problem hiding this comment.
nit: nbsp;👾
| your | |
| your |
| </Text> | ||
| . Also, just to be sure, you're gonna get a confirmation email. | ||
| </Text> | ||
| <Input label="Label *" name="label" placeholder="Placeholder" /> |
There was a problem hiding this comment.
is having the same input multiple times intentional?
There was a problem hiding this comment.
Yes, it matches design's mock
|
closing to merge together with new structure changes |
asun1234
force-pushed
the
asun/buttons-panel-modal-example
branch
from
8488486 to
daf6a55
Compare
asun1234
changed the title
|
@weaverhe waiting on 👍 from design/product before merging, hold tight |
Issue
Developers can be easily tripped up by buttons, especially how they should be used within structures like Modals and Panels. Here's examples to help developers see what's possible, to make it easier for them to build things that match our design system.
product and design pattern guidance:
To merge examples together, added changes from #91
Modal and Panel Examples:
