Skip to content

Commit 500df9a

Browse files
layershifterlevithomason
layershifter
authored and
levithomason
committed
BREAKING(package): update SUI to 2.3 (#2657)
* chore(package): update SUI to 2.3 * feat(Dimmer): update SUI to 2.3, add verticalAlign (#2656) * feat(Transition): update SUI to 2.3, add `zoom` and `glow` (#2658) * feat(Icon): update SUI to 2.3 (#2665) * breaking(Modal): Fix vertical position with SUI 2.3 (#2690) * Update SUI css to 2.3.1 * Disable negative top margin calc * Add the ability to apply inline styles to Portal * Top Aligned modal example * Make sure we are not overriding the top margin inline * type defs updated for Portal * Type update for Modal * Refactor to use setProperty instead of string for important * Remove inline-style lib to handle string differently * chore(gulp): remove task with icons * feat(Icon): regenerate icons * docs(Usage): add warning about SUIR versions * docs(README): remove note * fix lint error * fix(iconSearch): dedupe merged name sets
1 parent b298d59 commit 500df9a

36 files changed

+4970
-863
lines changed

‎README.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
⚠️NOTE: Currently Semantic UI React is not yet compatible with the latest 2.3 version of Semantic UI styles. See [#2250](https://github.com/Semantic-Org/Semantic-UI-React/issues/2550) for more info.
2-
31
<!-- Logo -->
42
<p align="center">
53
<a href="https://react.semantic-ui.com">

‎docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,8 @@ class ComponentExample extends PureComponent {
238238
// which can be rendered in this ComponentExample's render() method
239239

240240
// rewrite imports to const statements against the UPPERCASE module names
241-
const imports = _.get(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '')
241+
const imports = _
242+
.get(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '')
242243
.replace(/[\s\n]+/g, ' ') // normalize spaces and make one line
243244
.replace(/ import/g, '\nimport') // one import per line
244245
.split('\n') // split lines
@@ -276,11 +277,8 @@ class ComponentExample extends PureComponent {
276277
'[1]',
277278
)
278279

279-
const body = _.get(
280-
/(export\sdefault\sclass|const|class\s\S*\sextends)[\s\S]*/.exec(sourceCode),
281-
'[0]',
282-
'',
283-
)
280+
const body = _
281+
.get(/(export\sdefault\sclass|const|class\s\S*\sextends)[\s\S]*/.exec(sourceCode), '[0]', '')
284282
.replace(/export\s+default\s+(?!class|function)\w+([\s\n]+)?/, '') // remove `export default Foo` statements
285283
.replace(/export\s+default\s+/, '') // remove `export default ...`
286284

‎docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,11 @@ const ComponentPropsComponents = ({
1919
<Menu.Item
2020
key={displayName}
2121
active={activeDisplayName === displayName}
22-
content={displayName === parentDisplayName
23-
? displayName
24-
: displayName.replace(parentDisplayName, `${parentDisplayName}.`)}
22+
content={
23+
displayName === parentDisplayName
24+
? displayName
25+
: displayName.replace(parentDisplayName, `${parentDisplayName}.`)
26+
}
2527
name={displayName}
2628
onClick={onItemClick}
2729
/>

‎docs/app/Components/IconSearch/IconSearch.js

+109-63
Original file line numberDiff line numberDiff line change
@@ -4,45 +4,81 @@ import leven from 'leven'
44
import React, { Component } from 'react'
55

66
import { SUI } from 'src/lib'
7-
import {
8-
Form,
9-
Grid,
10-
Header,
11-
Icon,
12-
Message,
13-
Popup,
14-
} from 'src'
7+
import { Form, Grid, Header, Icon, Message, Popup } from 'src'
158

169
const gridStyle = {
1710
background: '#fff',
1811
}
1912

2013
const iconKeyToHeaderMap = {
21-
WEB_CONTENT_ICONS: 'Web Content',
22-
USER_ACTIONS_ICONS: 'User Actions',
23-
MESSAGES_ICONS: 'Messages',
24-
USERS_ICONS: 'Users',
25-
GENDER_SEXUALITY_ICONS: 'Gender & Sexuality',
26-
ACCESSIBILITY_ICONS: 'Accessibility',
27-
VIEW_ADJUSTMENT_ICONS: 'View Adjustment',
28-
LITERAL_OBJECTS_ICONS: 'Literal Objects',
29-
SHAPES_ICONS: 'Shapes',
30-
ITEM_SELECTION_ICONS: 'Item Selection',
31-
MEDIA_ICONS: 'Media',
32-
POINTERS_ICONS: 'Pointers',
33-
MOBILE_ICONS: 'Mobile',
34-
COMPUTER_ICONS: 'Computer',
35-
FILE_SYSTEM_ICONS: 'File System',
36-
TECHNOLOGIES_ICONS: 'Technologies',
37-
RATING_ICONS: 'Rating',
38-
AUDIO_ICONS: 'Audio',
39-
MAP_LOCATIONS_TRANSPORTATION_ICONS: 'Map, Locations & Transportation',
40-
TABLES_ICONS: 'Tables',
41-
TEXT_EDITOR_ICONS: 'Text Editor',
42-
CURRENCY_ICONS: 'Currency',
43-
PAYMENT_OPTIONS_ICONS: 'Payment Options',
44-
NETWORKS_AND_WEBSITE_ICONS: 'Networks And Website',
45-
ICON_ALIASES: 'Icon Aliases',
14+
ACCESSIBILITY: {
15+
title: 'Accessibility',
16+
description: 'Icons can represent accessibility standards',
17+
},
18+
ARROWS: { title: 'Arrows', description: 'Icons can be used to indicate a direction' },
19+
AUDIO_VIDEO: {
20+
title: 'Audio & Video',
21+
description: 'Icons can be used to represent common ways to interact with audio and video',
22+
},
23+
BUSINESS: {
24+
title: 'Business',
25+
description: 'Icons can be used to represent business and common business actions',
26+
},
27+
CHESS: { title: 'Chess', description: 'Icons which represent the game chess' },
28+
CODE: { title: 'Code', description: 'Icons can represent programming and programming tools' },
29+
COMMUNICATION: {
30+
title: 'Communication',
31+
description: 'Icons which represent common ways of communication',
32+
},
33+
COMPUTERS: {
34+
title: 'Computers',
35+
description: 'Icons can represent computing devices, or types of content found on a computer',
36+
},
37+
CURRENCY: { title: 'Currency', description: 'Icons can represent units of currency' },
38+
DATE_TIME: {
39+
title: 'Date & Time',
40+
description: 'Icons that represent common ways of showing date and time',
41+
},
42+
DESIGN: {
43+
title: 'Design',
44+
description: 'Icons can represent common design related symbols or techniques',
45+
},
46+
EDITORS: {
47+
title: 'Editors',
48+
description: 'Icons can represent text editors and common editor actions',
49+
},
50+
FILES: {
51+
title: 'Files',
52+
description: 'Icons can represent elements of a computer and its file system',
53+
},
54+
GENDERS: { title: 'Genders', description: 'Icons can represent genders or types of sexuality' },
55+
HANDS_GESTURES: {
56+
title: 'Hands & Gestures',
57+
description: 'Icons can represent hand signals and gestures',
58+
},
59+
HEALTH: { title: 'Health', description: 'Icons which represent common health symbols' },
60+
IMAGES: { title: 'Images', description: 'Icons that represent common image symbols and actions' },
61+
INTERFACES: {
62+
title: 'Interfaces',
63+
description: 'Icons can represent common actions a user can take or use',
64+
},
65+
LOGISTICS: { title: 'Logistics', description: 'Icons can represent common logistic activity' },
66+
MAPS: { title: 'Maps', description: 'Icons can be used to represent elements on a map' },
67+
MEDICAL: { title: 'Medical', description: 'Icons can represent common medical actions' },
68+
OBJECTS: { title: 'Objects', description: 'Icons can be used to represent common objects' },
69+
PAYMENTS_SHOPPING: {
70+
title: 'Payments & Shopping',
71+
description: 'Icons can represent common forms of payment and shopping actions',
72+
},
73+
SHAPES: { title: 'Shapes', description: 'Icons can be used to create shapes' },
74+
SPINNERS: { title: 'Spinners', description: 'Icons can represent loading' },
75+
SPORTS: { title: 'Sports', description: 'Icons which represent sports' },
76+
STATUS: { title: 'Status', description: 'Icons can represent different states' },
77+
USERS_PEOPLE: { title: 'Users & People', description: 'Icons can represent users or people' },
78+
VEHICLES: { title: 'Vehicles', description: 'Icons can represent vehicles or transport' },
79+
WRITING: { title: 'Writing', description: 'Icons can represent writing and editing' },
80+
BRANDS: { title: 'Brands', description: 'Icons can represent logos to common brands' },
81+
ICON_ALIASES: { title: 'Icon Aliases', description: 'Some of icons have usefull aliases.' },
4682
}
4783

4884
const similarityScore = (strA, strB) => {
@@ -73,9 +109,9 @@ export default class IconSearch extends Component {
73109
setTimeout(() => this.setState({ copied: false }), 1000)
74110
}
75111

76-
renderIconColumn = name => (
112+
renderIconColumn = (name, section) => (
77113
<Popup
78-
key={name}
114+
key={[name, section].filter(Boolean).join('_')}
79115
mouseEnterDelay={1000}
80116
inverted
81117
closeOnTriggerClick={false}
@@ -85,12 +121,12 @@ export default class IconSearch extends Component {
85121
size='mini'
86122
position='top center'
87123
content={this.state.copied ? 'Copied!' : 'Click to copy'}
88-
trigger={(
124+
trigger={
89125
<Grid.Column className='docs-icon-set-column' onClick={this.copy(name)}>
90126
<Icon name={name} size='big' />
91127
<p className='name'>{name}</p>
92128
</Grid.Column>
93-
)}
129+
}
94130
/>
95131
)
96132

@@ -104,24 +140,26 @@ export default class IconSearch extends Component {
104140
return iconKeys.map(iconKey => (
105141
<Grid key={iconKey} columns={5} doubling>
106142
<Grid.Column width={16}>
107-
<Header as='h3' textAlign='left' dividing>
108-
{iconKeyToHeaderMap[iconKey]}
109-
</Header>
143+
<Header
144+
as='h3'
145+
content={iconKeyToHeaderMap[iconKey].title}
146+
dividing
147+
subheader={iconKeyToHeaderMap[iconKey].description}
148+
textAlign='left'
149+
/>
110150
</Grid.Column>
111-
{SUI[iconKey].map(this.renderIconColumn)}
151+
{SUI[iconKey].map(name => this.renderIconColumn(name, iconKey))}
112152
</Grid>
113153
))
114154
}
115155

116-
const iconSearchMatches = SUI.ICONS_AND_ALIASES
117-
.filter((name) => {
118-
// contains
119-
if (name.indexOf(query) !== -1) return true
156+
const iconSearchMatches = SUI.ICONS_AND_ALIASES.filter((name) => {
157+
// contains
158+
if (name.indexOf(query) !== -1) return true
120159

121-
// similar
122-
return includeSimilar && similarityScore(name, query) <= 2
123-
})
124-
.map(this.renderIconColumn)
160+
// similar
161+
return includeSimilar && similarityScore(name, query) <= 2
162+
}).map(name => this.renderIconColumn(name))
125163

126164
// no results
127165
if (iconSearchMatches.length === 0) {
@@ -131,7 +169,9 @@ export default class IconSearch extends Component {
131169
<Message
132170
info
133171
icon='search'
134-
content={`There is no icon name or alias ${includeSimilar ? 'similar' : 'that contains'} to "${query}".`}
172+
content={`There is no icon name or alias ${
173+
includeSimilar ? 'similar' : 'that contains'
174+
} to "${query}".`}
135175
header='No Results'
136176
/>
137177
</Grid.Column>
@@ -140,7 +180,11 @@ export default class IconSearch extends Component {
140180
}
141181

142182
// results
143-
return <Grid columns={5} doubling>{iconSearchMatches}</Grid>
183+
return (
184+
<Grid columns={5} doubling>
185+
{iconSearchMatches}
186+
</Grid>
187+
)
144188
}
145189

146190
render() {
@@ -151,14 +195,6 @@ export default class IconSearch extends Component {
151195
<Header as='h2'>Icon Set</Header>
152196
<p>An icon set contains an arbitrary number of glyphs.</p>
153197

154-
<Message>
155-
Semantic includes a complete port of{' '}
156-
<a href='http://fontawesome.io/whats-new/' rel='noopener noreferrer' target='_blank'>Font Awesome 4.7.0</a>
157-
{' '}designed by{' '}
158-
<a href='http://www.twitter.com/davegandy' rel='noopener noreferrer'>Dave Gandy</a> for its standard icon
159-
set.
160-
</Message>
161-
162198
<Form>
163199
<Form.Group inline>
164200
<Form.Input
@@ -169,16 +205,26 @@ export default class IconSearch extends Component {
169205
/>
170206
<Form.Checkbox
171207
toggle
172-
label='Show similar'
208+
label='Show similar names'
173209
checked={includeSimilar}
174210
onChange={this.handleIncludeSimilarChange}
175211
/>
176212
</Form.Group>
177213
</Form>
214+
215+
<Message>
216+
Semantic includes a complete port of{' '}
217+
<a href='https://fontawesome.com/' rel='noopener noreferrer' target='_blank'>
218+
Font Awesome 5.0.8
219+
</a>{' '}
220+
designed by the{' '}
221+
<a href='https://twitter.com/fontawesome' rel='noopener noreferrer'>
222+
FontAwesome
223+
</a>{' '}
224+
for its standard icon set.
225+
</Message>
178226
</Grid.Column>
179-
<Grid.Column textAlign='center'>
180-
{this.renderIcons()}
181-
</Grid.Column>
227+
<Grid.Column textAlign='center'>{this.renderIcons()}</Grid.Column>
182228
</Grid>
183229
)
184230
}

‎docs/app/Components/Sidebar/Sidebar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ class Sidebar extends Component {
197197
target='_blank'
198198
rel='noopener noreferrer'
199199
>
200-
<Icon name='file text outline' /> CHANGELOG
200+
<Icon name='file alternate outline' /> CHANGELOG
201201
</Menu.Item>
202202
</Menu.Menu>
203203
</Menu.Item>

‎docs/app/Examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const transitions = [
1010
'scale',
1111
'slide up', 'slide down', 'slide left', 'slide right',
1212
'swing up', 'swing down', 'swing left', 'swing right',
13+
'zoom',
1314
]
1415
const options = transitions.map(name => ({ key: name, text: name, value: name }))
1516

‎docs/app/Examples/modules/Dimmer/Types/DimmerExampleContent.js

+7-9
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,20 @@ export default class DimmerExampleDimmer extends Component {
1313
return (
1414
<div>
1515
<Dimmer.Dimmable as={Segment} dimmed={active}>
16-
<Dimmer active={active} onClickOutside={this.handleHide}>
17-
<Header as='h2' icon inverted>
18-
<Icon name='heart' />
19-
Dimmed Message!
20-
</Header>
21-
</Dimmer>
22-
2316
<Header as='h3'>Overlayable Section</Header>
24-
2517
<Image.Group size='small' className='ui small images'>
2618
<Image src='/assets/images/wireframe/image.png' />
2719
<Image src='/assets/images/wireframe/image.png' />
2820
<Image src='/assets/images/wireframe/image.png' />
2921
</Image.Group>
30-
3122
<Image size='medium' src='/assets/images/wireframe/media-paragraph.png' />
23+
24+
<Dimmer active={active} onClickOutside={this.handleHide}>
25+
<Header as='h2' icon inverted>
26+
<Icon name='heart' />
27+
Dimmed Message!
28+
</Header>
29+
</Dimmer>
3230
</Dimmer.Dimmable>
3331

3432
<Button.Group>

‎docs/app/Examples/modules/Dimmer/Types/DimmerExampleDimmer.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,15 @@ export default class DimmerExampleDimmer extends Component {
1313
return (
1414
<div>
1515
<Dimmer.Dimmable as={Segment} dimmed={active}>
16-
<Dimmer active={active} onClickOutside={this.handleHide} />
17-
1816
<Header as='h3'>Overlayable Section</Header>
19-
2017
<Image.Group size='small' className='ui small images'>
2118
<Image src='/assets/images/wireframe/image.png' />
2219
<Image src='/assets/images/wireframe/image.png' />
2320
<Image src='/assets/images/wireframe/image.png' />
2421
</Image.Group>
25-
2622
<Image size='medium' src='/assets/images/wireframe/media-paragraph.png' />
23+
24+
<Dimmer active={active} onClickOutside={this.handleHide} />
2725
</Dimmer.Dimmable>
2826

2927
<Button.Group>

0 commit comments

Comments
 (0)