diff --git a/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js b/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js index 6a8da46ca9..81d6746381 100644 --- a/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js +++ b/packages/core/content-type-builder/admin/src/components/ComponentIconPicker/index.js @@ -104,7 +104,7 @@ const ComponentIconPicker = ({ error, isCreating, intlLabel, name, onChange, val ) : ( - } /> + } noBorder /> )} diff --git a/packages/core/content-type-builder/admin/src/components/SelectCategory/index.js b/packages/core/content-type-builder/admin/src/components/SelectCategory/index.js index ebbbe61ea8..ebe8f998a1 100644 --- a/packages/core/content-type-builder/admin/src/components/SelectCategory/index.js +++ b/packages/core/content-type-builder/admin/src/components/SelectCategory/index.js @@ -4,39 +4,45 @@ * */ -import React from 'react'; +import React, { useState } from 'react'; import { useIntl } from 'react-intl'; import PropTypes from 'prop-types'; -import { Select, Option } from '@strapi/parts/Select'; +import { ComboboxOption, CreatableCombobox } from '@strapi/parts/Combobox'; import useDataManager from '../../hooks/useDataManager'; -// FIXME replace with Creatable Combobox const SelectCategory = ({ error, intlLabel, name, onChange, value }) => { const { formatMessage } = useIntl(); const { allComponentsCategories } = useDataManager(); + const [categories, setCategories] = useState(allComponentsCategories); const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : ''; const label = formatMessage(intlLabel); + const handleChange = value => { + onChange({ target: { name, value, type: 'select-category' } }); + }; + + const handleCreateOption = value => { + setCategories(prev => [...prev, value]); + handleChange(value); + }; + return ( - + {categories.map(category => ( + + {category} + + ))} + ); };