Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 306ca3b

Browse files
layershifterlayershifter
committed
Merge branches 'feat/ref-forward' and 'master' of https://github.com/stardust-ui/react into feat/ref-forward
# Conflicts: # CHANGELOG.md
2 parents bb93b77 + eb583a7 commit 306ca3b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1640
-82
lines changed

‎.circleci/config.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@ jobs:
5555
- run:
5656
name: Project Tests
5757
command: yarn test:projects:cra-ts
58+
- run:
59+
name: Danger JS
60+
command: |
61+
if [ ! -z $CIRCLE_PULL_REQUEST ] && [ ! -z $DANGER_GITHUB_API_TOKEN ]; then
62+
yarn danger ci
63+
fi
5864
- run:
5965
name: Publish npm package
6066
command: |

‎CHANGELOG.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,25 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
2020
### Features
2121
- `Ref` components uses `forwardRef` API by default @layershifter ([#491](https://github.com/stardust-ui/react/pull/491))
2222

23+
<!--------------------------------[ v0.12.1 ]------------------------------- -->
24+
## [v0.12.1](https://github.com/stardust-ui/react/tree/v0.12.1) (2018-11-26)
25+
[Compare changes](https://github.com/stardust-ui/react/compare/v0.12.0...v0.12.1)
26+
27+
### Features
28+
- Add `createComponent` function in the public API @mnajdova ([#503](https://github.com/stardust-ui/react/pull/503))
29+
- Apply `dir=auto` attribute to string content of `Text` @kuzhelov ([#5](https://github.com/stardust-ui/react/pull/5))
30+
- Improve `Menu` accessibility behaviors @sophieH29 ([#523](https://github.com/stardust-ui/react/pull/523))
31+
- Add ability to style every slot of `Chat.Message` and remove dependency on `Layout` component @Bugaa92 ([#518](https://github.com/stardust-ui/react/pull/518))
32+
2333
### Fixes
2434
- Fix the behaviour of `AutoControlledComponent` when `undefined` is passed as a prop value @layershifter ([#499](https://github.com/stardust-ui/react/pull/499))
2535

36+
### Features
37+
- Stop event propagation when press Escape on the popup @sophieH29 ([#515](https://github.com/stardust-ui/react/pull/515))
38+
39+
### Documentation
40+
- Add `Integrate Custom Components` guide page in the docs @mnajdova ([#517](https://github.com/stardust-ui/react/pull/517))
41+
2642
<!--------------------------------[ v0.12.0 ]------------------------------- -->
2743
## [v0.12.0](https://github.com/stardust-ui/react/tree/v0.12.0) (2018-11-19)
2844
[Compare changes](https://github.com/stardust-ui/react/compare/v0.11.0...v0.12.0)
@@ -44,6 +60,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
4460
- Fix styles as functions in shorthands are not applied @mnajdova ([#470](https://github.com/stardust-ui/react/pull/470))
4561
- Add `lodash` typings and fix compilation errors @Bugaa92 ([#438](https://github.com/stardust-ui/react/pull/438))
4662
- Remove unsafe `listRef` from `List` API @kuzhelov ([#489](https://github.com/stardust-ui/react/pull/489))
63+
- Fix Popup trigger's props are not passed in onClick handler @sophieH29 ([#521](https://github.com/stardust-ui/react/pull/521))
4764

4865
### Features
4966
- Make `Grid` keyboard navigable by implementing `gridBehavior` @sophieH29 ([#398](https://github.com/stardust-ui/react/pull/398))

‎dangerfile.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { danger, warn } from 'danger'
2+
3+
// Check for a CHANGELOG entry
4+
const hasChangelog = danger.git.modified_files.some(f => f === 'CHANGELOG.md')
5+
6+
if (!hasChangelog) {
7+
warn(
8+
'There are no updates provided to CHANGELOG. Ensure there are no publicly visible changes introduced by this PR.',
9+
)
10+
}

‎docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ class ComponentSidebar extends React.Component<any, any> {
4444
return (
4545
<Sticky context={examplesRef} offset={15}>
4646
<Menu as={Accordion} fluid style={sidebarStyle} text vertical>
47-
{_.map(sections, ({ examples, sectionName }) => (
47+
{_.map(sections, ({ examples, sectionName }, index) => (
4848
<ComponentSidebarSection
4949
activePath={activePath}
5050
examples={examples}
51-
key={sectionName}
51+
key={`${sectionName}-${index}`}
5252
sectionName={sectionName}
5353
onItemClick={onItemClick}
5454
/>

‎docs/src/components/Sidebar/Sidebar.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,14 @@ class Sidebar extends React.Component<any, any> {
245245
<Menu.Item as={NavLink} exact to="/theming-examples" activeClassName="active">
246246
Theming Examples
247247
</Menu.Item>
248+
<Menu.Item
249+
as={NavLink}
250+
exact
251+
to="/integrate-custom-components"
252+
activeClassName="active"
253+
>
254+
Integrate Custom Components
255+
</Menu.Item>
248256
</Menu.Menu>
249257
</Menu.Item>
250258
{process.env.NODE_ENV !== 'production' && (
@@ -286,6 +294,9 @@ class Sidebar extends React.Component<any, any> {
286294
>
287295
Search Page
288296
</Menu.Item>
297+
<Menu.Item as={NavLink} exact to="/prototype-popups" activeClassName="active">
298+
Popups
299+
</Menu.Item>
289300
</Menu.Menu>
290301
</Menu.Item>
291302
)}

‎docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const items = [
1111
content: (
1212
<Chat.Message content="Hello" author="John Doe" timestamp="Yesterday, 10:15 PM" mine />
1313
),
14+
key: 'message-id-1',
1415
},
1516
{
1617
content: (
@@ -21,6 +22,7 @@ const items = [
2122
avatar={janeAvatar}
2223
/>
2324
),
25+
key: 'message-id-2',
2426
},
2527
{
2628
content: (
@@ -31,6 +33,7 @@ const items = [
3133
mine
3234
/>
3335
),
36+
key: 'message-id-3',
3437
},
3538
{
3639
content: (
@@ -41,9 +44,11 @@ const items = [
4144
avatar={janeAvatar}
4245
/>
4346
),
47+
key: 'message-id-4',
4448
},
4549
{
4650
content: <Divider content="Today" type="primary" important />,
51+
key: 'message-id-5',
4752
},
4853
{
4954
content: (
@@ -54,6 +59,7 @@ const items = [
5459
mine
5560
/>
5661
),
62+
key: 'message-id-6',
5763
},
5864
]
5965

‎docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from 'react'
2+
import { Chat, Provider } from '@stardust-ui/react'
3+
4+
const janeAvatar = {
5+
image: 'public/images/avatar/small/ade.jpg',
6+
status: { color: 'green', icon: 'check' },
7+
}
8+
9+
const content = (
10+
<div>
11+
Sure! Try one of these places:<br />
12+
<a href="#">www.goodFood1.com</a>,<br />
13+
<a href="#">www.goodFood2.com</a> or<br />
14+
<a href="#">www.goodFood3.com</a>
15+
</div>
16+
)
17+
18+
const slotLabelStyles: any = (label, beforeStyles) => ({
19+
position: 'relative',
20+
border: '1px solid #000',
21+
padding: '12px',
22+
':before': {
23+
content: `'${label}'`,
24+
position: 'absolute',
25+
background: '#000',
26+
paddingBottom: '2px',
27+
bottom: '-1px',
28+
right: '-1px',
29+
color: 'white',
30+
fontSize: '11px',
31+
letterSpacing: '0.1px',
32+
lineHeight: '9px',
33+
...beforeStyles,
34+
},
35+
})
36+
37+
const ChatMessageExampleStyled = () => (
38+
<Provider
39+
theme={{
40+
componentStyles: {
41+
ChatMessage: {
42+
root: { ...slotLabelStyles('root'), backgroundColor: '#2E8B57' },
43+
avatar: {
44+
...slotLabelStyles('avatar', { bottom: '-11px' }),
45+
backgroundColor: '#FF00FF',
46+
padding: 0,
47+
},
48+
messageBody: { ...slotLabelStyles('messageBody'), backgroundColor: '#87CEFA' },
49+
author: { ...slotLabelStyles('author'), backgroundColor: '#E0FFFF' },
50+
content: { ...slotLabelStyles('content'), backgroundColor: '#F08080' },
51+
timestamp: { ...slotLabelStyles('timestamp'), backgroundColor: '#FFFFE0' },
52+
},
53+
},
54+
componentVariables: {
55+
ChatMessage: siteVars => ({
56+
messageBody: {
57+
focusOutlineColor: siteVars.white,
58+
},
59+
}),
60+
},
61+
}}
62+
>
63+
<Chat
64+
items={[
65+
{
66+
content: (
67+
<Chat.Message
68+
content="Hey, do you know any restaurants with good food?"
69+
author="John Doe"
70+
timestamp="Yesterday, 10:15 PM"
71+
mine
72+
/>
73+
),
74+
key: 'message-id-1',
75+
},
76+
{
77+
key: 'message-id-2',
78+
content: (
79+
<Chat.Message
80+
content={{ content }}
81+
author="Jane Doe"
82+
timestamp="Yesterday, 10:15 PM"
83+
avatar={janeAvatar}
84+
/>
85+
),
86+
},
87+
]}
88+
/>
89+
</Provider>
90+
)
91+
92+
export default ChatMessageExampleStyled

‎docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react'
2+
import { Chat, Provider } from '@stardust-ui/react'
3+
4+
const janeAvatar = {
5+
image: 'public/images/avatar/small/ade.jpg',
6+
status: { color: 'green', icon: 'check' },
7+
}
8+
9+
const content = (
10+
<div>
11+
Sure! Try one of these places:<br />
12+
<a href="#">www.goodFood1.com</a>,<br />
13+
<a href="#">www.goodFood2.com</a> or<br />
14+
<a href="#">www.goodFood3.com</a>
15+
</div>
16+
)
17+
18+
const slotLabelStyles: any = (label, beforeStyles) => ({
19+
position: 'relative',
20+
border: '1px solid #000',
21+
padding: '12px',
22+
':before': {
23+
content: `'${label}'`,
24+
position: 'absolute',
25+
background: '#000',
26+
paddingBottom: '2px',
27+
bottom: '-1px',
28+
right: '-1px',
29+
color: 'white',
30+
fontSize: '11px',
31+
letterSpacing: '0.1px',
32+
lineHeight: '9px',
33+
...beforeStyles,
34+
},
35+
})
36+
37+
const ChatMessageExampleStyled = () => (
38+
<Provider
39+
theme={{
40+
componentStyles: {
41+
ChatMessage: {
42+
root: { ...slotLabelStyles('root'), backgroundColor: '#2E8B57' },
43+
avatar: {
44+
...slotLabelStyles('avatar', { bottom: '-11px' }),
45+
backgroundColor: '#FF00FF',
46+
padding: 0,
47+
},
48+
messageBody: { ...slotLabelStyles('messageBody'), backgroundColor: '#87CEFA' },
49+
author: { ...slotLabelStyles('author'), backgroundColor: '#E0FFFF' },
50+
content: { ...slotLabelStyles('content'), backgroundColor: '#F08080' },
51+
timestamp: { ...slotLabelStyles('timestamp'), backgroundColor: '#FFFFE0' },
52+
},
53+
},
54+
componentVariables: {
55+
ChatMessage: siteVars => ({
56+
messageBody: {
57+
focusOutlineColor: siteVars.white,
58+
},
59+
}),
60+
},
61+
}}
62+
>
63+
<Chat>
64+
<Chat.Item>
65+
<Chat.Message
66+
content="Hey, do you know any restaurants with good food?"
67+
author="John Doe"
68+
timestamp="Yesterday, 10:15 PM"
69+
mine
70+
/>
71+
</Chat.Item>
72+
<Chat.Item>
73+
<Chat.Message
74+
content={{ content }}
75+
author="Jane Doe"
76+
timestamp="Yesterday, 10:15 PM"
77+
avatar={janeAvatar}
78+
/>
79+
</Chat.Item>
80+
</Chat>
81+
</Provider>
82+
)
83+
84+
export default ChatMessageExampleStyled

‎docs/src/examples/components/Chat/Types/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ const Types = () => (
99
description="A default Chat."
1010
examplePath="components/Chat/Types/ChatExample"
1111
/>
12+
<ComponentExample
13+
title="Styled Chat Item"
14+
description="A Chat item with custom styles for every slot."
15+
examplePath="components/Chat/Types/ChatMessageExampleStyled"
16+
/>
1217
</ExampleSection>
1318
)
1419

‎docs/src/prototypes/chatPane/services/dataMock.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ class ChatMock {
6666
timestamp: timestamp.short,
6767
timestampLong: timestamp.long,
6868
isImportant: random.boolean(),
69+
withAttachment: random.boolean(),
6970
}
7071

7172
return message

0 commit comments

Comments
 (0)