diff --git a/README.md b/README.md index 213cce3146..1918c431a8 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -⚠️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. -

diff --git a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js index 33b5432f31..d9f6713a3f 100644 --- a/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js +++ b/docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js @@ -238,7 +238,8 @@ class ComponentExample extends PureComponent { // which can be rendered in this ComponentExample's render() method // rewrite imports to const statements against the UPPERCASE module names - const imports = _.get(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '') + const imports = _ + .get(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '') .replace(/[\s\n]+/g, ' ') // normalize spaces and make one line .replace(/ import/g, '\nimport') // one import per line .split('\n') // split lines @@ -276,11 +277,8 @@ class ComponentExample extends PureComponent { '[1]', ) - const body = _.get( - /(export\sdefault\sclass|const|class\s\S*\sextends)[\s\S]*/.exec(sourceCode), - '[0]', - '', - ) + const body = _ + .get(/(export\sdefault\sclass|const|class\s\S*\sextends)[\s\S]*/.exec(sourceCode), '[0]', '') .replace(/export\s+default\s+(?!class|function)\w+([\s\n]+)?/, '') // remove `export default Foo` statements .replace(/export\s+default\s+/, '') // remove `export default ...` diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js index ed56d3510d..09739408e6 100644 --- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js +++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentPropsComponents.js @@ -19,9 +19,11 @@ const ComponentPropsComponents = ({ diff --git a/docs/app/Components/IconSearch/IconSearch.js b/docs/app/Components/IconSearch/IconSearch.js index 6324ab1630..2e8bf5844a 100644 --- a/docs/app/Components/IconSearch/IconSearch.js +++ b/docs/app/Components/IconSearch/IconSearch.js @@ -4,45 +4,81 @@ import leven from 'leven' import React, { Component } from 'react' import { SUI } from 'src/lib' -import { - Form, - Grid, - Header, - Icon, - Message, - Popup, -} from 'src' +import { Form, Grid, Header, Icon, Message, Popup } from 'src' const gridStyle = { background: '#fff', } const iconKeyToHeaderMap = { - WEB_CONTENT_ICONS: 'Web Content', - USER_ACTIONS_ICONS: 'User Actions', - MESSAGES_ICONS: 'Messages', - USERS_ICONS: 'Users', - GENDER_SEXUALITY_ICONS: 'Gender & Sexuality', - ACCESSIBILITY_ICONS: 'Accessibility', - VIEW_ADJUSTMENT_ICONS: 'View Adjustment', - LITERAL_OBJECTS_ICONS: 'Literal Objects', - SHAPES_ICONS: 'Shapes', - ITEM_SELECTION_ICONS: 'Item Selection', - MEDIA_ICONS: 'Media', - POINTERS_ICONS: 'Pointers', - MOBILE_ICONS: 'Mobile', - COMPUTER_ICONS: 'Computer', - FILE_SYSTEM_ICONS: 'File System', - TECHNOLOGIES_ICONS: 'Technologies', - RATING_ICONS: 'Rating', - AUDIO_ICONS: 'Audio', - MAP_LOCATIONS_TRANSPORTATION_ICONS: 'Map, Locations & Transportation', - TABLES_ICONS: 'Tables', - TEXT_EDITOR_ICONS: 'Text Editor', - CURRENCY_ICONS: 'Currency', - PAYMENT_OPTIONS_ICONS: 'Payment Options', - NETWORKS_AND_WEBSITE_ICONS: 'Networks And Website', - ICON_ALIASES: 'Icon Aliases', + ACCESSIBILITY: { + title: 'Accessibility', + description: 'Icons can represent accessibility standards', + }, + ARROWS: { title: 'Arrows', description: 'Icons can be used to indicate a direction' }, + AUDIO_VIDEO: { + title: 'Audio & Video', + description: 'Icons can be used to represent common ways to interact with audio and video', + }, + BUSINESS: { + title: 'Business', + description: 'Icons can be used to represent business and common business actions', + }, + CHESS: { title: 'Chess', description: 'Icons which represent the game chess' }, + CODE: { title: 'Code', description: 'Icons can represent programming and programming tools' }, + COMMUNICATION: { + title: 'Communication', + description: 'Icons which represent common ways of communication', + }, + COMPUTERS: { + title: 'Computers', + description: 'Icons can represent computing devices, or types of content found on a computer', + }, + CURRENCY: { title: 'Currency', description: 'Icons can represent units of currency' }, + DATE_TIME: { + title: 'Date & Time', + description: 'Icons that represent common ways of showing date and time', + }, + DESIGN: { + title: 'Design', + description: 'Icons can represent common design related symbols or techniques', + }, + EDITORS: { + title: 'Editors', + description: 'Icons can represent text editors and common editor actions', + }, + FILES: { + title: 'Files', + description: 'Icons can represent elements of a computer and its file system', + }, + GENDERS: { title: 'Genders', description: 'Icons can represent genders or types of sexuality' }, + HANDS_GESTURES: { + title: 'Hands & Gestures', + description: 'Icons can represent hand signals and gestures', + }, + HEALTH: { title: 'Health', description: 'Icons which represent common health symbols' }, + IMAGES: { title: 'Images', description: 'Icons that represent common image symbols and actions' }, + INTERFACES: { + title: 'Interfaces', + description: 'Icons can represent common actions a user can take or use', + }, + LOGISTICS: { title: 'Logistics', description: 'Icons can represent common logistic activity' }, + MAPS: { title: 'Maps', description: 'Icons can be used to represent elements on a map' }, + MEDICAL: { title: 'Medical', description: 'Icons can represent common medical actions' }, + OBJECTS: { title: 'Objects', description: 'Icons can be used to represent common objects' }, + PAYMENTS_SHOPPING: { + title: 'Payments & Shopping', + description: 'Icons can represent common forms of payment and shopping actions', + }, + SHAPES: { title: 'Shapes', description: 'Icons can be used to create shapes' }, + SPINNERS: { title: 'Spinners', description: 'Icons can represent loading' }, + SPORTS: { title: 'Sports', description: 'Icons which represent sports' }, + STATUS: { title: 'Status', description: 'Icons can represent different states' }, + USERS_PEOPLE: { title: 'Users & People', description: 'Icons can represent users or people' }, + VEHICLES: { title: 'Vehicles', description: 'Icons can represent vehicles or transport' }, + WRITING: { title: 'Writing', description: 'Icons can represent writing and editing' }, + BRANDS: { title: 'Brands', description: 'Icons can represent logos to common brands' }, + ICON_ALIASES: { title: 'Icon Aliases', description: 'Some of icons have usefull aliases.' }, } const similarityScore = (strA, strB) => { @@ -73,9 +109,9 @@ export default class IconSearch extends Component { setTimeout(() => this.setState({ copied: false }), 1000) } - renderIconColumn = name => ( + renderIconColumn = (name, section) => (

{name}

- )} + } /> ) @@ -104,24 +140,26 @@ export default class IconSearch extends Component { return iconKeys.map(iconKey => ( -
- {iconKeyToHeaderMap[iconKey]} -
+
- {SUI[iconKey].map(this.renderIconColumn)} + {SUI[iconKey].map(name => this.renderIconColumn(name, iconKey))} )) } - const iconSearchMatches = SUI.ICONS_AND_ALIASES - .filter((name) => { - // contains - if (name.indexOf(query) !== -1) return true + const iconSearchMatches = SUI.ICONS_AND_ALIASES.filter((name) => { + // contains + if (name.indexOf(query) !== -1) return true - // similar - return includeSimilar && similarityScore(name, query) <= 2 - }) - .map(this.renderIconColumn) + // similar + return includeSimilar && similarityScore(name, query) <= 2 + }).map(name => this.renderIconColumn(name)) // no results if (iconSearchMatches.length === 0) { @@ -131,7 +169,9 @@ export default class IconSearch extends Component { @@ -140,7 +180,11 @@ export default class IconSearch extends Component { } // results - return {iconSearchMatches} + return ( + + {iconSearchMatches} + + ) } render() { @@ -151,14 +195,6 @@ export default class IconSearch extends Component {
Icon Set

An icon set contains an arbitrary number of glyphs.

- - Semantic includes a complete port of{' '} - Font Awesome 4.7.0 - {' '}designed by{' '} - Dave Gandy for its standard icon - set. - -
+ + + Semantic includes a complete port of{' '} + + Font Awesome 5.0.8 + {' '} + designed by the{' '} + + FontAwesome + {' '} + for its standard icon set. + - - {this.renderIcons()} - + {this.renderIcons()} ) } diff --git a/docs/app/Components/Sidebar/Sidebar.js b/docs/app/Components/Sidebar/Sidebar.js index 99523332ed..5ce5ab89ce 100644 --- a/docs/app/Components/Sidebar/Sidebar.js +++ b/docs/app/Components/Sidebar/Sidebar.js @@ -197,7 +197,7 @@ class Sidebar extends Component { target='_blank' rel='noopener noreferrer' > - CHANGELOG + CHANGELOG diff --git a/docs/app/Examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js b/docs/app/Examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js index 0810262507..2f279c65c0 100644 --- a/docs/app/Examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js +++ b/docs/app/Examples/addons/TransitionablePortal/Usage/TransitionablePortalExampleTransition.js @@ -10,6 +10,7 @@ const transitions = [ 'scale', 'slide up', 'slide down', 'slide left', 'slide right', 'swing up', 'swing down', 'swing left', 'swing right', + 'zoom', ] const options = transitions.map(name => ({ key: name, text: name, value: name })) diff --git a/docs/app/Examples/modules/Dimmer/Types/DimmerExampleContent.js b/docs/app/Examples/modules/Dimmer/Types/DimmerExampleContent.js index fc131541e7..87517cddc2 100644 --- a/docs/app/Examples/modules/Dimmer/Types/DimmerExampleContent.js +++ b/docs/app/Examples/modules/Dimmer/Types/DimmerExampleContent.js @@ -13,22 +13,20 @@ export default class DimmerExampleDimmer extends Component { return (
- -
- - Dimmed Message! -
- -
Overlayable Section
- - + + +
+ + Dimmed Message! +
+ diff --git a/docs/app/Examples/modules/Dimmer/Types/DimmerExampleDimmer.js b/docs/app/Examples/modules/Dimmer/Types/DimmerExampleDimmer.js index 8a2c8f730e..ef7b943f83 100644 --- a/docs/app/Examples/modules/Dimmer/Types/DimmerExampleDimmer.js +++ b/docs/app/Examples/modules/Dimmer/Types/DimmerExampleDimmer.js @@ -13,17 +13,15 @@ export default class DimmerExampleDimmer extends Component { return (
- -
Overlayable Section
- - + + diff --git a/docs/app/Examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js b/docs/app/Examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js new file mode 100644 index 0000000000..c455b632c9 --- /dev/null +++ b/docs/app/Examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignBottom.js @@ -0,0 +1,38 @@ +import React, { Component } from 'react' +import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react' + +export default class DimmerExampleVerticalAlignBottom extends Component { + state = {} + + handleShow = () => this.setState({ active: true }) + handleHide = () => this.setState({ active: false }) + + render() { + const { active } = this.state + + return ( +
+ +

+ +

+

+ +

+ + +
Title
+ + + + + + + +
+ ) + } +} diff --git a/docs/app/Examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignTop.js b/docs/app/Examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignTop.js new file mode 100644 index 0000000000..32097b93a3 --- /dev/null +++ b/docs/app/Examples/modules/Dimmer/Variations/DimmerExampleVerticalAlignTop.js @@ -0,0 +1,38 @@ +import React, { Component } from 'react' +import { Button, Dimmer, Header, Image, Segment } from 'semantic-ui-react' + +export default class DimmerExampleVerticalAlignTop extends Component { + state = {} + + handleShow = () => this.setState({ active: true }) + handleHide = () => this.setState({ active: false }) + + render() { + const { active } = this.state + + return ( +
+ +

+ +

+

+ +

+ + +
Title
+ + + + + + + +
+ ) + } +} diff --git a/docs/app/Examples/modules/Dimmer/Variations/index.js b/docs/app/Examples/modules/Dimmer/Variations/index.js index 6b1be0ba9f..ca3e8b87d1 100644 --- a/docs/app/Examples/modules/Dimmer/Variations/index.js +++ b/docs/app/Examples/modules/Dimmer/Variations/index.js @@ -23,6 +23,14 @@ const DimmerVariationsExamples = () => ( description='A dimmer can be formatted to have its colors inverted.' examplePath='modules/Dimmer/Variations/DimmerExampleInverted' /> + + + ) diff --git a/docs/app/Examples/modules/Modal/Types/ModalExampleTopAligned.js b/docs/app/Examples/modules/Modal/Types/ModalExampleTopAligned.js new file mode 100644 index 0000000000..564012fc5c --- /dev/null +++ b/docs/app/Examples/modules/Modal/Types/ModalExampleTopAligned.js @@ -0,0 +1,18 @@ +import React from 'react' +import { Button, Header, Image, Modal } from 'semantic-ui-react' + +const ModalExampleTopAligned = () => ( + Show Modal} centered={false}> + Select a Photo + + + +
Default Profile Image
+

We've found the following gravatar image associated with your e-mail address.

+

Is it okay to use this photo?

+ + + +) + +export default ModalExampleTopAligned diff --git a/docs/app/Examples/modules/Modal/Types/index.js b/docs/app/Examples/modules/Modal/Types/index.js index b8418f24fe..b9b5511cdd 100644 --- a/docs/app/Examples/modules/Modal/Types/index.js +++ b/docs/app/Examples/modules/Modal/Types/index.js @@ -18,6 +18,11 @@ const ModalExamples = () => ( description='A modal can reduce its complexity.' examplePath='modules/Modal/Types/ModalExampleBasic' /> + ({ key: name, text: name, value: name })) diff --git a/docs/app/Examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js b/docs/app/Examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js index feb779a73d..0081a5516e 100644 --- a/docs/app/Examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js +++ b/docs/app/Examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import { Form, Grid, Image, Transition } from 'semantic-ui-react' -const transitions = ['jiggle', 'flash', 'shake', 'pulse', 'tada', 'bounce'] +const transitions = ['jiggle', 'flash', 'shake', 'pulse', 'tada', 'bounce', 'glow'] const options = transitions.map(name => ({ key: name, text: name, value: name })) diff --git a/docs/app/Views/Theming.js b/docs/app/Views/Theming.js index 67aab38520..b4c2604fa3 100644 --- a/docs/app/Views/Theming.js +++ b/docs/app/Views/Theming.js @@ -4,11 +4,7 @@ import { Button, Container, Header, Segment } from 'semantic-ui-react' const LayoutsExample = () => ( -
+
@@ -18,21 +14,19 @@ const LayoutsExample = () => ( powerful, you don't need to know LESS or CSS you can simply update values of variables or use styles from predefined themes.

-

- In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React. -

+

In fact, all you know about theming and styling of Semantic UI is fully applicable to Semantic UI React.