initial draft of a kebab pattern and a card pattern #26

jgiardino · 2016-11-02T19:14:09Z

Summary of changes:

updated dropdown pattern to include parameters for:
- REMOVED: displaying dropdown as a kebab -- this will be included as a separate story
- displaying dropdown button on the right
included two variations of a card pattern
- REMOVED: one with separate components for the card header and the card footer. This allows us to build card variations that use other components as the card contents. THIS WILL BE HANDLED WITH TRANSCLUSION (i.e. partial block)
- one single component that includes parameters for including specific elements of the card. Card contents would be specified using the partial block, e.g. {{#> components-card ...}} card contents here {{/ components-card}}

jgiardino · 2016-11-02T19:21:40Z

@andresgalante @srambach -- Let me know if you have any suggestions. I realize there is a lot going on in this one, but there's a lot I'd like to get your feedback on.

I still want to include different variations of the card as currently represented on the patternfly site, but I'm not sure what direction to take the card (as a split out component where we use a card top component, other componenets for the card contents, and a card bottom component, or not). See my comments about this above.

I also wanted you to see the kebab in the context of the card, and not just by itself.

Some questions I have are:

Which variation of the card component should I use?
What layouts of cards should I include?
Where should styles for the kebab go? I included the same css in two different files, one for icons and one for dropdowns (i'm not sure where to add the dropdown scss file though). I will remove the updates from the one they don't belong in.
What styles should I use for the kebab (specifically color)? Should the blue color defined for the kebab on hover, etc... be removed (i.e. use the color defined for .btn-link on hover)?

Thanks!

jgiardino · 2016-11-03T13:25:27Z

source/scss/_pf-basic-dropdowns.scss

+  .dropdown-toggle::after {
+    display: none;
+  }
+  .btn-link {


related to this discussion: https://github.com/patternfly/patternfly-atomic/pull/25/files#r86324052

Instead of doing this:
.pf-dropdown__kebab .btn-link

I would use something like this?:
.pf-dropdown__kebab__btn-link

Is this the correct use of dashes and underscores?

It can get messy quickly. :( Definitely if they would have been nested, I think they'd be joined by the __ as a block__element relationship. But, is the kebab a child of the pf-dropdown, or is it a variant of a pf-dropdown? So maybe it's actually .pf-dropdown--kebab__btn-link. Which looks backwards but reading it carefully you'd know it's a btn-link within the kebab variant of a .pf-dropdown? WDYT?

andresgalante · 2016-11-03T16:58:58Z

@jgiardino A challenge we are having with the kebab on pf3 is the tiny click zone. We should fix it in pf4

jgiardino · 2016-11-03T17:15:45Z

Oh, yes. Thank you for reminding me!

jgiardino · 2016-11-04T19:32:29Z

@andresgalante, @srambach, @bleathem

I made changes based on our discussion this morning about using partial blocks to include additional card elements. I didn't include an example of a card using other components as contents yet, but the partial block is defined as part of the card.

I also created separate files showing different variations of the card. Let me know if there are other variations I should include or any variation I should remove.

Some questions/issues that still need to be addressed:

Kebab styling - Kebab styling still needs to be updated to enlarge the clickable area (or is this something that would be covered by Sarah's implementation of the icon button?)
checkbox styling -
- my biggest issue with this is how to make the clickable area larger. I made the width and height bigger which is clickable, but there's no way to position the checkbox within this area. I'm wondering if we should include the checkbox inside an empty label that's much larger than the checkbox
- I included classes .pf-card--multiselect__block and .pf-card--multiselect__header to define padding inside these elements when checkboxes are included, so that the contents in these elements do not overlap the checkbox. But I feel like this is a case where coding guidelines clash with ease of implementation. For example, with this implementation, we're telling developers "If you want multiselection, then add this class here, and that class there" when really as a developer it's easier to just add a class to the parent element, then add the checkbox
  - this is a reminder for myself, that whatever we decide, I need to make sure the same padding that's used in the header is also included in the contents block
Headers - I noticed the styles for the headers changed (I think the line height was reduced). Currently the styling of headers relative to the card seems off, but I'm not sure if the header styles are final or not, and also am curious what your thoughts are.

andresgalante · 2016-11-07T15:18:02Z

source/scss/_pf-component-card.scss

+  top: $pf-spacer-xxxs;
+  left: $pf-spacer-xxs;
+  input[type=checkbox] {
+    //visibility: hidden; is not keyboard accessible and should be replaced with something that keeps the checkbox "visible" in the dom but not rendered on the screen


Let's document this. Can we create a mixin so we can reuse the same solution to hide/show elements in different components?

andresgalante · 2016-11-07T15:19:01Z

source/scss/_pf-component-card.scss

+    // using z-index to push the checkbox behind the card until it has keyboard focus, or the user hovers over the card
+    z-index:-1;
+    position: relative;
+    width: $pf-spacer-xxxl;


changing the size of an checkbox it's not consistent in different browser. Does it look bad if we use the default?

…ern and multiselection from card pattern, and included utility classes to add margin-bottom to the icons in the card

jgiardino · 2016-11-07T16:19:29Z

@andres, @srambach
I made updates to the PR to remove card variations that use the checkbox and the kebab, until those patterns are finalized.
I also included a utility class to the icon to add margin-bottom.

@andresgalante please check the css file for components and make sure the updates are what you expected.

Thanks!

andresgalante · 2016-11-07T16:24:11Z

source/scss/_pf-component-card.scss

@@ -2,7 +2,7 @@
 // Base styles
 //

-.card {
+.pf-card {


all cards (including panels) have the shadow. So that one should actually be .card, sorry

srambach · 2016-11-07T16:38:42Z

source/_patterns/components/03-cards/00-card.md

+| Class | Usage |
+| -- | -- |
+| `.pf-card--accented` **Applied to:** `.card` |  **Outcome:** Displays a top border with an accent color  **Required:** No  |
+| `.pf-card--multiselect` **Applied to:** `.card` |  **Outcome:** Alters the card layout to accommodate a checkbox  **Required:** If displaying a checkbox in the card  |


Should there be a .pf-card-multiselect in the scss?

andresgalante · 2016-11-07T18:34:42Z

Lets merge it, I've created a story to continue with it: https://patternfly.atlassian.net/browse/PTNFLY-1961

thanks @jgiardino you are awesome 😄

jgiardino commented Nov 3, 2016

View reviewed changes

jgiardino added 2 commits November 7, 2016 09:56

initial draft of a kebab pattern and a card pattern

90fb640

making updates to card component and adding css for accent and checkbox

5ac9511

andresgalante reviewed Nov 7, 2016

View reviewed changes

removed kebab variation from the dropdown pattern, removed kebab patt…

166c90f

…ern and multiselection from card pattern, and included utility classes to add margin-bottom to the icons in the card

jgiardino force-pushed the card branch from b2c46df to 166c90f Compare November 7, 2016 16:06

forgot to remove kebab css from previous commit

889ceb5

andresgalante reviewed Nov 7, 2016

View reviewed changes

fixing class name in card css file

ffec821

srambach reviewed Nov 7, 2016

View reviewed changes

andresgalante merged commit 4db3727 into patternfly:master Nov 7, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

initial draft of a kebab pattern and a card pattern #26

initial draft of a kebab pattern and a card pattern #26

jgiardino commented Nov 2, 2016 •

edited

Loading

jgiardino commented Nov 2, 2016 •

edited

Loading

jgiardino Nov 3, 2016

srambach Nov 3, 2016

andresgalante commented Nov 3, 2016

jgiardino commented Nov 3, 2016

jgiardino commented Nov 4, 2016 •

edited

Loading

andresgalante Nov 7, 2016

andresgalante Nov 7, 2016

jgiardino commented Nov 7, 2016

andresgalante Nov 7, 2016

srambach Nov 7, 2016

andresgalante commented Nov 7, 2016

initial draft of a kebab pattern and a card pattern #26

initial draft of a kebab pattern and a card pattern #26

Conversation

jgiardino commented Nov 2, 2016 • edited Loading

jgiardino commented Nov 2, 2016 • edited Loading

jgiardino Nov 3, 2016

Choose a reason for hiding this comment

srambach Nov 3, 2016

Choose a reason for hiding this comment

andresgalante commented Nov 3, 2016

jgiardino commented Nov 3, 2016

jgiardino commented Nov 4, 2016 • edited Loading

andresgalante Nov 7, 2016

Choose a reason for hiding this comment

andresgalante Nov 7, 2016

Choose a reason for hiding this comment

jgiardino commented Nov 7, 2016

andresgalante Nov 7, 2016

Choose a reason for hiding this comment

srambach Nov 7, 2016

Choose a reason for hiding this comment

andresgalante commented Nov 7, 2016

jgiardino commented Nov 2, 2016 •

edited

Loading

jgiardino commented Nov 2, 2016 •

edited

Loading

jgiardino commented Nov 4, 2016 •

edited

Loading