Modifies shortcut hierarchy in modal (#16724)

* Fixes #16691. Moves the shortcut to open shortcut modal to it's own section right under the modal header. * Only render shortcut title when a value is provided * Use classname to modify style for first shortcut * Update snapshots * Using variable for elements top-margin for positioning.
WordPress · Aug 29, 2019 · eca5584 · eca5584
1 parent d7937b7
commit eca5584
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js
@@ -20,13 +20,19 @@ const {
 	ctrlShift,
 } = displayShortcutList;
 
-const globalShortcuts = {
-	title: __( 'Global shortcuts' ),
+const mainShortcut = {
+	className: 'edit-post-keyboard-shortcut-help__main-shortcuts',
 	shortcuts: [
 		{
 			keyCombination: access( 'h' ),
-			description: __( 'Display this help.' ),
+			description: __( 'Display these keyboard shortcuts.' ),
 		},
+	],
+};
+
+const globalShortcuts = {
+	title: __( 'Global shortcuts' ),
+	shortcuts: [
 		{
 			keyCombination: primary( 's' ),
 			description: __( 'Save your changes.' ),
@@ -148,6 +154,7 @@ const textFormattingShortcuts = {
 };
 
 export default [
+	mainShortcut,
 	globalShortcuts,
 	selectionShortcuts,
 	blockShortcuts,

diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { castArray } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -64,11 +65,13 @@ const ShortcutList = ( { shortcuts } ) => (
 	</ul>
 );
 
-const ShortcutSection = ( { title, shortcuts } ) => (
-	<section className="edit-post-keyboard-shortcut-help__section">
-		<h2 className="edit-post-keyboard-shortcut-help__section-title">
-			{ title }
-		</h2>
+const ShortcutSection = ( { title, shortcuts, className } ) => (
+	<section className={ classnames( 'edit-post-keyboard-shortcut-help__section', className ) }>
+		{ !! title && (
+			<h2 className="edit-post-keyboard-shortcut-help__section-title">
+				{ title }
+			</h2>
+		) }
 		<ShortcutList shortcuts={ shortcuts } />
 	</section>
 );

diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss
@@ -1,9 +1,12 @@
 .edit-post-keyboard-shortcut-help {
-
 	&__section {
 		margin: 0 0 2rem 0;
 	}
 
+	&__main-shortcuts .edit-post-keyboard-shortcut-help__shortcut-list {
+		// Push the shortcut to be flush with top modal header.
+		margin-top: -$panel-padding -$border-width;
+	}
 
 	&__section-title {
 		font-size: 0.9rem;
@@ -31,7 +34,7 @@
 		flex: 1;
 		margin: 0;
 
-		// IE 11 flex item fix - ensure the item does not collapse
+		// IE 11 flex item fix - ensure the item does not collapse.
 		flex-basis: auto;
 	}
 

diff --git a/...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/...es/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
@@ -17,11 +17,12 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
     title="Keyboard Shortcuts"
   >
     <ShortcutSection
+      className="edit-post-keyboard-shortcut-help__main-shortcuts"
       key="0"
       shortcuts={
         Array [
           Object {
-            "description": "Display this help.",
+            "description": "Display these keyboard shortcuts.",
             "keyCombination": Array [
               "Shift",
               "+",
@@ -30,6 +31,13 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
               "H",
             ],
           },
+        ]
+      }
+    />
+    <ShortcutSection
+      key="1"
+      shortcuts={
+        Array [
           Object {
             "description": "Save your changes.",
             "keyCombination": Array [
@@ -142,7 +150,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
       title="Global shortcuts"
     />
     <ShortcutSection
-      key="1"
+      key="2"
       shortcuts={
         Array [
           Object {
@@ -163,7 +171,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
       title="Selection shortcuts"
     />
     <ShortcutSection
-      key="2"
+      key="3"
       shortcuts={
         Array [
           Object {
@@ -216,7 +224,7 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
       title="Block shortcuts"
     />
     <ShortcutSection
-      key="3"
+      key="4"
       shortcuts={
         Array [
           Object {