Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Divider): add divider component #3125

Merged
merged 12 commits into from Oct 22, 2019
Merged

Conversation

@christiemolloy
Copy link
Member

christiemolloy commented Oct 11, 2019

closes #2575

@patternfly-build

This comment has been minimized.

Copy link
Contributor

patternfly-build commented Oct 11, 2019

PatternFly-React preview: https://patternfly-react-pr-3125.surge.sh

/** Adds a role to the divider for accessibility */
'role'?: string;
/** the component type to use */
variant?: 'hr' | 'li' | 'div' ;

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

Can you call the prop component to be consistent with other components in the library

This comment has been minimized.

Copy link
@christiemolloy

christiemolloy Oct 11, 2019

Author Member

could you explain what you mean here :)

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

Our other components name the prop 'component' rather than variant when we want to change the html tag.

This comment has been minimized.

Copy link
@christiemolloy

christiemolloy Oct 14, 2019

Author Member

thanks updated

/** additional classes added to the Badge */
className?: string;
/** Adds a role to the divider for accessibility */
'role'?: string;

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

no need for a role prop. Looks like it should be set to separator for div or li . We should do that conditionally in in the component when the 'component prop is not an hr.

const Component: any = variant;

return (
<Component {...props} className={css(styles.divider, className)} role={role}/>

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

Can you spread props at the end here so they take precedence.

<Divider/>

<ul>
<li>List item one</li>

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

after you update the component you can update these to remove the role='separator'

yarn.lock Outdated
@@ -2503,6 +2503,7 @@
"@patternfly/patternfly@2.33.8":
version "2.33.8"
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-2.33.8.tgz#2885847b4c49d8606abed17a0415da24fec222aa"
integrity sha512-tkT1GrdIyvGiDvNHATOa7XLMLKdztpra8ngS8qhCcEWBKh9MWNj5ysjOrkna32bSF9GEkR4TFX492W8ESTHWvQ==

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

Can you revert the changes in this file. It should not have been updated with the changes you made.

@tlabaj tlabaj self-assigned this Oct 11, 2019
@codecov-io

This comment has been minimized.

Copy link

codecov-io commented Oct 11, 2019

Codecov Report

Merging #3125 into master will increase coverage by 0.01%.
The diff coverage is 92.85%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3125      +/-   ##
==========================================
+ Coverage   69.02%   69.04%   +0.01%     
==========================================
  Files         858      859       +1     
  Lines       23535    23549      +14     
  Branches     1877     1880       +3     
==========================================
+ Hits        16246    16259      +13     
  Misses       6336     6336              
- Partials      953      954       +1
Flag Coverage Δ
#misc 95.45% <ø> (ø) ⬆️
#patternfly3 69.23% <ø> (ø) ⬆️
#patternfly4 68.14% <92.85%> (+0.03%) ⬆️
Impacted Files Coverage Δ
...re/src/experimental/components/Divider/Divider.tsx 92.85% <92.85%> (ø)

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 8dcfb49...a25e8d1. Read the comment docs.

DividerLi = (
<ul>
<li>List item one</li>
<Divider variant="li" role="separator"/>

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

you can remove role="seperator"

import { Divider } from '@patternfly/react-core/dist/esm/experimental';
DividerLi = (
<Divider variant="div" role="separator"/>

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

you can remove role="seperator"

/** Adds a role to the divider for accessibility */
'role'?: string;
/** the component type to use */
variant?: 'hr' | 'li' | 'div' ;

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

Our other components name the prop 'component' rather than variant when we want to change the html tag.

const Component: any = variant;

return (
<Component className={css(styles.divider, className)} role={ variant!='hr' ? 'separator' : undefined } {...props}/>

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 11, 2019

Contributor

I think you want to do something like this instead.

Suggested change
<Component className={css(styles.divider, className)} role={ variant!='hr' ? 'separator' : undefined } {...props}/>
<Component className={css(styles.divider, className)} {...(variant != 'hr' && {role : 'seperator' })} {...props}/>

This comment has been minimized.

Copy link
@christiemolloy

christiemolloy Oct 14, 2019

Author Member

That makes sense thank you @tlabaj !

Copy link
Contributor

tlabaj left a comment

Looking great Christie. A few more small comments.

import React from 'react';
import { Divider } from '@patternfly/react-core/dist/esm/experimental';
DividerHr = (

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 14, 2019

Contributor

Did you mean for this to be a function? e.g.

Suggested change
DividerHr = (
DividerHr = () => (

same comment for other examples.

}

export interface DividerProps extends React.HTMLProps<HTMLElement> {
/** additional classes added to the Badge */

This comment has been minimized.

Copy link
@tlabaj

tlabaj Oct 14, 2019

Contributor

Can you change the prop descriptions to Sentence case.

Copy link
Contributor

tlabaj left a comment

LGTM

const Component: any = component;

return (
<Component className={css(styles.divider, className)} {...(component != 'hr' && {role : 'seperator' })} {...props} />

This comment has been minimized.

Copy link
@mcoker

mcoker Oct 21, 2019

Contributor
Suggested change
<Component className={css(styles.divider, className)} {...(component != 'hr' && {role : 'seperator' })} {...props} />
<Component className={css(styles.divider, className)} {...(component != 'hr' && {role : 'separator' })} {...props} />
exports[`divider using div 1`] = `
<div
className="pf-c-divider"
role="seperator"

This comment has been minimized.

Copy link
@mcoker

mcoker Oct 21, 2019

Contributor
Suggested change
role="seperator"
role="separator"
exports[`divider using li 1`] = `
<li
className="pf-c-divider"
role="seperator"

This comment has been minimized.

Copy link
@mcoker

mcoker Oct 21, 2019

Contributor
Suggested change
role="seperator"
role="separator"
@mcoker
mcoker approved these changes Oct 21, 2019
Copy link
Contributor

mcoker left a comment

😀👍

@tlabaj
tlabaj approved these changes Oct 22, 2019
Copy link
Contributor

tlabaj left a comment

LGTM

@tlabaj tlabaj merged commit 92971d3 into patternfly:master Oct 22, 2019
8 checks passed
8 checks passed
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: build_integration Your tests passed on CircleCI!
Details
ci/circleci: build_pf3_docs Your tests passed on CircleCI!
Details
ci/circleci: build_pf4_docs Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: test_jest_other Your tests passed on CircleCI!
Details
ci/circleci: test_jest_pf4 Your tests passed on CircleCI!
Details
ci/circleci: upload_docs Your tests passed on CircleCI!
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.