diff --git a/docs/app/Examples/views/Comment/Variations/CommentExampleGroupSize.js b/docs/app/Examples/views/Comment/Variations/CommentExampleGroupSize.js new file mode 100644 index 0000000000..6378ddc899 --- /dev/null +++ b/docs/app/Examples/views/Comment/Variations/CommentExampleGroupSize.js @@ -0,0 +1,129 @@ +import React from 'react' +import { Comment, Header } from 'semantic-ui-react' + +const CommentExampleGroupSize = () => ( +
+ +
Mini Comments
+ + + + + Matt + + Today at 5:42PM + + How artistic! + + Reply + + + + + + + Joe Henderson + + 5 days ago + + Dude, this is awesome. Thanks so much + + Reply + + + + + +
Small Comments
+ + + + + Matt + + Today at 5:42PM + + How artistic! + + Reply + + + + + + + Joe Henderson + + 5 days ago + + Dude, this is awesome. Thanks so much + + Reply + + + + + +
Large Comments
+ + + + + Matt + + Today at 5:42PM + + How artistic! + + Reply + + + + + + + Joe Henderson + + 5 days ago + + Dude, this is awesome. Thanks so much + + Reply + + + + + +
Massive Comments
+ + + + + Matt + + Today at 5:42PM + + How artistic! + + Reply + + + + + + + Joe Henderson + + 5 days ago + + Dude, this is awesome. Thanks so much + + Reply + + + + +
+) + +export default CommentExampleGroupSize diff --git a/docs/app/Examples/views/Comment/Variations/index.js b/docs/app/Examples/views/Comment/Variations/index.js index e0e3173931..0fb4ef9f36 100644 --- a/docs/app/Examples/views/Comment/Variations/index.js +++ b/docs/app/Examples/views/Comment/Variations/index.js @@ -15,6 +15,11 @@ const CommentVariations = () => ( description='Comments can hide extra information unless a user shows intent to interact with a comment.' examplePath='views/Comment/Variations/CommentExampleMinimal' /> + ) diff --git a/src/views/Comment/CommentGroup.js b/src/views/Comment/CommentGroup.js index e93e672035..7b797db219 100644 --- a/src/views/Comment/CommentGroup.js +++ b/src/views/Comment/CommentGroup.js @@ -1,4 +1,5 @@ import cx from 'classnames' +import _ from 'lodash' import React, { PropTypes } from 'react' import { @@ -6,6 +7,7 @@ import { getElementType, getUnhandledProps, META, + SUI, useKeyOnly, } from '../../lib' @@ -18,11 +20,13 @@ function CommentGroup(props) { children, collapsed, minimal, + size, threaded, } = props const classes = cx( 'ui', + size, useKeyOnly(collapsed, 'collapsed'), useKeyOnly(minimal, 'minimal'), useKeyOnly(threaded, 'threaded'), @@ -57,6 +61,9 @@ CommentGroup.propTypes = { /** Comments can hide extra information unless a user shows intent to interact with a comment. */ minimal: PropTypes.bool, + /** Comments can have different sizes. */ + size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')), + /** A comment list can be threaded to showing the relationship between conversations. */ threaded: PropTypes.bool, } diff --git a/src/views/Comment/index.d.ts b/src/views/Comment/index.d.ts index f49388f795..23112a2d31 100644 --- a/src/views/Comment/index.d.ts +++ b/src/views/Comment/index.d.ts @@ -125,6 +125,9 @@ interface CommentGroupProps { /** Comments can hide extra information unless a user shows intent to interact with a comment */ minimal?: boolean; + /** Comments can have different sizes. */ + size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive'; + /** A comment list can be threaded to showing the relationship between conversations */ threaded?: boolean; } diff --git a/test/specs/views/Comment/CommentGroup-test.js b/test/specs/views/Comment/CommentGroup-test.js index a2546a2496..601519f7f4 100644 --- a/test/specs/views/Comment/CommentGroup-test.js +++ b/test/specs/views/Comment/CommentGroup-test.js @@ -1,3 +1,6 @@ +import _ from 'lodash' + +import { SUI } from 'src/lib' import CommentGroup from 'src/views/Comment/CommentGroup' import * as common from 'test/specs/commonTests' @@ -8,4 +11,6 @@ describe('CommentGroup', () => { common.propKeyOnlyToClassName(CommentGroup, 'collapsed') common.propKeyOnlyToClassName(CommentGroup, 'minimal') common.propKeyOnlyToClassName(CommentGroup, 'threaded') + + common.propValueOnlyToClassName(CommentGroup, 'size', _.without(SUI.SIZES, 'medium')) })