Contents

import React, { useState } from 'react'
import { Dropdown } from '../..'

const DropdownWithCustomPadding = (props) => {
// eslint-disable-next-line no-unused-vars
const [selectedOption, setSelectedOption] = useState();

  const options = [
    {
      label: "United States",
      value: "United States",
      areaCode: "+1",
      icon: "🇺🇸",
      id: "United-states"
    },
    {
      label: "Canada",
      value: "Canada",
      areaCode: "+1",
      icon: "🇨🇦",
      id: "canada"
    },
    {
      label: "Pakistan",
      value: "Pakistan",
      areaCode: "+92",
      icon: "🇵🇰",
      id: "pakistan"
    }
  ];  


  return (
  <div>
    <Dropdown
        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
        options={options}
        {...props}
    >
      {options.map((option) => (
        <Dropdown.Option key={option.id} 
            option={option}
            padding="sm"
        /> 
      ))}
    </Dropdown>
  </div>
  )
}

export default DropdownWithCustomPadding

Version data entries

6 entries across 6 versions & 2 rubygems

Version	Path
playbook_ui_docs-13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2785	app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
playbook_ui-13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2785	app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
playbook_ui_docs-13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783	app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
playbook_ui-13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783	app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
playbook_ui_docs-13.25.0.pre.alpha.barchartfix2766	app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx
playbook_ui-13.25.0.pre.alpha.barchartfix2766	app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx