Merge branch 'master' into fix-dialog-full-screen-animation

CHANGELOG.md

@@ -1,3 +1,25 @@
+### [66.19.1](https://github.com/Sage/carbon/compare/v66.19.0...v66.19.1) (2021-03-04)
+
+
+### Bug Fixes
+
+* fix dropdown alignment in split and multi action buttons ([a6caf26](https://github.com/Sage/carbon/commit/a6caf26be1d19104c7ba3e76cdcb0c8568e5d19f))
+
+## [66.19.0](https://github.com/Sage/carbon/compare/v66.18.1...v66.19.0) (2021-03-04)
+
+
+### Features
+
+* **select:** add multi column functionality ([736a109](https://github.com/Sage/carbon/commit/736a109ee2546f1d6f6e502aecb432aa0968e3b3))
+
+### [66.18.1](https://github.com/Sage/carbon/compare/v66.18.0...v66.18.1) (2021-03-02)
+
+
+### Bug Fixes
+
+* **tabs:** fix border gap ([7546b26](https://github.com/Sage/carbon/commit/7546b261d29ddbba3632a049252f9b80bf0ffb03))
+* **tabs:** fix incorrect large tab alignment ([bcc3101](https://github.com/Sage/carbon/commit/bcc3101be6bfad9c979871fc59738c9e9e6f25be))
+
 ## [66.18.0](https://github.com/Sage/carbon/compare/v66.17.0...v66.18.0) (2021-02-26)
 
 

cypress/features/regression/designSystem/filterableSelect.feature

@@ -6,7 +6,7 @@ Feature: Design System Filterable Select component
     Given I open "Design System Select filterable" component page "controlled" in no iframe
     When I type "A" into input
     Then "first" option on Select list is "Amber"
-      And "first" option on the list is highlighted
+      And "first" option on the list is hovered over
       And  "second" option on Select list is "Black"
       And  "third" option on Select list is "Orange"
 
@@ -108,7 +108,21 @@ Feature: Design System Filterable Select component
     Then "filterable" Select list is opened
 
   @positive
-  Scenario: Value is cleared when the filter does not match any options 
+  Scenario: Value is cleared when the filter does not match any options
     Given I open "Design System Select filterable" component page "controlled" in no iframe
     When I select value "xzw"
     Then Select input has no value
+
+  @positive
+  Scenario: Check that Filterable Select has multiColumns in option list
+    Given I open "Design System Select filterable" component page "with multiple columns" in no iframe
+    When I click on dropdown button
+    Then "filterable" Select list is opened
+      And Option list has multiColumns header
+      And Option list has multiColumns body
+
+  @positive
+  Scenario: The matching string is indicated with bold and underline
+    Given I open "Design System Select filterable" component page "with multiple columns" in no iframe
+    When I type "Do" into select input
+    Then The matching string "Do" is underline and bolded

cypress/features/regression/designSystem/multiSelect.feature

@@ -70,7 +70,7 @@ Feature: Design System Multi Select component
     When I type "A" into input
     Then multi Select list is opened
       And "first" option on Select list is "Amber"
-      And "first" option on the list is highlighted
+      And "first" option on the list is hovered over
       And "second" option on Select list is "Black"
       And "third" option on Select list is "Orange"
 
@@ -101,4 +101,18 @@ Feature: Design System Multi Select component
   Scenario: Lazy loading is visible after open the Multi Select
     Given I open "Design System Select multiselect" component page "with is loading prop" in no iframe
     When I click on dropdown button
-    Then Lazy loading is visible
+    Then Lazy loading is visible
+
+  @positive
+  Scenario: Check that Multi Select has multiColumns in option list
+    Given I open "Design System Select multiselect" component page "with multiple columns" in no iframe
+    When I click on dropdown button
+    Then multi Select list is opened
+      And Option list has multiColumns header
+      And Option list has multiColumns body
+
+  @positive
+  Scenario: The matching string is indicated with bold and underline
+    Given I open "Design System Select multiselect" component page "with multiple columns" in no iframe
+    When I type "Do" into select input
+    Then The matching string "Do" is underline and bolded

cypress/features/regression/designSystem/simpleSelect.feature

@@ -45,7 +45,7 @@ Feature: Design System Select component
       And I click on Select input
     When I type "<selectableValue>" into input
     Then Design system Select input has "<selectedValue>" value
-      And "<position>" option on the list is highlighted
+      And "<position>" option on the list is hovered over
     Examples:
       | selectableValue | selectedValue | position |
       | Amb             | Amber         | first    |
@@ -87,6 +87,14 @@ Feature: Design System Select component
   @positive
   Scenario: Check that options can be selected and displayed correctly when using an object as a value
     Given I open "Design System Select" component page "with object as value" in no iframe
-     And I click on dropdown button
+      And I click on dropdown button
     When I click on "first" option on Select list
     Then Select input has "Amber" value
+
+  @positive
+  Scenario: Check that Select has multiColumns in option list
+    Given I open "Design System Select" component page "with multiple columns" in no iframe
+    When I click on dropdown button
+    Then "simple" Select list is opened
+      And Option list has multiColumns header
+      And Option list has multiColumns body

cypress/locators/select/index.js

@@ -7,6 +7,7 @@ import {
   OPEN_ON_FOCUS_ID,
   MULTI_SELECT,
   IS_LOADING_ID,
+  SELECT_INPUT,
 } from "./locators";
 import { PILL_PREVIEW } from "../pill/locators";
 
@@ -35,3 +36,12 @@ export const multiSelectPillByPosition = (index) =>
 export const multiSelectDataComponent = () => cy.get(MULTI_SELECT);
 export const isLoading = () => cy.get(IS_LOADING_ID);
 export const selectListText = (text) => cy.get(SELECT_LIST).contains(text);
+export const multiColumnsSelectListHeader = () =>
+  selectList().find("thead > tr > th");
+export const multiColumnsSelectListBody = () =>
+  selectList().find("tbody > tr:nth-child(1) > td");
+export const boldedAndUnderlinedValue = (text) =>
+  selectList()
+    .find("tbody > tr:nth-child(1) > td:nth-child(2) > span")
+    .contains(text);
+export const selectInput = () => cy.get(SELECT_INPUT);

cypress/locators/select/locators.js

@@ -8,3 +8,4 @@ export const SELECT_LIST = '[data-element="select-list"]';
 export const SELECT = '[id="simple"]';
 export const OPEN_ON_FOCUS_ID = '[id="openOnFocus"]';
 export const IS_LOADING_ID = '[id="isLoading"]';
+export const SELECT_INPUT = '[data-element="select-input"]';

cypress/support/step-definitions/select-steps.js

@@ -17,6 +17,10 @@ import {
   multiSelectDataComponentInIframe,
   isLoading,
   selectListText,
+  multiColumnsSelectListHeader,
+  multiColumnsSelectListBody,
+  boldedAndUnderlinedValue,
+  selectInput,
 } from "../../locators/select";
 import { positionOfElement, keyCode } from "../helper";
 import { label, getDataElementByValue } from "../../locators";
@@ -88,7 +92,7 @@ When("I click on default Select input", () => {
 When("I click on Select input in noIframe", () => {
   simpleSelectNoIframe().click();
 });
-When("{string} option on the list is highlighted", (position) => {
+When("{string} option on the list is hovered over", (position) => {
   selectOption(positionOfElement(position))
     .should("have.attr", "aria-selected", "true")
     .and("have.css", "background-color", "rgb(242, 245, 246)");
@@ -220,3 +224,22 @@ Then("Select input has {string} value", (text) => {
 Then("Select input has no value", () => {
   getDataElementByValue("input").should("have.attr", "value", "");
 });
+
+Then("Option list has multiColumns header", () => {
+  multiColumnsSelectListHeader().should("have.length", "3").and("be.visible");
+});
+
+Then("Option list has multiColumns body", () => {
+  multiColumnsSelectListBody().should("have.length", "3").and("be.visible");
+});
+
+Then("The matching string {string} is underline and bolded", (text) => {
+  boldedAndUnderlinedValue(text)
+    .should("have.css", "text-decoration-line", "underline")
+    .and("have.css", "text-decoration-style", "solid")
+    .and("have.css", "font-weight", "700");
+});
+
+Then("I type {string} into select input", (text) => {
+  selectInput().type(text);
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "66.18.0",
+  "version": "66.19.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -135,7 +135,7 @@
     "xhr-mock": "git://github.com/resin-io-modules/xhr-mock.git#improvements"
   },
   "dependencies": {
-    "@popperjs/core": "^2.6.0",
+    "@popperjs/core": "^2.9.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.0",
     "axios": "^0.21.1",

src/__internal__/popover/popover.component.js

@@ -3,30 +3,6 @@ import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import { createPopper } from "@popperjs/core";
 
-// Temporary fix for Popper rounding issue described here:
-// https://github.com/popperjs/popper-core/pull/1213
-// https://github.com/popperjs/popper-core/issues/1169
-export const alignSameWidthPopoverFunction = ({ state }) => {
-  const refWidth = state.elements.reference.getBoundingClientRect().width;
-  const popperWidth = state.elements.popper.getBoundingClientRect().width;
-
-  /* istanbul ignore else */
-  if (refWidth === popperWidth) {
-    const rect = state.rects.reference.x;
-    const offset = state.modifiersData.popperOffsets.x;
-    const number = rect > offset ? rect : offset;
-    state.styles.popper.left = `${number}px`;
-  }
-};
-
-const alignSameWidthPopper = {
-  name: "alignSameWidthPopper",
-  enabled: true,
-  phase: "beforeWrite",
-  requires: ["computeStyles"],
-  fn: alignSameWidthPopoverFunction,
-};
-
 const Popover = ({
   children,
   placement,
@@ -84,11 +60,11 @@ const Popover = ({
           placement,
           onFirstUpdate,
           modifiers: [
-            alignSameWidthPopper,
             {
               name: "computeStyles",
               options: {
                 gpuAcceleration: false,
+                roundOffsets: false,
               },
             },
             ...(modifiers || []),

src/__internal__/popover/popover.spec.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import { mount } from "enzyme";
 import { createPopper } from "@popperjs/core";
 
-import Popover, { alignSameWidthPopoverFunction } from "./popover.component";
+import Popover from "./popover.component";
 
 jest.mock("@popperjs/core");
 
@@ -42,7 +42,8 @@ describe("Popover", () => {
     });
     it("does not render children in portal when disablePortal passed", () => {
       const createPortalSpy = jest.spyOn(ReactDOM, "createPortal");
-      mount(<Component disablePortal />);
+      const wrapper = mount(<Component disablePortal />);
+      wrapper.unmount();
       expect(createPortalSpy).not.toHaveBeenCalled();
     });
 
@@ -112,61 +113,3 @@ describe("Popover", () => {
     });
   });
 });
-
-describe("alignSameWidthPopoverFunction", () => {
-  const createState = (
-    referenceWidth,
-    popperWidth,
-    refRectX,
-    popperXoffset
-  ) => ({
-    elements: {
-      reference: {
-        getBoundingClientRect: () => ({
-          width: referenceWidth,
-        }),
-      },
-      popper: {
-        getBoundingClientRect: () => ({
-          width: popperWidth,
-        }),
-      },
-    },
-    rects: {
-      reference: {
-        x: refRectX,
-      },
-    },
-    modifiersData: {
-      popperOffsets: {
-        x: popperXoffset,
-      },
-    },
-    styles: {
-      popper: {
-        left: 0,
-      },
-    },
-  });
-  describe("when width of the reference is not the same as width of the content", () => {
-    it("does nothing", () => {
-      const state = createState(150, 200);
-      alignSameWidthPopoverFunction({ state });
-      expect(state.styles.popper.left).toBe(0);
-    });
-  });
-
-  describe("when width of the reference is the same as width of the content", () => {
-    it("modifies state so that left value is equal to rect reference x value when rect is bigger than offset", () => {
-      const state = createState(200, 200, 230, 220);
-      alignSameWidthPopoverFunction({ state });
-      expect(state.styles.popper.left).toBe(`${230}px`);
-    });
-
-    it("modifies state so that left value is equal to offset x value when offset is bigger than rect", () => {
-      const state = createState(200, 200, 230, 250);
-      alignSameWidthPopoverFunction({ state });
-      expect(state.styles.popper.left).toBe(`${250}px`);
-    });
-  });
-});

src/components/draggable/draggable.stories.mdx

@@ -83,7 +83,9 @@ import { DraggableContainer, DraggableItem } from "carbon-react/Draggable";
 
 ### with getOrder callback
 
-<Story id="design-system-draggable--draggable" name="with getOrder callback" />
+<Preview>
+  <Story name="with getOrder callback" id="design-system-draggable-test--default" />
+</Preview>
 
 ## DraggableContainer Props
 

src/components/select/filterable-select/filterable-select.component.js

@@ -35,6 +35,8 @@ const FilterableSelect = React.forwardRef(
       disabled,
       readOnly,
       onListScrollBottom,
+      tableHeader,
+      multiColumn,
       ...textboxProps
     },
     inputRef
@@ -464,6 +466,8 @@ const FilterableSelect = React.forwardRef(
         isLoading={isLoading}
         readOnly={readOnly}
         onListScrollBottom={onListScrollBottom}
+        tableHeader={tableHeader}
+        multiColumn={multiColumn}
       >
         {children}
       </FilterableSelectList>
@@ -501,12 +505,18 @@ FilterableSelect.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   /** The default selected value(s), when the component is operating in uncontrolled mode */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /** Child components (such as Option) for the SelectList */
+  /** Child components (such as Option or OptionRow) for the SelectList */
   children: PropTypes.node.isRequired,
   /** A custom callback for when the dropdown menu opens */
   onOpen: PropTypes.func,
   /** If true the Component opens on focus */
   openOnFocus: PropTypes.bool,
+  /** SelectList table header, should consist of multiple th elements.
+  Works only in multiColumn mode */
+  tableHeader: PropTypes.node,
+  /** When true component will work in multi column mode.
+  Children should consist of OptionRow components in this mode */
+  multiColumn: PropTypes.bool,
   /** A custom message to be displayed when any option does not match the filter text */
   noResultsMessage: PropTypes.string,
   /** True for default text button or a Button Component to be rendered */