feat(ItemLayout): added ItemLayout component #60

mnajdova · 2018-08-08T12:20:19Z

ItemLayout

The Item layout will be a layout component for aligning content in form of media, header (and headerMedia), content (and contentMedia) and end media. This PR fixes #27 and fixes #71.

With this PR the ListItem is also updated to use the ItemLayout component.

TODO

API Proposal

content: PropTypes.any

Shorthand for primary content.

contentMedia: PropTypes.any

End media for the content

header: PropTypes.any

Shorthand for the header.

headerMedia: PropTypes.any

End media for the header

media: PropTypes.any

General start media.

endMedia: PropTypes.any

General end media

renderContentArea: PropTypes.any

Custom function for generating the content area.

renderHeaderArea: PropTypes.any

Custom functino for generating the header area.

renderMainArea: PropTypes.any

Custom function for generating the main area.

important: PropTypes.bool

An item can appear more important and draw the user's attention.

truncateContent: PropTypes.bool

Prop for indicating if the content should be truncated.

truncateHeader: PropTypes.bool

Prop for indicating if the header should be truncated.

debug: PropTypes.bool

Toggle debug mod

Usage example

Jsx code:

<ItemLayout
      media={<Image src="public/images/avatar/small/nom.jpg" avatar />}
      header="Dante Schneider - Super long title here"
      headerMedia="5:22:40 PM"
      content="The GB pixel is down, navigate the virtual interface!"
      contentMedia="!!"
      truncateHeader={true}
      truncateContent={true}
    />

Result:

<div class="ui-layout d e f ui-itemlayout a b c">
    <div class="ui-layout__start">
      <img role="presentation" src="public/images/avatar/small/nom.jpg" class="ui-image g h i j k" />
    </div>
    <span class="ui-layout__gap"></span>
    <div class="ui-layout__main">
      <div class="ui-item-layout__main" style="grid-template-rows:1fr 1fr">
        <div class="ui-layout l e m ui-item-layout__header">
          <div class="ui-layout__main al am an">Dante Schneider - Super long title here</div>
          <span class="ui-layout__gap"></span>
          <div class="ui-layout__end">
            <span class="ui-item-layout__headerMedia">5:22:40 PM</span>
          </div>
        </div>
        <div class="ui-layout n e m ui-item-layout__content">
          <div class="ui-layout__main al am an">The GB pixel is down, navigate the virtual interface!</div>
          <span class="ui-layout__gap"></span>
          <div class="ui-layout__end">!!</div>
        </div>
      </div>
    </div>
  </div>

codecov · 2018-08-08T12:23:47Z

Codecov Report

Merging #60 into master will increase coverage by 0.72%.
The diff coverage is 89.74%.

@@            Coverage Diff             @@
##           master      #60      +/-   ##
==========================================
+ Coverage   86.29%   87.02%   +0.72%     
==========================================
  Files          39       41       +2     
  Lines         664      709      +45     
  Branches       90       94       +4     
==========================================
+ Hits          573      617      +44     
- Misses         88       89       +1     
  Partials        3        3

Impacted Files	Coverage Δ
src/index.ts	`100% <100%> (ø)`	⬆️
src/components/ItemLayout/index.tsx	`100% <100%> (ø)`
src/components/List/ListItem.tsx	`95% <100%> (+12.64%)`	⬆️
src/components/ItemLayout/ItemLayout.tsx	`85.45% <85.45%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 81d4a46...b5b94a2. Read the comment docs.

levithomason · 2018-08-08T18:26:41Z

docs/src/examples/components/ItemLayout/Types/ItemLayoutExample.shorthand.tsx

+    header="Irving Kuhic"
+    headerMedia="7:26:56 AM"
+    content="Program the sensor to the SAS alarm through the haptic SQL card!"
+    debug={knobs.debug}


Since this is the full example with a debug display knob to help the user understand the full layout, let's also include some endMedia here. Perhaps some kind of icon would be great.

I added the end media with ellipses (…) to this examples, as well as the truncate example, as we have there even more knobs.

levithomason · 2018-08-08T18:28:31Z

src/components/ItemLayout/ItemLayout.tsx

+
+  handleMouseLeave = () => {
+    this.setState({ isHovering: false })
+  }


The ItemLayout should not have any listeners or state. Let's strip this.

A layout component should only handle the CSS layout itself. The rest of the logic is left to the component implementing the layout.

levithomason · 2018-08-09T07:24:13Z

Please add Fixes #27 to this PR description. It will link the issues and auto close the issue when this is merged.

https://help.github.com/articles/closing-issues-using-keywords/

-updated ListItem component to work with the ItemLayout

# Conflicts: # CHANGELOG.md # src/components/ItemLayout/itemLayoutVariables.ts # src/components/List/List.tsx # src/components/List/ListItem.tsx # src/themes/teams/components/List/listItemStyles.ts

…component

levithomason · 2018-08-09T21:12:36Z

src/themes/teams/components/ItemLayout/itemLayoutVariables.ts

+
+  // Item
+  vars.itemPaddingLeft = pxToRem(20)
+  vars.itemPaddingRight = pxToRem(18)


This looks like a regression. The listVariables.ts was moved to listItemVariables.ts and the variable names were updated to remove the list* portion.

See master:
https://github.com/stardust-ui/react/blob/master/src/themes/teams/components/List/listItemVariables.ts

levithomason · 2018-08-09T21:13:54Z

src/themes/teams/components/List/listItemStyles.ts

+        color: '#fff',
+        cursor: 'pointer',
+      },
+    }),


We should move the non-position related styles back to the ListItem from the Layout. The layout should not define colors, fonts, etc but only layout styling.

levithomason · 2018-08-09T21:15:34Z

src/themes/teams/components/ItemLayout/itemLayoutStyles.ts

+  },
+
+  media: ({ props }) => {
+    const { important } = props


Since important will likely vary depending on the parent component implementing the items, let's move this prop and style also back to the ListItem side. Keeping just position and DOM structure in the layouts.

levithomason · 2018-08-09T21:15:50Z

src/themes/teams/components/ItemLayout/itemLayoutStyles.ts

+    lineHeight: variables.contentLineHeight,
+  }),
+  contentMedia: () => ({}),
+  endMedia: () => ({}),


No need for empty styles

levithomason

See comments for changes. Probably good to merge once those are addressed. We can iterate on the rest afterward in other PRs.

# Conflicts: # CHANGELOG.md # src/components/List/ListItem.tsx # src/themes/teams/components/List/listItemStyles.ts

-removed important prop from ItemLayout

# Conflicts: # src/components/List/ListItem.tsx

-added item layout component identical to the list item implementation

86d5f3d

mnajdova requested review from dvdzkwsk, kuzhelov and levithomason as code owners August 8, 2018 12:20

-added changelog and fixed examples

ed788c0

mnajdova changed the title ~~-added item layout component identical to the list item implementation~~ feat(ItemLayout): added ItemLayout component Aug 8, 2018

mnajdova changed the title ~~feat(ItemLayout): added ItemLayout component~~ [WIP] feat(ItemLayout): added ItemLayout component Aug 8, 2018

levithomason reviewed Aug 8, 2018

View reviewed changes

manajdov added 5 commits August 9, 2018 10:47

-added CSS props for the parts of the Item layout

96f7ca1

-updated ListItem component to work with the ItemLayout

Merge branch 'master' into feat/item-layout

c5d847d

# Conflicts: # CHANGELOG.md # src/components/ItemLayout/itemLayoutVariables.ts # src/components/List/List.tsx # src/components/List/ListItem.tsx # src/themes/teams/components/List/listItemStyles.ts

-merging changes

0ebdc71

-fixed test

452705c

-added end media to the examples containing knobs in the item layout …

f8b8df9

…component

mnajdova changed the title ~~[WIP] feat(ItemLayout): added ItemLayout component~~ feat(ItemLayout): added ItemLayout component Aug 9, 2018

mnajdova mentioned this pull request Aug 9, 2018

List item header does not have rem size #71

Closed

-fixed issue with the header item layout font size

abf8464

levithomason reviewed Aug 9, 2018

View reviewed changes

levithomason suggested changes Aug 9, 2018

View reviewed changes

manajdov added 6 commits August 13, 2018 13:02

Merge branch 'master' into feat/item-layout

80745c8

# Conflicts: # CHANGELOG.md # src/components/List/ListItem.tsx # src/themes/teams/components/List/listItemStyles.ts

-moved styling from ItemLayout to ListItem

b7f81db

-removed important prop from ItemLayout

-removed console logs

420db87

-removed unused variables from the list item variables

243e8e2

-removed some comments

cd848bb

-ensuring proper propagating of the styles

52bb357

Merge branch 'master' into feat/item-layout

b5b94a2

# Conflicts: # src/components/List/ListItem.tsx

levithomason approved these changes Aug 20, 2018

View reviewed changes

levithomason merged commit bf5313b into master Aug 20, 2018

levithomason deleted the feat/item-layout branch August 20, 2018 22:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ItemLayout): added ItemLayout component #60

feat(ItemLayout): added ItemLayout component #60

mnajdova commented Aug 8, 2018 •

edited

codecov bot commented Aug 8, 2018 •

edited

levithomason Aug 8, 2018

mnajdova Aug 9, 2018

levithomason Aug 8, 2018 •

edited

levithomason commented Aug 9, 2018

levithomason Aug 9, 2018

levithomason Aug 9, 2018

levithomason Aug 9, 2018 •

edited

levithomason Aug 9, 2018

levithomason left a comment

feat(ItemLayout): added ItemLayout component #60

feat(ItemLayout): added ItemLayout component #60

Conversation

mnajdova commented Aug 8, 2018 • edited

ItemLayout

TODO

API Proposal

content: PropTypes.any

contentMedia: PropTypes.any

header: PropTypes.any

headerMedia: PropTypes.any

media: PropTypes.any

endMedia: PropTypes.any

renderContentArea: PropTypes.any

renderHeaderArea: PropTypes.any

renderMainArea: PropTypes.any

important: PropTypes.bool

truncateContent: PropTypes.bool

truncateHeader: PropTypes.bool

debug: PropTypes.bool

Usage example

Jsx code:

Result:

codecov bot commented Aug 8, 2018 • edited

Codecov Report

levithomason Aug 8, 2018

Choose a reason for hiding this comment

mnajdova Aug 9, 2018

Choose a reason for hiding this comment

levithomason Aug 8, 2018 • edited

Choose a reason for hiding this comment

levithomason commented Aug 9, 2018

levithomason Aug 9, 2018

Choose a reason for hiding this comment

levithomason Aug 9, 2018

Choose a reason for hiding this comment

levithomason Aug 9, 2018 • edited

Choose a reason for hiding this comment

levithomason Aug 9, 2018

Choose a reason for hiding this comment

levithomason left a comment

Choose a reason for hiding this comment

mnajdova commented Aug 8, 2018 •

edited

codecov bot commented Aug 8, 2018 •

edited

levithomason Aug 8, 2018 •

edited

levithomason Aug 9, 2018 •

edited