GH-966 - Removing empty placeholders (#1008)

* GH-966 - Removing empty placeholders

* Updating test

Co-authored-by: Hossein <hahmadia@users.noreply.github.com>

webapp/src/components/properties/dateRange/__snapshots__/dateRange.test.tsx.snap

@@ -44,7 +44,9 @@ exports[`components/properties/dateRange returns default correctly 1`] = `
       type="button"
     >
       <span>
-        Empty
+        <span
+          title="Empty"
+        />
       </span>
     </button>
   </div>

webapp/src/components/properties/dateRange/dateRange.scss

@@ -1,10 +1,14 @@
 .DateRange {
+    width: 100%;
+    display: flex;
+
     .octo-propertyvalue {
         white-space: none;
     }
 
     .inputContainer {
         display: flex;
+
         .Editable {
             width: 50% !important;
         }
@@ -17,13 +21,16 @@
         min-height: 24px;
         width: 100%;
         margin: 2px;
+
         &.active {
             min-width: 100px;
         }
+
         &::placeholder {
             color: rgba(var(--body-color), 0.4);
             opacity: 1;
         }
+
         &.error {
             border: 1px solid var(--error-color);
             border-radius: var(--default-rad);
@@ -40,10 +47,16 @@
     .Button {
         width: 100%;
         justify-content: left;
+
+        &.--empty {
+            opacity: 0;
+        }
+
         &:hover {
             background-color: transparent;
         }
     }
+
     .menu-option {
         display: flex;
         flex-direction: row;
@@ -90,8 +103,7 @@
         }
     }
 
-    .DayPicker {
-    }
+    .DayPicker {}
 
     .DayPickerInput-Overlay {
         background-color: rgba(var(--center-channel-bg-rgb));
@@ -105,51 +117,62 @@
         display: flex;
         flex-direction: column;
     }
+
     .DayPicker-Body {
         display: flex;
         flex-direction: column;
     }
+
     .DayPicker-WeekdaysRow {
         display: flex;
         flex-direction: row;
     }
+
     .DayPicker-Weekday {
         display: block;
         width: 36px;
         height: 36px;
     }
+
     .DayPicker-Week {
         display: flex;
         flex-direction: row;
     }
+
     .DayPicker-Day {
         border-radius: unset;
         display: block;
         width: 36px;
         height: 36px;
     }
+
     .DayPicker-Day--today {
         color: #c74655;
     }
+
     .DayPicker-Day--start {
         border-top-left-radius: 50% !important;
         border-bottom-left-radius: 50% !important;
     }
+
     .DayPicker-Day--end {
         border-top-right-radius: 50% !important;
         border-bottom-right-radius: 50% !important;
     }
+
     .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
-        background-color: rgb(var(--button-bg-rgb));;
+        background-color: rgb(var(--button-bg-rgb));
+        ;
         color: rgba(var(--button-color-rgb), 0.5);
     }
+
     .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
-        color: rgb(var(--button-bg-rgb));;
+        color: rgb(var(--button-bg-rgb));
+        ;
         background-color: rgba(var(--button-bg-rgb), 0.2);
     }
 
-    .DayPicker:not(.DayPicker--interactionDisabled)
-      .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
+    .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
         background-color: rgba(var(--body-color), 0.2);
     }
 }

webapp/src/components/properties/dateRange/dateRange.test.tsx

@@ -68,7 +68,7 @@ describe('components/properties/dateRange', () => {
         const fifteenth = Date.UTC(date.getFullYear(), date.getMonth(), 15, 12)
 
         const {getByText, getByTitle} = render(component)
-        const dayDisplay = getByText('Empty')
+        const dayDisplay = getByTitle('Empty')
         userEvent.click(dayDisplay)
 
         const day = getByText('15')
@@ -92,7 +92,7 @@ describe('components/properties/dateRange', () => {
 
         // open modal
         const {getByText, getByTitle} = render(component)
-        const dayDisplay = getByText('Empty')
+        const dayDisplay = getByTitle('Empty')
         userEvent.click(dayDisplay)
 
         // select start date

webapp/src/components/properties/dateRange/dateRange.tsx

@@ -156,7 +156,7 @@ function DateRange(props: Props): JSX.Element {
             <Button
                 onClick={() => setShowDialog(true)}
             >
-                {displayValue || intl.formatMessage({id: 'DateRange.empty', defaultMessage: 'Empty'})}
+                {displayValue || <span title={intl.formatMessage({id: 'DateRange.empty', defaultMessage: 'Empty'})}/>}
             </Button>
 
             {showDialog &&

webapp/src/components/properties/link/link.tsx

@@ -36,7 +36,7 @@ const URLProperty = (props: Props): JSX.Element => {
         <div className='URLProperty property-link url'>
             <Editable
                 className='octo-propertyvalue'
-                placeholderText='Empty'
+                placeholderText=''
                 value={props.value}
                 onChange={props.onChange}
                 onSave={props.onSave}

webapp/src/components/propertyValueElement.tsx

@@ -259,7 +259,7 @@ const PropertyValueElement = (props:Props): JSX.Element => {
             return (
                 <Editable
                     className='octo-propertyvalue'
-                    placeholderText='Empty'
+                    placeholderText=''
                     value={value as string}
                     onChange={setValue}
                     onSave={saveTextProperty}