Fix export for AlignmentControl (__experimentalAlignmentControl)

WordPress · Mar 25, 2020 · a5d3dbc · a5d3dbc
1 parent 8d4698e
commit a5d3dbc
Show file tree

Hide file tree

Showing 3 changed files with 198 additions and 18 deletions.
diff --git a/packages/components/src/alignment-control/stories/index.js b/packages/components/src/alignment-control/stories/index.js
@@ -25,7 +25,7 @@ export const _default = () => {
 	return <AlignmentControl />;
 };
 
-export const alignControlIcon = () => {
+export const alignmentControlIcon = () => {
 	const props = {
 		alignment: select( 'alignment', alignmentOptions, 'center' ),
 		size: number( 'size', 24 ),

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -11,7 +11,7 @@ export {
 } from '@wordpress/primitives';
 
 // Components
-export { default as __experimentalAlignControl } from './align-control';
+export { default as __experimentalAlignmentControl } from './alignment-control';
 export { default as Animate } from './animate';
 export { default as AnglePickerControl } from './angle-picker-control';
 export { default as Autocomplete } from './autocomplete';

diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
@@ -1,14 +1,189 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Components/AlignmentControl Alignment Control Icon 1`] = `
+.emotion-36 {
+  padding: 1px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat( 3,1fr );
+  outline: none;
+  grid-template-rows: repeat( 3,calc( 24px / 3));
+  max-width: 24px;
+}
+
+.emotion-2 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: none;
+  box-sizing: border-box;
+  margin: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+  cursor: initial;
+}
+
+.emotion-0 {
+  height: 2px;
+  width: 2px;
+  background: currentColor;
+  box-sizing: border-box;
+  display: grid;
+  margin: auto;
+  -webkit-transition: all 120ms linear;
+  transition: all 120ms linear;
+  color: #b5bcc2;
+  color: currentColor;
+}
+
+@media ( prefers-reduced-motion:reduce ) {
+  .emotion-0 {
+    -webkit-transition-duration: 0ms;
+    transition-duration: 0ms;
+  }
+}
+
+*:hover > .emotion-0 {
+  color: #007cba;
+}
+
+*:hover > .emotion-0 {
+  color: currentColor;
+}
+
+.emotion-16 {
+  height: 2px;
+  width: 2px;
+  background: currentColor;
+  box-sizing: border-box;
+  display: grid;
+  margin: auto;
+  -webkit-transition: all 120ms linear;
+  transition: all 120ms linear;
+  box-shadow: 0 0 0 2px #000;
+  color: #000;
+  box-shadow: 0 0 0 1px #007cba;
+  color: #007cba;
+}
+
+@media ( prefers-reduced-motion:reduce ) {
+  .emotion-16 {
+    -webkit-transition-duration: 0ms;
+    transition-duration: 0ms;
+  }
+}
+
+*:hover > .emotion-16 {
+  color: #000;
+}
+
+*:hover > .emotion-16 {
+  color: #007cba;
+}
+
+<div
+  className="emotion-36 emotion-37"
+  size={24}
+>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0 emotion-1"
+    />
+  </div>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0 emotion-1"
+    />
+  </div>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0 emotion-1"
+    />
+  </div>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0 emotion-1"
+    />
+  </div>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-16 emotion-1"
+    />
+  </div>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0 emotion-1"
+    />
+  </div>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0 emotion-1"
+    />
+  </div>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0 emotion-1"
+    />
+  </div>
+  <div
+    className="emotion-2 emotion-3"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0 emotion-1"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/AlignmentControl Default 1`] = `
 .emotion-36 {
   --maxWidth: 92px;
-  border: 1px solid transparent;
-  border-radius: 2px;
+  grid-template-rows: repeat( 3,calc( var( --maxWidth ) / 3 ) );
   max-width: var( --maxWidth );
+  border-radius: 2px;
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat( 3,1fr );
-  grid-template-rows: repeat( 3,calc( var( --maxWidth ) / 3 ) );
   outline: none;
 }
 
@@ -22,6 +197,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
   -moz-appearance: none;
   appearance: none;
   border: none;
+  box-sizing: border-box;
   margin: 0;
   display: -webkit-box;
   display: -webkit-flex;
@@ -42,12 +218,14 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
 }
 
 .emotion-0 {
-  width: 6px;
   height: 6px;
+  width: 6px;
+  background: currentColor;
+  box-sizing: border-box;
+  display: grid;
   margin: auto;
   -webkit-transition: all 120ms linear;
   transition: all 120ms linear;
-  background: currentColor;
   color: #b5bcc2;
 }
 
@@ -63,12 +241,14 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
 }
 
 .emotion-16 {
-  width: 6px;
   height: 6px;
+  width: 6px;
+  background: currentColor;
+  box-sizing: border-box;
+  display: grid;
   margin: auto;
   -webkit-transition: all 120ms linear;
   transition: all 120ms linear;
-  background: currentColor;
   box-shadow: 0 0 0 2px #000;
   color: #000;
 }
@@ -95,7 +275,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-0 emotion-1"
+      className="emotion-0 emotion-1"
     />
   </div>
   <div
@@ -104,7 +284,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-0 emotion-1"
+      className="emotion-0 emotion-1"
     />
   </div>
   <div
@@ -113,7 +293,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-0 emotion-1"
+      className="emotion-0 emotion-1"
     />
   </div>
   <div
@@ -122,7 +302,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-0 emotion-1"
+      className="emotion-0 emotion-1"
     />
   </div>
   <div
@@ -131,7 +311,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-16 emotion-1"
+      className="emotion-16 emotion-1"
     />
   </div>
   <div
@@ -140,7 +320,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-0 emotion-1"
+      className="emotion-0 emotion-1"
     />
   </div>
   <div
@@ -149,7 +329,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-0 emotion-1"
+      className="emotion-0 emotion-1"
     />
   </div>
   <div
@@ -158,7 +338,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-0 emotion-1"
+      className="emotion-0 emotion-1"
     />
   </div>
   <div
@@ -167,7 +347,7 @@ exports[`Storyshots Components/AlignmentControl Default 1`] = `
     tabIndex={-1}
   >
     <div
-      className="dot emotion-0 emotion-1"
+      className="emotion-0 emotion-1"
     />
   </div>
 </div>