fix: required items field is not marked (#746)

* fix: required items field is not marked

* fix: use tailwind

* fix: test case change

Author: hujiahao-hjh

shell/app/common/__tests__/components/edit-field.test.tsx

@@ -43,14 +43,14 @@ describe('EditField', () => {
     );
     wrapper.find('.common-edit-field').children('div').at(1).simulate('click');
     expect(wrapper.find('.suffix')).toExist();
-    expect(wrapper.find('.ant-form-item-required')).toExist();
+    expect(wrapper.find('[data-required="* "]')).toExist();
     expect(wrapper.find('.color-text-sub')).toExist();
     expect(wrapper.find('input').prop('value')).toBe('erda.cloud');
     wrapper.setProps({
       labelStyle: undefined,
       showRequiredMark: false,
     });
-    expect(wrapper.find('.ant-form-item-required')).not.toExist();
+    expect(wrapper.find('[data-required="* "]')).not.toExist();
     expect(wrapper.find('.color-text')).toExist();
     wrapper.setProps({
       value: undefined,

shell/app/common/components/edit-field.tsx

@@ -281,10 +281,11 @@ export const EditField = React.forwardRef((props: IProps, _compRef) => {
     <div className={`common-edit-field ${className}`}>
       {label && (
         <div
+          data-required={showRequiredMark ? '* ' : ''}
           className={classnames(
             labelStyle === 'desc' ? 'color-text-sub' : 'color-text',
             'mb4',
-            showRequiredMark ? 'ant-form-item-required' : '',
+            showRequiredMark ? 'before:required' : '',
           )}
           style={{ paddingLeft: '10px' }}
         >

shell/tailwind.config.js

@@ -106,6 +106,13 @@ module.exports = {
     extend: {},
   },
   plugins: [
+    plugin(({ addVariant, e }) => {
+      addVariant('before', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`before${separator}${className}`)}::before`;
+        });
+      });
+    }),
     plugin(({ addUtilities }) => {
       const newUtilities = {
         '.nowrap': {
@@ -118,8 +125,15 @@ module.exports = {
           cursor: 'not-allowed',
         },
       };
+      const contentUtilities = {
+        '.required': {
+          content: 'attr(data-required)',
+          color: '#f5222d',
+        },
+      };
 
       addUtilities(newUtilities, ['responsive', 'hover']);
+      addUtilities(contentUtilities, ['before']);
     }),
   ],
   purge: {