Miscellaneous Front end improvements

[sabina-talipova]

Description

We are planning to update the User Interface and most likely we can refactor some classes and make the following improvements.

CSS

• Refactor the CSS files to implement the BEM approach for class naming.
• Reduce CSS class nesting.
• Update / Remove CSS styles once we remove jqueryui.
• Remove ID style wherever it is possible
• Create pagination component. See
• Badge.scss - replace .status-archived class name with .badge--[modifier]. See
• Breadcrumb.scss - .breadcrumb__item-** fix Bootstrap clash. See and here
• Form.scss:
  • rename .file ccs class name to a different class name as it conflicts with default bootstrap. See
  • fix for when the .form-group--no-label class is used but there is actually a label. See
  • reduce css class nesting. See
  • make label display on the right side like normal .form__field-extra-label. See
• FormAction.scss:
  • Separate out bootstrap btn reset styles to a separate style sheet or divide within this sheet. See
  • Rename component to something like Btn or Button? See
  • .btn--icon-large to be deprecated across CMS. Check that we don't use this class name.
  • replace all .no-text classes for .btn--no-text
  • all secondary buttons need to change to use .btn-light. See
  • .btn-hide-outline - change word "outline" to border. See
• _layout.scss - .CMSPageEditController, .CMSPageSettingsController - move out of layout. See

JS

• FormAlert.js - default this.props.visible as null. See
• FormBuilder.js - Add generic CMS error reporting.See
• DateField.js / DatetimeField.js - add validation in onchange() function
• LeftAndMain.FieldHelp.js - remove attribute title setting, shouldn't be necessary
• Backend.js - Add support for nested keys to applySchemaToData()