Rename KuiGalleryButton to KuiGalleryItem (elastic#14118)

spalger · Oct 2, 2017 · 6c057a2 · 6c057a2
1 parent 308c77c
commit 6c057a2
Show file tree

Hide file tree

Showing 24 changed files with 131 additions and 131 deletions.
diff --git a/src/core_plugins/kibana/public/visualize/wizard/step_1.html b/src/core_plugins/kibana/public/visualize/wizard/step_1.html
@@ -43,14 +43,14 @@ <h2 class="kuiSubTitle kuiVerticalRhythm">
       <!-- Gallery of buttons for each vis type -->
       <div class="kuiGallery kuiVerticalRhythm">
         <a
-          class="kuiGalleryButton"
+          class="kuiGalleryItem"
           ng-repeat="type in category.list"
           ng-href="{{ getVisTypeUrl(type) }}"
           tooltip="{{ getVisTypeTooltip(type) }}"
           tooltip-placement="{{ getVisTypeTooltipPosition($parent.$index) }}"
           aria-describedby="visDescription_{{ ::getVisTypeId(type) }}"
         >
-          <div class="kuiGalleryButton__image">
+          <div class="kuiGalleryItem__image">
             <img
               ng-if="type.image"
               aria-hidden="true"
@@ -67,14 +67,14 @@ <h2 class="kuiSubTitle kuiVerticalRhythm">
           </div>
 
           <div
-            class="kuiGalleryButton__label"
+            class="kuiGalleryItem__label"
             data-test-subj="visualizeWizardChartTypeTitle"
           >
             {{ type.title }}
           </div>
 
           <div
-            class="kuiGalleryButton__icon kuiIcon fa-flask"
+            class="kuiGalleryItem__icon kuiIcon fa-flask"
             ng-if="type.isExperimental"
           ></div>
 

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -1367,7 +1367,7 @@ main {
       -ms-flex-wrap: wrap;
           flex-wrap: wrap; }
 
-.kuiGalleryButton {
+.kuiGalleryItem {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1395,11 +1395,11 @@ main {
   border: 1px solid #CED5DA;
   border-radius: 4px;
   text-decoration: none; }
-  .kuiGalleryButton:hover {
+  .kuiGalleryItem:hover {
     background-color: #FFFFFF;
     border-color: #00A6FF; }
 
-.kuiGalleryButton__image {
+.kuiGalleryItem__image {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1419,7 +1419,7 @@ main {
 /**
    * 1. Truncate overflowing text.
    */
-.kuiGalleryButton__label {
+.kuiGalleryItem__label {
   font-size: 14px;
   color: #191E23;
   text-align: center;
@@ -1432,7 +1432,7 @@ main {
   text-overflow: ellipsis;
   /* 1 */ }
 
-.kuiGalleryButton__icon {
+.kuiGalleryItem__icon {
   position: absolute;
   top: 5px;
   right: 5px;

diff --git a/ui_framework/doc_site/src/views/gallery/gallery.js b/ui_framework/doc_site/src/views/gallery/gallery.js
@@ -2,10 +2,10 @@ import React from 'react';
 
 import {
   KuiGallery,
-  KuiGalleryButton,
-  KuiGalleryButtonIcon,
-  KuiGalleryButtonImage,
-  KuiGalleryButtonLabel
+  KuiGalleryItem,
+  KuiGalleryItemIcon,
+  KuiGalleryItemImage,
+  KuiGalleryItemLabel
 } from '../../../../components';
 
 export default () => {
@@ -25,47 +25,47 @@ export default () => {
         </h2>
 
         <KuiGallery className="kuiVerticalRhythmSmall">
-          <KuiGalleryButton href="#">
-            <KuiGalleryButtonImage style={imageStyle}/>
+          <KuiGalleryItem href="#">
+            <KuiGalleryItemImage style={imageStyle}/>
 
-            <KuiGalleryButtonLabel>
+            <KuiGalleryItemLabel>
               Item A
-            </KuiGalleryButtonLabel>
+            </KuiGalleryItemLabel>
 
-            <KuiGalleryButtonIcon className="fa-flask"/>
-          </KuiGalleryButton>
+            <KuiGalleryItemIcon className="fa-flask"/>
+          </KuiGalleryItem>
 
-          <KuiGalleryButton href="#">
-            <KuiGalleryButtonImage style={imageStyle}/>
+          <KuiGalleryItem href="#">
+            <KuiGalleryItemImage style={imageStyle}/>
 
-            <KuiGalleryButtonLabel>
+            <KuiGalleryItemLabel>
               Item B
-            </KuiGalleryButtonLabel>
-          </KuiGalleryButton>
+            </KuiGalleryItemLabel>
+          </KuiGalleryItem>
 
-          <KuiGalleryButton>
-            <KuiGalleryButtonImage style={imageStyle}/>
+          <KuiGalleryItem>
+            <KuiGalleryItemImage style={imageStyle}/>
 
-            <KuiGalleryButtonLabel>
+            <KuiGalleryItemLabel>
               Item C
-            </KuiGalleryButtonLabel>
-          </KuiGalleryButton>
+            </KuiGalleryItemLabel>
+          </KuiGalleryItem>
 
-          <KuiGalleryButton>
-            <KuiGalleryButtonImage style={imageStyle}/>
+          <KuiGalleryItem>
+            <KuiGalleryItemImage style={imageStyle}/>
 
-            <KuiGalleryButtonLabel>
+            <KuiGalleryItemLabel>
               Item D
-            </KuiGalleryButtonLabel>
-          </KuiGalleryButton>
+            </KuiGalleryItemLabel>
+          </KuiGalleryItem>
 
-          <KuiGalleryButton>
-            <KuiGalleryButtonImage style={imageStyle}/>
+          <KuiGalleryItem>
+            <KuiGalleryItemImage style={imageStyle}/>
 
-            <KuiGalleryButtonLabel>
+            <KuiGalleryItemLabel>
               Item E
-            </KuiGalleryButtonLabel>
-          </KuiGalleryButton>
+            </KuiGalleryItemLabel>
+          </KuiGalleryItem>
         </KuiGallery>
       </div>
 
@@ -75,21 +75,21 @@ export default () => {
         </div>
 
         <KuiGallery className="kuiVerticalRhythmSmall">
-          <KuiGalleryButton href="#">
-            <KuiGalleryButtonImage style={imageStyle}/>
+          <KuiGalleryItem href="#">
+            <KuiGalleryItemImage style={imageStyle}/>
 
-            <KuiGalleryButtonLabel>
+            <KuiGalleryItemLabel>
               Item F
-            </KuiGalleryButtonLabel>
-          </KuiGalleryButton>
+            </KuiGalleryItemLabel>
+          </KuiGalleryItem>
 
-          <KuiGalleryButton href="#">
-            <KuiGalleryButtonImage style={imageStyle}/>
+          <KuiGalleryItem href="#">
+            <KuiGalleryItemImage style={imageStyle}/>
 
-            <KuiGalleryButtonLabel>
+            <KuiGalleryItemLabel>
               Item G with a long label with ellipsis
-            </KuiGalleryButtonLabel>
-          </KuiGalleryButton>
+            </KuiGalleryItemLabel>
+          </KuiGalleryItem>
         </KuiGallery>
       </div>
     </div>

diff --git a/ui_framework/doc_site/src/views/gallery/gallery_example.js b/ui_framework/doc_site/src/views/gallery/gallery_example.js
@@ -26,7 +26,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        Use GalleryButton to show a gallery item.
+        Use GalleryItem to show a gallery item.
         It&rsquo;s an anchor and accepts all anchor properties.
       </GuideText>
 

diff --git a/...c/components/gallery/_gallery_button.scss → ...src/components/gallery/_gallery_item.scss b/...c/components/gallery/_gallery_button.scss → ...src/components/gallery/_gallery_item.scss
@@ -1,4 +1,4 @@
-.kuiGalleryButton {
+.kuiGalleryItem {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -20,7 +20,7 @@
   }
 }
 
-  .kuiGalleryButton__image {
+  .kuiGalleryItem__image {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -32,7 +32,7 @@
   /**
    * 1. Truncate overflowing text.
    */
-  .kuiGalleryButton__label {
+  .kuiGalleryItem__label {
     font-size: $kuiFontSize;
     color: $kuiFontColor;
     text-align: center;
@@ -42,7 +42,7 @@
     text-overflow: ellipsis; /* 1 */
   }
 
-  .kuiGalleryButton__icon {
+  .kuiGalleryItem__icon {
     position: absolute;
     top: 5px;
     right: 5px;

diff --git a/ui_framework/src/components/gallery/_index.scss b/ui_framework/src/components/gallery/_index.scss
@@ -3,4 +3,4 @@ $galleryButtonRhythm: 20px;
 $galleryButtonIconSize: 50px;
 
 @import "gallery";
-@import "gallery_button";
+@import "gallery_item";
diff --git a/ui_framework/src/components/gallery/gallery_button/gallery_button.test.js b/ui_framework/src/components/gallery/gallery_button/gallery_button.test.js
diff --git a/ui_framework/src/components/gallery/gallery_button/gallery_button_icon.test.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_icon.test.js
diff --git a/ui_framework/src/components/gallery/gallery_button/gallery_button_image.test.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_image.test.js
diff --git a/ui_framework/src/components/gallery/gallery_button/gallery_button_label.test.js b/ui_framework/src/components/gallery/gallery_button/gallery_button_label.test.js
diff --git a/...__snapshots__/gallery_button.test.js.snap → ...m/__snapshots__/gallery_item.test.js.snap b/...__snapshots__/gallery_button.test.js.snap → ...m/__snapshots__/gallery_item.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders KuiGalleryButton href 1`] = `
+exports[`renders KuiGalleryItem href 1`] = `
 <a
   aria-label="aria-label"
-  class="kuiGalleryButton testClass1 testClass2"
+  class="kuiGalleryItem testClass1 testClass2"
   data-test-subj="test subject string"
   href="#"
 >

diff --git a/...pshots__/gallery_button_icon.test.js.snap → ...napshots__/gallery_item_icon.test.js.snap b/...pshots__/gallery_button_icon.test.js.snap → ...napshots__/gallery_item_icon.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders KuiGalleryButtonIcon 1`] = `
+exports[`renders KuiGalleryItemIcon 1`] = `
 <div
   aria-label="aria-label"
-  class="kuiGalleryButton__icon kuiIcon testClass1 testClass2"
+  class="kuiGalleryItem__icon kuiIcon testClass1 testClass2"
   data-test-subj="test subject string"
 >
   children

diff --git a/...shots__/gallery_button_label.test.js.snap → ...apshots__/gallery_item_image.test.js.snap b/...shots__/gallery_button_label.test.js.snap → ...apshots__/gallery_item_image.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders KuiGalleryButtonLabel 1`] = `
+exports[`renders KuiGalleryItemImage 1`] = `
 <div
   aria-label="aria-label"
-  class="kuiGalleryButton__label testClass1 testClass2"
+  class="kuiGalleryItem__image testClass1 testClass2"
   data-test-subj="test subject string"
 >
   children

diff --git a/...shots__/gallery_button_image.test.js.snap → ...apshots__/gallery_item_label.test.js.snap b/...shots__/gallery_button_image.test.js.snap → ...apshots__/gallery_item_label.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders KuiGalleryButtonImage 1`] = `
+exports[`renders KuiGalleryItemLabel 1`] = `
 <div
   aria-label="aria-label"
-  class="kuiGalleryButton__image testClass1 testClass2"
+  class="kuiGalleryItem__label testClass1 testClass2"
   data-test-subj="test subject string"
 >
   children

diff --git a/.../gallery/gallery_button/gallery_button.js → ...ents/gallery/gallery_item/gallery_item.js b/.../gallery/gallery_button/gallery_button.js → ...ents/gallery/gallery_item/gallery_item.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const KuiGalleryButton = ({ children, className, ...rest }) => {
-  const classes = classNames('kuiGalleryButton', className);
+export const KuiGalleryItem = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiGalleryItem', className);
   return (
     <a
       className={classes}
@@ -13,7 +13,7 @@ export const KuiGalleryButton = ({ children, className, ...rest }) => {
     </a>
   );
 };
-KuiGalleryButton.propTypes = {
+KuiGalleryItem.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
 };
diff --git a/ui_framework/src/components/gallery/gallery_item/gallery_item.test.js b/ui_framework/src/components/gallery/gallery_item/gallery_item.test.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import {
+  KuiGalleryItem,
+} from './gallery_item';
+
+test('renders KuiGalleryItem href', () => {
+  const component = <KuiGalleryItem href="#" {...requiredProps}>children</KuiGalleryItem>;
+  expect(render(component)).toMatchSnapshot();
+});
diff --git a/...ery/gallery_button/gallery_button_icon.js → ...gallery/gallery_item/gallery_item_icon.js b/...ery/gallery_button/gallery_button_icon.js → ...gallery/gallery_item/gallery_item_icon.js
@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const KuiGalleryButtonIcon = ({ children, className, ...rest }) => {
-  const classes = classNames('kuiGalleryButton__icon','kuiIcon', className);
+export const KuiGalleryItemIcon = ({ children, className, ...rest }) => {
+  const classes = classNames('kuiGalleryItem__icon','kuiIcon', className);
   return (
     <div
       className={classes}
@@ -13,7 +13,7 @@ export const KuiGalleryButtonIcon = ({ children, className, ...rest }) => {
     </div>
   );
 };
-KuiGalleryButtonIcon.propTypes = {
+KuiGalleryItemIcon.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
 };