InlineIconPicker: Control does not render

[benlk]

Describe the bug

Possibly related: #226

If I use an IconPicker in my code, it renders the control:

                                <IconPicker
                                    value={coverline_icon_2}
                                    onChange={( value )=> setAttributes( {coverline_icon_2: { name: value.name, iconSet: value.iconSet }} )}
                                    className="icon-preview"
                                />

But if I follow the instructions at https://github.com/10up/block-components/tree/develop/components/icon-picker :

The recommended approach for adding an icon picker to your custom block is using the InlineIconPicker as it delivers the best user experience.

With my code like so:

                                <InlineIconPicker
                                    value={coverline_icon_2}
                                    onChange={( value )=> setAttributes( {coverline_icon_2: { name: value.name, iconSet: value.iconSet }} )}
                                    className="icon-preview"
                                />

The space where the control would be is blank:

Steps to Reproduce

1. build a control with IconPicker
2. verify it works
3. change it to an InlineIconPicker
4. expectation: there is a control

result: no control, no error messages in the console other than #226

Screenshots, screen recording, code snippet

No response

Environment information

WP 6.2.2, no Gutenberg plugin.

Here's the dependencies from package.json:

  "dependencies": {
    "@10up/block-components": "^1.15.10",
    "@babel/polyfill": "^7.10.1",
    "@braintree/sanitize-url": "^5.0.2",
    "@wordpress/hooks": "^2.8.0",
    "10up-toolkit": "^4.3.1",
    "accessible-autocomplete": "^2.0.3",
    "axios": "^0.21.1",
    "howler": "^2.1.3",
    "lodash.debounce": "^4.0.8",
    "mark.js": "^8.11.1",
    "react-select": "^5.6.1"
  },
  "devDependencies": {
    "@10up/babel-preset-default": "^2.0.4"
  }

WordPress information

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[jdm-web]

Hello. Thank you for providing this component openly. I've tried to use it today, and I can confirm @benlk's report.

When using an InlineIconPicker, we cannot see the picker button on screen. I can see the components-dropdown div in the DOM, that also has the component-icon-picker-inline-button class. Inside, there's a div role=button.

Both have a size of 0x0, which makes them invisible.

Out ouf curiosity, I tried to set a CSS size to see if it would reveal something. It did not change much visually, but I could then click the zone, which opened the picker choices.

So there might be a little something to adjust to avoid rendering a non visible button.

Good luck and thank you.

[fabiankaegy]

@benlk Thank you for this report :) I have created #230 which fixes some of the other things you mentioned. I was not abe to replicate this particular issue here. Can you either share some more information on when exactly this happens and or test whether it is still happening with #230 applied?

I provided an alpha npm version you can download to test in your project.

[benlk]

I tested InlineIconPicker with #230 and the following code:

<InlineIconPicker
    value={coverline_icon_2}
    onChange={( value )=> setAttributes( {coverline_icon_2: { name: value.name, iconSet: value.iconSet }} )}
    className="icon-preview"
/>

The Inline icon picker renders invisibly:

If I set a height and width on the .component-icon-picker-inline-button, the button displays:

Hiding the button options behind a search isn't great; I like the grid presentation of IconPicker but wish there were an option to hide the search box.

[fabiankaegy]

This should be fixed with #275