search

Automattic / dops-components

Shared Calypso-style components for non-Calypso projects.
GNU General Public License v2.0
9 stars 6 forks source link

Foldable Card: New prop clickableHeaderText #20

Closed dereksmart closed 8 years ago

dereksmart commented 8 years ago

Sometimes, like in Jetpack when you already have a clickable item (toggle) in the header, you still want part of the header to be clickable and expand, but not the whole thing, as it would clash with the toggle. This allows just the header text to be clickable.

Also adds the existing clickableHeader to the listed propTypes, as it was missing from there before.

To test: Get this branch linked to any Jetpack branch, and add clickableHeaderText={ true } to any FoldableCard

dereksmart commented 8 years ago

cc @MichaelArestad for review

eliorivero commented 8 years ago

Tested in action in https://github.com/Automattic/jetpack/pull/3935 and works perfectly.

eliorivero commented 8 years ago

Make the whole header clickable, with the exception of the toggle and the up/down arrow as shown in light blue in the screenshots. Large screen

block1

Small screen

block2
eliorivero commented 8 years ago

cc @jeffgolenski @MichaelArestad for review

jeffgolenski commented 8 years ago

@eliorivero I tested this in all modern browsers on iOS, Android, mac os, and IE 10+ – looks good to me.