wrap editable list values (#212)

lib/sass/form/components/EditableList2/sass/EditableList2.scss

@@ -45,8 +45,15 @@
 
     &-cell {
       border-left: 1px solid theme-color('default', 'light');
+      overflow: hidden;
       padding: 0 10px;
 
+      .tyk-form-control--readonly {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+      }
+
       &:first-child {
         border-left: none;
         padding-left: 15px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tyk-technologies/tyk-ui",
-  "version": "2.2.10",
+  "version": "2.2.11",
   "description": "Tyk UI - ui reusable components",
   "main": "lib/index.js",
   "scripts": {

src/form/components/Combobox2/js/Value.js

@@ -164,7 +164,7 @@ function Value(props) {
   }, [focus]);
 
   if (readOnly) {
-    return <div>{textValue(value.map(v => v.name).join(', '))}</div>;
+    return <div className="tyk-form-control--readonly">{textValue(value.map(v => v.name).join(', '))}</div>;
   }
 
   if (tags) return getTags();

src/form/components/DatePicker/index.js

@@ -244,7 +244,7 @@ const DatePicker = (props) => {
             </div>
           )
       }
-      <div>
+      <div className="tyk-form-control--readonly">
         {readOnly && !value && '-'}
         {readOnly && value && format(value, config.dateFormat || 'd/m/Y')}
       </div>

src/form/components/EditableList2/Readme.md

@@ -204,7 +204,7 @@
         ]
     ],
     [
-        "aaaaa",
+        "407408718192.apps.googleusercontent.com",
         [
             {
                 "id": "333",

src/form/components/EditableList2/sass/EditableList2.scss

@@ -45,8 +45,15 @@
 
     &-cell {
       border-left: 1px solid theme-color('default', 'light');
+      overflow: hidden;
       padding: 0 10px;
 
+      .tyk-form-control--readonly {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+      }
+
       &:first-child {
         border-left: none;
         padding-left: 15px;

src/form/components/Input/index.js

@@ -252,7 +252,7 @@ export default class Input extends Component {
           </div>
         )}
         {
-          readOnly && <div>{value || '-'}</div>
+          readOnly && <div className="tyk-form-control--readonly">{value || '-'}</div>
         }
       </div>
     );

src/form/components/Input2/index.js

@@ -141,7 +141,7 @@ const Input2 = ({
       )}
       {
         readOnly && (
-          <div>
+          <div className="tyk-form-control--readonly">
             {value || '-'}
           </div>
         )

src/form/components/Select/index.js

@@ -229,7 +229,7 @@ export default class Select extends Component {
               { this.getSelectError() }
             </div>
           )}
-          {readOnly && <div>{value || '-'}</div>}
+          {readOnly && <div className="tyk-form-control--readonly">{value || '-'}</div>}
         </div>
       </Fragment>
     );

src/form/components/StringBuilder/index.js

@@ -214,7 +214,7 @@ const StringBuilder = (props) => {
           </div>
         )}
         {
-          readOnly && <div>{value || '-'}</div>
+          readOnly && <div className="tyk-form-control--readonly">{value || '-'}</div>
         }
       </div>
     </div>

src/form/components/Textarea/index.js

@@ -123,7 +123,7 @@ export default class Textarea extends Component {
               {this.getTextareaError()}
             </div>
           )}
-          {readOnly && <div>{value || '-'}</div>}
+          {readOnly && <div className="tyk-form-control--readonly">{value || '-'}</div>}
         </div>
       </Fragment>
     );