Merge pull request #2744 from SUI-Components/feat/add-shape-prop-to-s…

…elect-popover

Feat/add shape prop to select popover

components/molecule/selectPopover/demo/index.js

@@ -4,6 +4,7 @@ import {useRef, useState} from 'react'
 import MoleculeSelectPopover, {
  selectPopoverOverlayTypes,
  selectPopoverPlacements,
+ selectPopoverShapes,
  selectPopoverSizes
 } from 'components/molecule/selectPopover/src/index.js'
 
@@ -36,6 +37,7 @@ const CustomRenderActions = ({cancelButtonText, onCancel, onAccept, acceptButton
 const Demo = () => {
  const [items, setItems] = useState(demoExample)
  const [unconfirmedItems, setUnconfirmedItems] = useState(demoExample)
+ const [shape, setShape] = useState(selectPopoverShapes.CIRCULAR)
  const [size, setSize] = useState(selectPopoverSizes.MEDIUM)
  const [placement, setPlacement] = useState(selectPopoverPlacements.RIGHT)
  const [hasEvents, setHasEvents] = useState(false)
@@ -104,6 +106,20 @@ const Demo = () => {
  <div className="sui-StudioPreview-content sui-StudioDemo-preview">
  <h1>Select Popover</h1>
  <h3>Props</h3>
+ <label>Shape</label>
+ <MoleculeSelect
+ value={shape}
+ onChange={(ev, {value}) => setShape(value)}
+ placeholder="Select a shape..."
+ iconArrowDown={<IconArrowDown />}
+ >
+ {Object.keys(selectPopoverShapes).map(key => (
+ <MoleculeSelectOption key={key} value={selectPopoverShapes[key]}>
+ {key}
+ </MoleculeSelectOption>
+ ))}
+ </MoleculeSelect>
+ <br />
  <label>Size</label>
  <MoleculeSelect
  value={size}
@@ -244,6 +260,7 @@ const Demo = () => {
  overlayType={overlayType}
  placement={placement}
  selectText={selectText}
+ shape={shape}
  size={size}
  renderActions={hasCustomRenderActions ? <CustomRenderActions /> : undefined}
  >

components/molecule/selectPopover/src/_settings.scss

@@ -1,4 +1,7 @@
 $bdrs-select-popover: 20px !default;
+$bdrs-select-popover-squared: 0px !default;
+$bdrs-select-popover-rounded: 8px !default;
+$bdrs-select-popover-circular: 20px !default;
 $bdrs-select-popover-content: 0px !default;
 $bxsh-select-popover: 0 1px 4px 0 rgba(0, 0, 0, 0.24) !default;
 $mw-select-popover: 250px !default;

components/molecule/selectPopover/src/config.js

@@ -1,5 +1,11 @@
 export const BASE_CLASS = 'sui-MoleculeSelectPopover'
 
+export const SHAPES = {
+ SQUARED: 'squared',
+ ROUNDED: 'rounded',
+ CIRCULAR: 'circular'
+}
+
 export const SIZES = {
  MEDIUM: 'm',
  SMALL: 's',

components/molecule/selectPopover/src/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 
 import usePortal from '@s-ui/react-hook-use-portal'
 
-import {BASE_CLASS, getPlacement, OVERLAY_TYPES, PLACEMENTS, SIZES} from './config.js'
+import {BASE_CLASS, getPlacement, OVERLAY_TYPES, PLACEMENTS, SHAPES, SIZES} from './config.js'
 import RenderActions from './RenderActions.js'
 
 function usePrevious(value) {
@@ -45,6 +45,7 @@ const MoleculeSelectPopover = ({
  renderSelect: renderSelectProp,
  renderActions: renderActionsProp,
  selectText,
+ shape,
  size = 'm',
  title
 }) => {
@@ -154,10 +155,15 @@ const MoleculeSelectPopover = ({
  const renderSelect = () => {
  const newSelectProps = {
  ref: selectRef,
- className: cx(`${BASE_CLASS}-select`, `${BASE_CLASS}-select--${size}`, {
- 'is-open': isOpen,
- 'is-selected': isSelected
- }),
+ className: cx(
+ `${BASE_CLASS}-select`,
+ shape && `${BASE_CLASS}-select--${shape}`,
+ `${BASE_CLASS}-select--${size}`,
+ {
+ 'is-open': isOpen,
+ 'is-selected': isSelected
+ }
+ ),
  onClick: handleOpenToggle
  }
 
@@ -178,10 +184,15 @@ const MoleculeSelectPopover = ({
 
  return (
  <div
- className={cx(`${BASE_CLASS}-select`, `${BASE_CLASS}-select--${size}`, {
- 'is-open': isOpen,
- 'is-selected': isSelected
- })}
+ className={cx(
+ `${BASE_CLASS}-select`,
+ shape && `${BASE_CLASS}-select--${shape}`,
+ `${BASE_CLASS}-select--${size}`,
+ {
+ 'is-open': isOpen,
+ 'is-selected': isSelected
+ }
+ )}
  {...newSelectProps}
  >
  <span className={`${BASE_CLASS}-selectText`}>{selectText}</span>
@@ -295,6 +306,7 @@ MoleculeSelectPopover.propTypes = {
  renderSelect: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  renderActions: PropTypes.node,
  selectText: PropTypes.string.isRequired,
+ shape: PropTypes.oneOf(Object.values(SHAPES)),
  size: PropTypes.string,
  title: PropTypes.string
 }
@@ -303,6 +315,7 @@ export default MoleculeSelectPopover
 export {
  OVERLAY_TYPES as selectPopoverOverlayTypes,
  PLACEMENTS as selectPopoverPlacements,
+ SHAPES as selectPopoverShapes,
  SIZES as selectPopoverSizes,
  RenderActions
 }

components/molecule/selectPopover/src/styles/index.scss

@@ -25,6 +25,18 @@ $base-class: '.sui-MoleculeSelectPopover ';
  padding: $p-m $p-l;
  user-select: none;
 
+ &--squared {
+ border-radius: $bdrs-select-popover-squared;
+ }
+
+ &--rounded {
+ border-radius: $bdrs-select-popover-rounded;
+ }
+
+ &--circular {
+ border-radius: $bdrs-select-popover-circular;
+ }
+
  &Text {
  overflow: hidden;
  text-overflow: ellipsis;

components/molecule/selectPopover/test/index.test.js

@@ -29,6 +29,7 @@ describe(json.name, () => {
  'selectPopoverOverlayTypes',
  'selectPopoverSizes',
  'selectPopoverPlacements',
+ 'selectPopoverShapes',
  'RenderActions',
  'default'
  ]
@@ -38,6 +39,7 @@ describe(json.name, () => {
  selectPopoverOverlayTypes,
  selectPopoverSizes,
  selectPopoverPlacements,
+ selectPopoverShapes,
  RenderActions,
  default: MoleculeSelectPopover,
  ...others