Terra-core: Action footer component

[zhongyn]

Summary

An action footer is a footer bar that contains commonly used actions in the form
of pre-arranged buttons and hyperlinks. It can be used in multiple UI components, such as modal dialog, split views, popovers and cards.

Expected behavior

Should be able to give the component buttons/hyperlinks and specify their layout.
If no action is passed in, render empty footer with 10px height

Responsiveness

On large screen size action items are horizontally positioned, while on small size they are stacked

React Props

| Prop | Type | Default | Description |
------|-------|--------|-------------
| start | node | | actions to be displayed at the start side
| center | node | | actions to be displayed in the center
| end | node | | actions to be displayed at the end side

Themeable styles

background-color
border-top

Example

<ActionFooter
  start={<Button text='cancel'/>}
  end={<div><Button text='save'/> <Button text='next'/></div>}
/>

<ActionFooter center={<a href='google.com'/>} />

[dylanklohr]

Is border-top really the only border we want themeable? Is this because the action footer will have some styling to make it expand to fill its parent horizontally and always sit at the bottom of its parent?

[emilyrohrbough]

If no action is passed in, render empty footer with 10px height

Should this not render at all if nothing is given?

Also, does this component provide any default actions? If not, what makes this component different than a plain footer?

[zhongyn]

Should this not render at all if nothing is given?

@neilpfeiffer can you explain this since it's specified in the UI design

does this component provide any default actions? If not, what makes this component different than a plain footer?

It's supposed to be a container that provides pre-arranged layout. So user can specify the location of the action items, such as start/center/end.

[zhongyn]

Is border-top really the only border we want themeable? Is this because the action footer will have some styling to make it expand to fill its parent horizontally and always sit at the bottom of its parent?

Yes, it's the only boder. The width of action footer will be 100% of the parent element and it will be at the bottom of its parent

[dylanklohr]

+1 on tech design

[zhongyn]

@dylan-sftwr brings a good point of the spacing between action items. For example, if there are two buttons at the end of the footer, should the content passed in take care of the spacing or the footer pre-define the spacing between buttons?

<ActionFooter
  start={<Button text='cancel'/>}
  end={<div>
            <Spacer><Button text='save'/> </Spacer>
             <Space><Button text='next'/></Spacer>
       </div>}
/>

<ActionFooter
  start={<Button text='cancel'/>}
  end={[<Button text='save'/>, <Button text='next'/>]}
/>

[dm123455]

Can we have the props named as left, center and right?

[bjankord]

+1 on tech design.

[zhongyn]

@dm123455 using start/end is within the consideration of bidi. Most of our style names and components are following this convention, such as arrange, slidepanel, dynamic-grid

[zhongyn]

talked with UX/Brett in UX sync, the content passed in the footer will take care of the spacing between buttons itself and action footer is unopinionated on it

[dm123455]

Can you please update the tech design with the design discussion we had? Thanks

[zhongyn]

talked with @neilpfeiffer @chris @alex-bezek in UX sync, final UI requirement lands on:

1. padding top/bottom = 5px
2. min-height = 40px
3. vertical center children
4. three-socket interface

see updated zeplin callout

cc @dm123455

It will comply OCS that footer height will be 40px when hyperlink is passed as center node

[alex-bezek]

and if no contents were passed in its the other specific height
+1

[dev-cprice]

With the change from one component that has three sockets to two variants (ActionFooter with start & end sockets and CenteredActionFooter with just a center socket), should the centered variant use children or center as the socket prop?

Using children seems natural since there will only be one socket available for this variant, however it will seem like a _weird API_ when compared to the "default" variant with start and end sockets/props.

So, in summary:

<ActionFooter
  start={...}
  end={...}
/>

<CenteredActionFooter>
  {...}
</CenteredActionFooter>

// OR

<CenteredActionFooter
  center={...}
/>

cc @alex-bezek @dm123455 @bjankord

[bjankord]

I'm fine with either approach with a slight preference towards a center prop.

[dylanklohr]

center, keep the API consistent in consumption-form, imo

[PaulSolDev]

JIRA created