Rename AccessibleSVG to SVG and make it work with React Native (WordP…

…ress#9685) * Components: Rename AccessibleSVG and merge with SVG * Docs: Expose SVG docs to the Gutenberg manual * Update snapshots generated for tests using SVGs
jwold · Sep 28, 2018 · 5c2085a · 5c2085a
1 parent 22534e8
commit 5c2085a
Show file tree

Hide file tree

Showing 21 changed files with 209 additions and 112 deletions.
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -515,12 +515,6 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components.md",
 		"parent": null
 	},
-	{
-		"title": "AccessibleSvg",
-		"slug": "accessible-svg",
-		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/accessible-svg/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "Autocomplete",
 		"slug": "autocomplete",
@@ -647,12 +641,60 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/form-token-field/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "NavigateRegions",
+		"slug": "navigate-regions",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/navigate-regions/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "HigherOrder",
 		"slug": "higher-order",
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "WithConstrainedTabbing",
+		"slug": "with-constrained-tabbing",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/with-constrained-tabbing/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "WithFallbackStyles",
+		"slug": "with-fallback-styles",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/with-fallback-styles/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "WithFilters",
+		"slug": "with-filters",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/with-filters/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "WithFocusOutside",
+		"slug": "with-focus-outside",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/with-focus-outside/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "WithFocusReturn",
+		"slug": "with-focus-return",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/with-focus-return/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "WithNotices",
+		"slug": "with-notices",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/with-notices/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "WithSpokenMessages",
+		"slug": "with-spoken-messages",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/higher-order/with-spoken-messages/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "IconButton",
 		"slug": "icon-button",
@@ -719,6 +761,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/popover/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "Svg",
+		"slug": "svg",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/primitives/svg/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "QueryControls",
 		"slug": "query-controls",

diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md
@@ -3,6 +3,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
 ## 4.2.0
 
 - Writing resolvers as async generators has been removed. Use the controls plugin instead.
+- `wp.components.AccessibleSVG` component has been removed. Please use `wp.components.SVG` instead.
 
 ## 4.1.0
 

diff --git a/docs/tool/config.js b/docs/tool/config.js
@@ -16,7 +16,7 @@ const gutenbergPackages = [
 ];
 
 module.exports = {
-	componentPaths: glob( 'packages/components/src/*/README.md' ),
+	componentPaths: glob( 'packages/components/src/*/**/README.md' ),
 	dataNamespaces: {
 		core: {
 			title: 'WordPress Core Data',

diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js
@@ -1,7 +1,7 @@
 /**
  * Node dependencies
  */
-const { camelCase, kebabCase, upperFirst } = require( 'lodash' );
+const { camelCase, kebabCase, nth, upperFirst } = require( 'lodash' );
 
 const baseRepoUrl = `https://raw.githubusercontent.com/WordPress/gutenberg/master`;
 
@@ -52,7 +52,7 @@ function getComponentManifest( componentPaths ) {
 		},
 		...componentPaths
 			.map( ( filePath ) => {
-				const slug = filePath.split( '/' )[ 3 ];
+				const slug = nth( filePath.split( '/' ), -2 );
 				return {
 					title: upperFirst( camelCase( slug ) ),
 					slug,

diff --git a/edit-post/components/header/more-menu/test/__snapshots__/index.js.snap b/edit-post/components/header/more-menu/test/__snapshots__/index.js.snap
@@ -57,7 +57,7 @@ exports[`MoreMenu should match snapshot 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <svg
-                    aria-hidden={true}
+                    aria-hidden="true"
                     className="dashicon dashicons-ellipsis"
                     focusable="false"
                     height={20}

diff --git a/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
@@ -24,7 +24,7 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
           onClick={[Function]}
           type="button"
         >
-          <AccessibleSVG
+          <SVG
             className="components-panel__arrow"
             height="24px"
             viewBox="0 0 24 24"
@@ -41,19 +41,32 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
               width="24px"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <g>
-                <path
-                  d="M0,0h24v24H0V0z"
-                  fill="none"
-                />
-              </g>
-              <g>
-                <path
-                  d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                />
-              </g>
+              <G>
+                <g>
+                  <Path
+                    d="M0,0h24v24H0V0z"
+                    fill="none"
+                  >
+                    <path
+                      d="M0,0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </Path>
+                </g>
+              </G>
+              <G>
+                <g>
+                  <Path
+                    d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
+                  >
+                    <path
+                      d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
+                    />
+                  </Path>
+                </g>
+              </G>
             </svg>
-          </AccessibleSVG>
+          </SVG>
           My panel title
         </button>
       </Button>

diff --git a/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/edit-post/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap
@@ -24,7 +24,7 @@ exports[`PluginPrePublishPanel renders fill properly 1`] = `
           onClick={[Function]}
           type="button"
         >
-          <AccessibleSVG
+          <SVG
             className="components-panel__arrow"
             height="24px"
             viewBox="0 0 24 24"
@@ -41,19 +41,32 @@ exports[`PluginPrePublishPanel renders fill properly 1`] = `
               width="24px"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <g>
-                <path
-                  d="M0,0h24v24H0V0z"
-                  fill="none"
-                />
-              </g>
-              <g>
-                <path
-                  d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
-                />
-              </g>
+              <G>
+                <g>
+                  <Path
+                    d="M0,0h24v24H0V0z"
+                    fill="none"
+                  >
+                    <path
+                      d="M0,0h24v24H0V0z"
+                      fill="none"
+                    />
+                  </Path>
+                </g>
+              </G>
+              <G>
+                <g>
+                  <Path
+                    d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
+                  >
+                    <path
+                      d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
+                    />
+                  </Path>
+                </g>
+              </G>
             </svg>
-          </AccessibleSVG>
+          </SVG>
           My panel title
         </button>
       </Button>

diff --git a/package.json b/package.json
@@ -209,7 +209,7 @@
 		"*.js": [
 			"eslint"
 		],
-		"{docs/{root-manifest.json,tool/*.js},packages/{*/README.md,*/src/{actions,selectors}.js,components/src/*/README.md}}": [
+		"{docs/{root-manifest.json,tool/*.js},packages/{*/README.md,*/src/{actions,selectors}.js,components/src/*/**/README.md}}": [
 			"npm run docs:build"
 		]
 	}

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 - `wp.components.Draggable` as a DOM node drag handler has been removed. Please, use `wp.components.Draggable` as a wrap component for your DOM node drag handler.
 
+### Deprecation
+
+- Renamed `AccessibleSVG` component to `SVG`.
+
 ## 3.0.0 (2018-09-05)
 
 ### Breaking Change

diff --git a/packages/components/src/accessible-svg/README.md b/packages/components/src/accessible-svg/README.md
diff --git a/packages/components/src/accessible-svg/index.js b/packages/components/src/accessible-svg/index.js
diff --git a/packages/components/src/form-toggle/index.js b/packages/components/src/form-toggle/index.js
@@ -7,7 +7,7 @@ import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
-import AccessibleSVG from '../accessible-svg';
+import { Path, SVG } from '../primitives';
 
 function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
 	const wrapperClasses = classnames(
@@ -29,8 +29,8 @@ function FormToggle( { className, checked, id, onChange = noop, ...props } ) {
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
 			{ checked ?
-				<AccessibleSVG className="components-form-toggle__on" width="2" height="6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 6"><path d="M0 0h2v6H0z" /></AccessibleSVG> :
-				<AccessibleSVG className="components-form-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" /></AccessibleSVG>
+				<SVG className="components-form-toggle__on" width="2" height="6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 6"><Path d="M0 0h2v6H0z" /></SVG> :
+				<SVG className="components-form-toggle__off" width="6" height="6" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6"><Path d="M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z" /></SVG>
 			}
 		</span>
 	);

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -1,7 +1,6 @@
 // Components
 export * from './primitives';
 // eslint-disable-next-line camelcase
-export { default as AccessibleSVG } from './accessible-svg';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';
 export { default as Button } from './button';

diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
@@ -13,7 +13,7 @@ import { Component } from '@wordpress/element';
  */
 import Button from '../button';
 import Dashicon from '../dashicon';
-import AccessibleSVG from '../accessible-svg';
+import { G, Path, SVG } from '../primitives';
 
 class PanelBody extends Component {
 	constructor( props ) {
@@ -52,14 +52,14 @@ class PanelBody extends Component {
 							aria-expanded={ isOpened }
 						>
 							{ isOpened ?
-								<AccessibleSVG className="components-panel__arrow" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-									<g><path fill="none" d="M0,0h24v24H0V0z" /></g>
-									<g><path d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z" /></g>
-								</AccessibleSVG> :
-								<AccessibleSVG className="components-panel__arrow" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-									<g><path fill="none" d="M0,0h24v24H0V0z" /></g>
-									<g><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z" /></g>
-								</AccessibleSVG>
+								<SVG className="components-panel__arrow" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+									<G><Path fill="none" d="M0,0h24v24H0V0z" /></G>
+									<G><Path d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z" /></G>
+								</SVG> :
+								<SVG className="components-panel__arrow" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+									<G><Path fill="none" d="M0,0h24v24H0V0z" /></G>
+									<G><Path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z" /></G>
+								</SVG>
 							}
 							{ icon && <Dashicon icon={ icon } className="components-panel__icon" /> }
 							{ title }

diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js
@@ -24,7 +24,7 @@ describe( 'PanelBody', () => {
 			expect( panelBody.hasClass( 'is-opened' ) ).toBe( true );
 			expect( panelBody.state( 'opened' ) ).toBe( true );
 			expect( button.prop( 'onClick' ) ).toBe( panelBody.instance().toggle );
-			expect( button.childAt( 0 ).name() ).toBe( 'AccessibleSVG' );
+			expect( button.childAt( 0 ).name() ).toBe( 'SVG' );
 			expect( button.childAt( 1 ).text() ).toBe( 'Some Text' );
 		} );
 

diff --git a/packages/components/src/primitives/svg/README.md b/packages/components/src/primitives/svg/README.md
@@ -0,0 +1,24 @@
+# SVG
+
+A drop-in replacement for the svg element that adds the required accessibility attributes for SVG elements across browsers.
+
+## Usage
+
+```jsx
+import { G, Path, SVG } from '@wordpress/components';
+
+const MyIcon = () => (
+	<SVG
+		viewBox="0 0 24 24"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<G>
+			<Path d="M20 4v12H8V4h12m0-2H8L6 4v12l2 2h12l2-2V4l-2-2z" />
+			<Path d="M12 12l1 2 3-3 3 4H9z" />
+			<Path d="M2 6v14l2 2h14v-2H4V6H2z" />
+		</G>
+	</SVG>
+	>
+);
+```