npm - box-ui-elements - Versions diffs - 14.0.0 → 14.1.0-beta.11 - Mend

@@ -73,6 +73,37 @@ describe('components/button/Button', () => {
         expect(wrapper.prop('type')).toEqual('submit');
     });
+    test('should add modifier class when size is "large"', () => {
+        const wrapper = shallow(<Button size="large">Click Here</Button>);
+        expect(wrapper.prop('className')).toEqual('btn bdl-btn--large');
+    });
+    test('should render icon in icon container if icon prop is set', () => {
+        const FakeIcon = (props: Record<string, unknown>) => <svg {...props} />;
+        const wrapper = shallow(<Button icon={<FakeIcon />} />);
+        const iconContainer = wrapper.find('.bdl-btn-icon');
+        const { width, height } = iconContainer.find('FakeIcon').props();
+        expect(wrapper.props().className).toEqual('btn bdl-has-icon');
+        expect(iconContainer.length).toBe(1);
+        expect(width).toEqual(height);
+        expect(width).toEqual(20);
+    });
+    test('should render icon next to text if icon and children props are both set', () => {
+        const FakeIcon = (props: Record<string, unknown>) => <svg {...props} />;
+        const wrapper = shallow(<Button icon={<FakeIcon />}>Click Here</Button>);
+        const iconContainer = wrapper.find('.bdl-btn-icon');
+        const textContainer = wrapper.find('.btn-content');
+        const { width, height } = iconContainer.find('FakeIcon').props();
+        expect(iconContainer.length).toBe(1);
+        expect(textContainer.length).toBe(1);
+        expect(width).toEqual(height);
+        expect(width).toEqual(16);
+        expect(wrapper).toMatchSnapshot();
+    });
     test('should set aria-disabled to true when isDisabled is true', () => {
         const wrapper = shallow(<Button isDisabled />);

@@ -22,3 +22,25 @@ exports[`components/button/Button should render a RadarAnimation if showRadar is
   </button>
 </RadarAnimation>
 `;
+exports[`components/button/Button should render icon next to text if icon and children props are both set 1`] = `
+<button
+  className="btn bdl-has-icon"
+  onClick={[Function]}
+  type="submit"
+>
+  <span
+    className="btn-content"
+  >
+    Click Here
+  </span>
+  <span
+    className="bdl-btn-icon"
+  >
+    <FakeIcon
+      height={16}
+      width={16}
+    />
+  </span>
+</button>
+`;

@@ -15,7 +15,7 @@
             margin-left: 0;
             padding-right: 11px;
             padding-left: 11px;
-            border-radius: 0 4px 4px 0;
+            border-radius: 0 $bdl-border-radius-size-med $bdl-border-radius-size-med 0;
             &.btn-primary {
                 border-left-color: darken($primary-color, 10%);
@@ -65,13 +65,13 @@
         }
         > .btn:first-child {
-            border-top-left-radius: 4px;
-            border-bottom-left-radius: 4px;
+            border-top-left-radius: $bdl-border-radius-size-med;
+            border-bottom-left-radius: $bdl-border-radius-size-med;
         }
         > .btn:last-child {
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 4px;
+            border-top-right-radius: $bdl-border-radius-size-med;
+            border-bottom-right-radius: $bdl-border-radius-size-med;
         }
         > .btn.is-selected {

@@ -22,7 +22,7 @@ export const disabled = () => (
 );
 export default {
-    title: 'Components|ButtonGroup',
+    title: 'Components|Buttons/ButtonGroup',
     component: ButtonGroup,
     parameters: {
         notes,

@@ -1,5 +1,3 @@
-import puppeteer from 'puppeteer';
 describe('components/context-menu/ContextMenu', () => {
     const CONTEXT_MENU_STORIES = ['components-contextmenu--basic', 'components-contextmenu--with-submenu'];
@@ -9,9 +7,7 @@ describe('components/context-menu/ContextMenu', () => {
     });
     test.each(CONTEXT_MENU_STORIES)('looks visually correct when right-clicking on story %s', async id => {
-        const browser = await puppeteer.launch({});
-        const page = await browser.newPage();
-        await page.goto(`http://localhost:6061/iframe.html?id=${id}`);
+        const page = await BoxVisualTestUtils.gotoStory(id);
         await page.waitForSelector('.context-menu-example-target');
         const coords = await page.evaluate(() => {
             const el = document.querySelector('.context-menu-example-target');
@@ -24,7 +20,6 @@ describe('components/context-menu/ContextMenu', () => {
         await page.mouse.click(coords.x + 400, coords.y + 10, { button: 'right' });
         await page.waitForSelector('.context-menu-element');
         const image = await page.screenshot();
-        browser.close();
         return expect(image).toMatchImageSnapshot();
     });
 });

@@ -1,5 +1,3 @@
-import puppeteer from 'puppeteer';
 describe('components/date-picker/DatePicker', () => {
     const INPUT_SELECTOR = 'input';
     const DATEPICKER_STORIES = [
@@ -28,14 +26,11 @@ describe('components/date-picker/DatePicker', () => {
     });
     test(`allows editing in story ${DATEPICKER_STORIES[2]}`, async () => {
-        const browser = await puppeteer.launch();
-        const page = await browser.newPage();
-        await page.goto(`http://localhost:6061/iframe.html?id=${DATEPICKER_STORIES[2]}`);
+        const page = await BoxVisualTestUtils.gotoStory(DATEPICKER_STORIES[2]);
         await page.waitForSelector(INPUT_SELECTOR);
         await BoxVisualTestUtils.clearInput(INPUT_SELECTOR, page);
         await page.type(INPUT_SELECTOR, '1/28/2020');
         const image = await page.screenshot();
-        await browser.close();
         return expect(image).toMatchImageSnapshot();
     });
@@ -50,16 +45,13 @@ describe('components/date-picker/DatePicker', () => {
     });
     test(`allows keyboard selection in ${DATEPICKER_STORIES[4]}`, async () => {
-        const browser = await puppeteer.launch();
-        const page = await browser.newPage();
-        await page.goto(`http://localhost:6061/iframe.html?id=${DATEPICKER_STORIES[4]}`);
+        const page = await BoxVisualTestUtils.gotoStory(DATEPICKER_STORIES[4]);
         await page.waitForSelector(INPUT_SELECTOR);
         await page.keyboard.down('Tab');
         await page.keyboard.down('Tab');
         await page.keyboard.down('ArrowLeft');
         await page.keyboard.down('ArrowUp');
         const image = await page.screenshot();
-        await browser.close();
         return expect(image).toMatchImageSnapshot();
     });
 });

@@ -15,6 +15,7 @@
     background: $white;
     border: 1px solid $bdl-gray-30;
     border-bottom-color: $bdl-gray-50;
+    border-radius: $bdl-border-radius-size-med;
     &.is-hidden {
         display: none;
@@ -188,7 +189,7 @@
     color: $white;
     font-weight: bold;
     background-color: $primary-color;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size-med;
     cursor: pointer;
 }

@@ -10,7 +10,7 @@
     width: 262px;
     padding: 8px 10px;
     border: 1px solid $bdl-gray-20;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 }
 .draft-js-editor {

@@ -11,7 +11,7 @@
     padding: 40px;
     overflow: hidden;
     border: 1px dashed $bdl-gray-50;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size-med;
     .error-mask-sad-cloud {
         margin-bottom: 20px;

@@ -12,7 +12,7 @@
     .overlay {
         padding: 15px;
-        border-radius: $bdl-border-radius-size;
+        border-radius: $bdl-border-radius-size-med;
     }
     &.flyout-overlay-target-attached-left,

@@ -8,7 +8,7 @@
     height: 32px;
     margin: 0 15px;
     background: $bdl-gray-80;
-    border-radius: 4px 4px 0 0;
+    border-radius: $bdl-border-radius-size $bdl-border-radius-size 0 0;
 }
 .bdl-FooterIndicator-content {

@@ -16,9 +16,18 @@
         position: absolute;
         z-index: 90;
         width: 100%;
-        padding: 8px;
+        margin-top: $bdl-grid-unit * 2;
+        padding: $bdl-grid-unit * 2;
         background: $white;
         border: 1px solid $bdl-gray-30;
+        border-radius: $bdl-border-radius-size-med;
         box-shadow: 0 2px 6px 0 fade-out($black, .9);
     }
+    // Normally .bdl-SelectorDropdown > .text-input-container has a bottom margin
+    // but the custom text box (DraftJSEditor) doesn't have one.
+    // Add spacing above dropdown wrapper here instead:
+    .overlay {
+        margin-top: $bdl-grid-unit * 2;
+    }
 }

@@ -21,6 +21,7 @@ type Props = {|
     ...$Exact<TooltipProps>,
     body: React.Node,
     icon?: React.Node,
+    image?: React.Node,
     primaryButtonProps?: React.ElementConfig<typeof Button>,
     secondaryButtonProps?: React.ElementConfig<typeof Button>,
     steps?: [number, number],
@@ -32,6 +33,7 @@ function GuideTooltip({
     children,
     className = '',
     icon,
+    image,
     isShown = true,
     primaryButtonProps,
     steps,
@@ -51,6 +53,7 @@ function GuideTooltip({
                     {icon && <div className="bdl-GuideTooltip-icon">{icon}</div>}
                     <div className="bdl-GuideTooltip-right">
                         {title && <div className="bdl-GuideTooltip-title">{title}</div>}
+                        {!icon && image && <div className="bdl-GuideTooltip-image">{image}</div>}
                         <div className="bdl-GuideTooltip-body">{body}</div>
                         {(secondaryButtonProps || primaryButtonProps || steps) && (
                             <div className="bdl-GuideTooltip-bottom">

@@ -1,11 +1,13 @@
 @import '../../styles/variables';
+$bdl-guide-tooltip-max-width: 408px;
 .bdl-GuideTooltip {
     display: flex;
 }
 .bdl-GuideTooltip.bdl-Tooltip {
-    max-width: 408px;
+    max-width: $bdl-guide-tooltip-max-width;
     padding: ($bdl-grid-unit * 6) ($bdl-grid-unit * 12) ($bdl-grid-unit * 6) ($bdl-grid-unit * 6);
 }
@@ -21,6 +23,17 @@
     margin-right: ($bdl-grid-unit * 4);
 }
+.bdl-GuideTooltip-image {
+    margin-right: -($bdl-grid-unit * 6);
+    margin-left: -($bdl-grid-unit * 6);
+    padding: ($bdl-grid-unit * 4) 0 ($bdl-grid-unit * 5) 0;
+    text-align: center;
+    img {
+        max-width: $bdl-guide-tooltip-max-width;
+    }
+}
 .bdl-GuideTooltip-title {
     padding-bottom: ($bdl-grid-unit * 2);
     font-weight: bold;

box-ui-elements 14.0.0 → 14.1.0-beta.11