feat(blocks): add stable release badge (#18484)

* feat: added stable release badge

* refactor: NewBadge component added

* fix: removed comments for blocks stable release

---------

Co-authored-by: Rémi de Juvigny <remi.dejuvigny@strapi.io>

packages/core/admin/admin/src/content-manager/components/BlocksEditor/Toolbar/index.js

@@ -1,15 +1,7 @@
 import * as React from 'react';
 
 import * as Toolbar from '@radix-ui/react-toolbar';
-import {
+import { Flex, Icon, Tooltip, SingleSelect, SingleSelectOption, Box } from '@strapi/design-system';
-  Flex,
-  Icon,
-  Tooltip,
-  SingleSelect,
-  SingleSelectOption,
-  Box,
-  Typography,
-} from '@strapi/design-system';
 import { pxToRem, prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
 import { Link } from '@strapi/icons';
 import PropTypes from 'prop-types';
@@ -632,15 +624,6 @@ LinkButton.propTypes = {
   disabled: PropTypes.bool.isRequired,
 };
 
-// TODO: Remove after the RTE Blocks Beta release
-const BetaTag = styled(Box)`
-  background-color: ${({ theme }) => theme.colors.secondary100};
-  border: ${({ theme }) => `1px solid ${theme.colors.secondary200}`};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  font-size: ${({ theme }) => theme.fontSizes[0]};
-  padding: ${({ theme }) => `${2 / 16}rem ${theme.spaces[1]}`};
-`;
-
 const BlocksToolbar = ({ disabled }) => {
   const modifiers = useModifiersStore();
   const blocks = useBlocksStore();
@@ -673,8 +656,7 @@ const BlocksToolbar = ({ disabled }) => {
 
   return (
     <Toolbar.Root aria-disabled={disabled} asChild>
-      {/* Remove after the RTE Blocks Beta release (paddingRight and width) */}
+      <ToolbarWrapper gap={2} padding={2}>
-      <ToolbarWrapper gap={2} padding={2} paddingRight={4} width="100%">
         <BlocksDropdown disabled={disabled} />
         <Separator />
         <Toolbar.ToggleGroup type="multiple" asChild>
@@ -700,14 +682,6 @@ const BlocksToolbar = ({ disabled }) => {
             <ListButton block={blocks['list-ordered']} disabled={disabled} />
           </Flex>
         </Toolbar.ToggleGroup>
-        {/* TODO: Remove after the RTE Blocks Beta release */}
-        <Flex grow={1} justifyContent="flex-end">
-          <BetaTag>
-            <Typography textColor="secondary600" variant="sigma">
-              BETA
-            </Typography>
-          </BetaTag>
-        </Flex>
       </ToolbarWrapper>
     </Toolbar.Root>
   );

packages/core/content-type-builder/admin/src/components/AttributeOptions/AttributeOption/index.js

@@ -6,24 +6,35 @@
 
 import React from 'react';
 
-import { Box, Flex, Typography } from '@strapi/design-system';
+import { Box, Flex, Typography, Icon } from '@strapi/design-system';
+import { Spark } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 
 import useFormModalNavigation from '../../../hooks/useFormModalNavigation';
 import getTrad from '../../../utils/getTrad';
 import AttributeIcon from '../../AttributeIcon';
 import OptionBoxWrapper from '../OptionBoxWrapper';
 
-// TODO: Remove after the RTE Blocks Beta release
+// TODO: remove blocks from array on 4.16 release (after blocks stable)
-const BetaTag = styled(Box)`
+const newAttributes = ['blocks'];
-  background-color: ${({ theme }) => theme.colors.secondary100};
+
-  border: ${({ theme }) => `1px solid ${theme.colors.secondary200}`};
+const NewBadge = () => (
-  border-radius: ${({ theme }) => theme.borderRadius};
+  <Flex grow={1} justifyContent="flex-end">
-  font-size: ${({ theme }) => theme.fontSizes[0]};
+    <Flex
-  padding: ${({ theme }) => `${2 / 16}rem ${theme.spaces[1]}`};
+      gap={1}
-`;
+      fontSizes={0}
+      hasRadius
+      background="alternative100"
+      padding={`${2 / 16}rem ${4 / 16}rem`}
+    >
+      <Icon width={`${10 / 16}rem`} height={`${10 / 16}rem`} as={Spark} color="alternative600" />
+      <Typography textColor="alternative600" variant="sigma">
+        New
+      </Typography>
+    </Flex>
+  </Flex>
+);
 
 const AttributeOption = ({ type }) => {
   const { formatMessage } = useIntl();
@@ -43,23 +54,13 @@ const AttributeOption = ({ type }) => {
     <OptionBoxWrapper padding={4} as="button" hasRadius type="button" onClick={handleClick}>
       <Flex>
         <AttributeIcon type={type} />
-        {/* TODO: Remove after the RTE Blocks Beta release (width) */}
         <Box paddingLeft={4} width="100%">
-          {/* TODO: Remove after the RTE Blocks Beta release (justifyContent) */}
           <Flex justifyContent="space-between">
             <Typography fontWeight="bold">
               {formatMessage({ id: getTrad(`attribute.${type}`), defaultMessage: type })}
             </Typography>
-            {/* Remove after the RTE Blocks Beta release */}
+            {newAttributes.includes(type) && <NewBadge />}
-            {type === 'blocks' && (
-              <BetaTag>
-                <Typography textColor="secondary600" variant="sigma">
-                  BETA
-                </Typography>
-              </BetaTag>
-            )}
           </Flex>
-
           <Flex>
             <Typography variant="pi" textColor="neutral600">
               {formatMessage({

packages/core/content-type-builder/admin/src/components/FormModal/index.js

@@ -13,7 +13,6 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
-  Alert,
 } from '@strapi/design-system';
 import {
   getYupInnerErrors,
@@ -30,7 +29,6 @@ import toLower from 'lodash/toLower';
 import { useIntl } from 'react-intl';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
 
 import useDataManager from '../../hooks/useDataManager';
 import useFormModalNavigation from '../../hooks/useFormModalNavigation';
@@ -78,13 +76,6 @@ import makeSelectFormModal from './selectors';
 import { canEditContentType, getAttributesToDisplay, getFormInputNames } from './utils';
 import { createComponentUid, createUid } from './utils/createUid';
 
-// TODO: Remove after the RTE Blocks Beta release
-const BetaFeatureAlert = styled(Alert)`
-  button {
-    display: none;
-  }
-`;
-
 /* eslint-disable indent */
 /* eslint-disable react/no-array-index-key */
 const FormModal = () => {
@@ -1072,15 +1063,6 @@ const FormModal = () => {
                 <TabPanels>
                   <TabPanel>
                     <Flex direction="column" alignItems="stretch" gap={6}>
-                      {/* TODO: Remove after the RTE Blocks Beta release */}
-                      {attributeType === 'blocks' && (
-                        <BetaFeatureAlert>
-                          {formatMessage({
-                            id: getTrad('form.feature.beta'),
-                            defaultMessage: 'This feature is in Beta.',
-                          })}
-                        </BetaFeatureAlert>
-                      )}
                       <TabForm
                         form={baseForm}
                         formErrors={formErrors}
@@ -1092,15 +1074,6 @@ const FormModal = () => {
                   </TabPanel>
                   <TabPanel>
                     <Flex direction="column" alignItems="stretch" gap={6}>
-                      {/* TODO: Remove after the RTE Blocks Beta release */}
-                      {attributeType === 'blocks' && (
-                        <BetaFeatureAlert>
-                          {formatMessage({
-                            id: getTrad('form.feature.beta'),
-                            defaultMessage: 'This feature is in Beta.',
-                          })}
-                        </BetaFeatureAlert>
-                      )}
                       <TabForm
                         form={advancedForm}
                         formErrors={formErrors}

packages/core/content-type-builder/admin/src/translations/en.json

@@ -134,7 +134,6 @@
   "form.button.select-component": "Select a component",
   "form.button.single-type.description": "Best for single instance like about us, homepage, etc.",
   "form.button.single-type.name": "Single Type",
-  "form.feature.beta": "This feature is in Beta.",
   "from": "from",
   "listView.headerLayout.description": "Build the data architecture of your content",
   "menu.section.components.name": "Components",