Add PatternFly Dropdown component...

[ddonahue007]

Hello,
I have been using DDF on a project with the PFMapper. I am using the Select component that has already been ported to DDF, but I am having a hard time trying to figure out how change the width. By default select component's styles have it using 100% width, this looks a bit funky and not what I would like as the final product. Can I just pass properties?

[Hyperkid123]

@ddonahue007 it looks like we are missing the customization API for the select component. To explain a bit more, there is usually an API that allows customizing the composite component of a component. You can check this component for example.

This API is missing in the PF4 select component. We should add it.

[rvsia]

You can pass a classname in FormGroupProps object to change the width.

[Hyperkid123]

For that, I would recommend using the global props.

const componentMapper = {
  select: {
    component: Select,
    FormGroupProps: {
      className: 'foo',
    },
  },
};

[ddonahue007]

Thanks worked like a charm, I ended up dong the following:

export default {
  fields: [
    {
      component: 'select',
      label: 'Select',
      name: 'select',
      simpleValue: true,
      FormGroupProps: {
        style: { width: '30%' },
      },
      options: [
        {
          label: 'Dogs',
          value: '1',
        },
        {
          label: 'Cats',
          value: '2',
        },
        {
          label: 'Hamsters',
          value: '3',
        },
      ],
    },
  ],
};