diff --git a/docs/public/style.css b/docs/public/style.css index 1552dd1080..dca3157fb5 100644 --- a/docs/public/style.css +++ b/docs/public/style.css @@ -12,7 +12,7 @@ body { } blockquote { - border-left: 3px solid rgba(34, 36, 38, .15); + border-left: 3px solid rgba(34, 36, 38, 0.15); margin-left: 0; padding-left: 10px; font-style: italic; @@ -43,7 +43,7 @@ pre { margin: 0; } -code:not([class*="language-"]) { +code:not([class*='language-']) { font-size: 87.5%; background-color: rgba(0, 0, 0, 0.04); border-radius: 3px; @@ -51,12 +51,12 @@ code:not([class*="language-"]) { display: inline-block; } -code:not([class*="language-"])::before { +code:not([class*='language-'])::before { letter-spacing: -0.2em; content: '\00a0'; } -code:not([class*="language-"])::after { +code:not([class*='language-'])::after { letter-spacing: -0.2em; content: '\00a0'; } @@ -138,3 +138,13 @@ code:not([class*="language-"])::after { .carbon-poweredby:hover { color: #ddd; } + +/* --- */ + +.token.deleted { + color: #e2777a; +} + +.token.inserted { + color: #7ec699; +} diff --git a/docs/src/components/CodeSnippet/CodeSnippet.js b/docs/src/components/CodeSnippet/CodeSnippet.js index 430356a5b1..6efe0f0671 100644 --- a/docs/src/components/CodeSnippet/CodeSnippet.js +++ b/docs/src/components/CodeSnippet/CodeSnippet.js @@ -5,6 +5,7 @@ import React from 'react' // Order of PrismJS imports there is sensitive import 'prismjs/components/prism-clike' +import 'prismjs/components/prism-diff' import 'prismjs/components/prism-json' import 'prismjs/components/prism-markup' import 'prismjs/components/prism-bash' @@ -23,6 +24,7 @@ const normalizeToString = (value) => { const formatters = { bash: (val = '') => val.replace(/^[\w]/gm, '$$ $&'), + diff: (val) => val, json: (val) => val, js: (val = '') => val, jsx: (val = '') => val, diff --git a/docs/src/components/Document.js b/docs/src/components/Document.js index 656657ca36..fcf5afb7b2 100644 --- a/docs/src/components/Document.js +++ b/docs/src/components/Document.js @@ -10,7 +10,6 @@ const Document = ({ Body, children, Head, Html, siteData: { dev, versions } }) = - + + {children} diff --git a/docs/src/components/DocumentationPage/components.js b/docs/src/components/DocumentationPage/components.js index 401d6638da..0f56884603 100644 --- a/docs/src/components/DocumentationPage/components.js +++ b/docs/src/components/DocumentationPage/components.js @@ -23,3 +23,5 @@ export const code = ({ className, children, fitted, formattable, label }) => ( export const h1 = ({ children }) =>
export const h2 = ({ children }) =>
+ +export const h3 = ({ children }) =>
diff --git a/docs/src/components/Sidebar/Sidebar.js b/docs/src/components/Sidebar/Sidebar.js index cab35ffac7..72baa4dff1 100644 --- a/docs/src/components/Sidebar/Sidebar.js +++ b/docs/src/components/Sidebar/Sidebar.js @@ -223,6 +223,9 @@ class Sidebar extends Component { Prototypes + + Migration guide to v2 + diff --git a/docs/src/pages/MigrationGuide.mdx b/docs/src/pages/MigrationGuide.mdx new file mode 100644 index 0000000000..0b98a21f9f --- /dev/null +++ b/docs/src/pages/MigrationGuide.mdx @@ -0,0 +1,81 @@ +export const meta = { + title: 'Migration Guide', + prevPage: { title: 'Prototypes', href: '/prototypes' }, +} + +This is a reference for upgrading your application to v2 of Semantic UI React. While there's a lot covered here, you probably won't need to do everything for your app. + +## Upgrade of `react-popper` for `Popup` + +_Popper.js v1 is out of date, v2 was released in Dec 2019, time to upgrade 🚀_ + +### `offset` can't be specified as string anymore + +Previously it was possible to pass different units to the offset prop as units. This behavior was changed and `offset` accepts a tuple or a function. Examples in our docs were also updated. + +```diff + <> +- ++ +
+- ++ [-popper.width, 0]} /> + +``` + +### `popperModifiers` should be defined as array now + +The `popperModifiers` prop should be defined as an array with changed format (see [Popper docs](https://popper.js.org/docs/v2/migration-guide/#10-update-modifiers)). + +```diff +- ++ +``` + +## `Responsive` component was removed + +`Responsive` component was deprecated in 1.1.0. There are two main reasons for the removal: there is no connection between breakpoints and pure SSR (server side rendering) support. + +[@artsy/fresnel](https://github.com/artsy/fresnel) was proposed as a replacement as it properly handles SSR scenarios. + +```diff ++import { createMedia } from "@artsy/fresnel"; +import React from "react"; +-import { Responsive, Segment } from "semantic-ui-react"; ++import { Segment } from "semantic-ui-react"; + ++const AppMedia = createMedia({ ++ breakpoints: { ++ mobile: 320, ++ tablet: 768, ++ computer: 992, ++ largeScreen: 1200, ++ widescreen: 1920 ++ } ++}); ++const mediaStyles = AppMedia.createMediaStyle(); ++const { Media, MediaContextProvider } = AppMedia; + +-const App = () => ( +- +- Mobile +- +-) ++const App = () => ( ++ <> ++ ++ ++ ++ Mobile ++ ++ ++ ++); +``` + +The full migration guide is available in [Semantic-Org/Semantic-UI-React#4008](https://github.com/Semantic-Org/Semantic-UI-React/pull/4008), it contains more detailed explanation and examples for Next.js & Gatsby. + +## `MountNode` component was removed + +`MountNode` component was deprecated in 1.1.0. The main reason for the removal is that the component should not be a part of the public API as it solves our specific issue with the `Modal` component. +Additional details are available in [Semantic-Org/Semantic-UI-React#4027](https://github.com/Semantic-Org/Semantic-UI-React/pull/4027). diff --git a/docs/src/pages/Prototypes.mdx b/docs/src/pages/Prototypes.mdx index 8c9f610a20..48133e59fe 100644 --- a/docs/src/pages/Prototypes.mdx +++ b/docs/src/pages/Prototypes.mdx @@ -3,6 +3,7 @@ import { Button, Card, Header, Image } from 'semantic-ui-react' export const meta = { title: 'Prototypes', prevPage: { title: 'Layout examples', href: '/layouts' }, + nextPage: { title: 'Migration Guide', href: '/migration-guide' }, }