Restore BEM conventions to versioned indicator, removing specificity …

…nesting
silverstripe · Sep 5, 2018 · 90ddb5c · 90ddb5c
1 parent 9927c9e
commit 90ddb5c
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 19 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/ElementEditor/Header.js b/client/src/components/ElementEditor/Header.js
@@ -199,18 +199,21 @@ class Header extends Component {
     }
 
     let versionStateButtonTitle = '';
+    const stateClassNames = ['element-editor-header__version-state'];
 
     if (!isPublished) {
       versionStateButtonTitle = i18n._t('ElementHeader.STATE_DRAFT', 'Item has not been published yet');
+      stateClassNames.push('element-editor-header__version-state--draft');
     }
 
     if (isPublished && !isLiveVersion) {
       versionStateButtonTitle = i18n._t('ElementHeader.STATE_MODIFIED', 'Item has unpublished changes');
+      stateClassNames.push('element-editor-header__version-state--modified');
     }
 
     return (
       <span
-        className="element-editor-header__version-state"
+        className={classNames(stateClassNames)}
         title={versionStateButtonTitle}
       />
     );

diff --git a/client/src/components/ElementEditor/Header.scss b/client/src/components/ElementEditor/Header.scss
@@ -52,18 +52,12 @@
   position: relative;
   width: 8px;
   z-index: 1;
-}
 
-.element-editor__element {
   &--draft {
-    .element-editor-header__version-state {
-      background-color: $state-draft-bg;
-    }
+    background-color: $state-draft-bg;
   }
 
   &--modified {
-    .element-editor-header__version-state {
-      background-color: $state-modified-bg;
-    }
+    background-color: $state-modified-bg;
   }
 }
diff --git a/client/src/components/ElementEditor/tests/Header-test.js b/client/src/components/ElementEditor/tests/Header-test.js
@@ -135,8 +135,9 @@ describe('Header', () => {
         />
       );
 
-      expect(wrapper.find('.element-editor-header__version-state').prop('title'))
-        .toContain('not been published');
+      const versionedState = wrapper.find('.element-editor-header__version-state');
+      expect(versionedState.prop('title')).toContain('not been published');
+      expect(versionedState.hasClass('element-editor-header__version-state--draft')).toBe(true);
     });
 
     it('identifies modified versions', () => {
@@ -148,8 +149,9 @@ describe('Header', () => {
         />
       );
 
-      expect(wrapper.find('.element-editor-header__version-state').prop('title'))
-        .toContain('has unpublished changes');
+      const versionedState = wrapper.find('.element-editor-header__version-state');
+      expect(versionedState.prop('title')).toContain('has unpublished changes');
+      expect(versionedState.hasClass('element-editor-header__version-state--modified')).toBe(true);
     });
 
     it('ignores live versions', () => {

diff --git a/client/src/styles/admin.scss b/client/src/styles/admin.scss
@@ -89,7 +89,8 @@
 }
 
 // Legacy - tweaks to put the version indicator in the right place for PHP
-// GridField rendering
+// GridField rendering. Specificity is deliberate so it doesn't affect the React
+// elemental area editor
 .elemental-report__grid-field {
   .element-editor-header__version-state {
     bottom: 9px;

diff --git a/templates/DNADesign/Elemental/Models/BaseElement/PreviewIcon.ss b/templates/DNADesign/Elemental/Models/BaseElement/PreviewIcon.ss
@@ -3,7 +3,8 @@
 <% end_if %>
 
 <% if $IsVersioned && $VersionState %>
-    <span class="element-editor__element--{$VersionState}">
-        <span class="element-editor-header__version-state" title="$VersionStateTitle"></span>
-    </span>
+    <span
+        class="element-editor-header__version-state element-editor-header__version-state--{$VersionState}"
+        title="$VersionStateTitle"
+    />
 <% end_if %>