Styling

To ensure that the library will not style any other elements on a page, all CSS classes are prefixed with`easy-edit-`. If would like to style all EasyEdit components then you could overwrite all the default classes that the library provides

Viewing

All EasyEdit components are wrapped around a div with the class easy-edit-wrapper in it. If the component's allowEdit prop is set to false, then class easy-edit-not-allowed is added to the wrapper div which just changes the mouse cursor to 🚫 (not allowed). In case of hovering over it, the class easy-edit-hover-on is appended to it which changes the cursor to 👆 (pointer) and applies an italic style to the placeholder/value.

<!-- EasyEdit HTML in View mode -->
<div class="easy-edit-wrapper">Click to edit</div>

<!-- EasyEdit HTML in View mode while hovering over it -->
<div class="easy-edit-hover-on easy-edit-wrapper">Click to edit</div>

<!-- EasyEdit HTML in View mode when allowEdit is set to false -->
<div class="easy-edit-not-allowed easy-edit-wrapper">Can't edit me</div>

Viewing with Edit button

When the hideEditButton prop is set to false, the "Edit" button is visible while the component is in its View state wrapped in a div with the easy-edit-view-button-wrapper css class in it.

<div class="easy-edit-wrapper">
  Click to edit
  <div class="easy-edit-view-button-wrapper">
    <button class="easy-edit-button" name="edit">Edit</button>
  </div>
</div>

Editing

Things become a bit more complicated in edit mode. As before, all EasyEdit components are wrapped around a div with the class easy-edit-inline-wrapper in it but this time, we have a few more containers.

<!-- EasyEdit HTML in Edit mode -->
<div class="easy-edit-inline-wrapper" tabindex="0">
  <div class="easy-edit-component-wrapper">
    <input type="text" placeholder="Click to edit" autocomplete="off" value="">
  </div>
  <div class="easy-edit-button-wrapper">
    <button class="easy-edit-button" name="save">Save</button>
    <button class="easy-edit-button" name="cancel">Cancel</button>
  </div>
  <div class="easy-edit-instructions">Click save to see what happens</div>
  <div class="easy-edit-validation-error">What just happened?</div>
</div>

Component

Each component is wrapped around a div with the class easy-edit-component-wrapper.

Instructions

If provided, a div with the class easy-edit-instructions will be generated and placed within the main container. In not then no div container will be generated for instructions

Buttons

All buttons ("Save", "Cancel", "Delete and "Edit") have a default class added to them which is easy-edit-button.

Validating

If validation fails on an EasyEdit component, then a validation message is shown back to the user which is wrapped around a div with the class easy-edit-validation-error. By default, the styling that's applied to the component just changes the font colour to red.