Move changes icons left and remove width compensation (#249)

closes rdar://91807576

* refactor: moves the API changes icon to the left

* refactor: remove the alignment fixes when API changes are ON

* refactor: remove change-highlight-horizontal-text-alignment-small and change-highlight-horizontal-text-alignment

Author: Dobromir Hristov

src/components/DocumentationTopic/PrimaryContent/DeclarationGroup.vue

@@ -119,8 +119,8 @@ export default {
     border: none;
     margin-top: 0;
     margin-bottom: 0;
-    margin-right: $change-icon-width + $change-highlight-horizontal-space-rem;
-    padding-right: 0;
+    margin-left: $change-icon-occupied-space;
+    padding-left: 0;
   }
 }
 </style>

src/components/DocumentationTopic/PrimaryContent/ParametersTable.vue

@@ -105,7 +105,6 @@ $param-spacing: rem(28px);
     flex-flow: row wrap;
     width: 100%;
     @include change-highlight-target();
-    @include change-highlight-horizontal-text-alignment-small();
 
     & + & {
       margin-top: $param-spacing/2;

src/components/DocumentationTopic/RelationshipsList.vue

@@ -151,7 +151,6 @@ export default {
 
   &.changed {
     @include change-highlight-target();
-    @include change-highlight-horizontal-text-alignment();
 
     &:after {
       margin-top: $change-coin-y-offset-reduced;

src/components/DocumentationTopic/TopicsLinkBlock.vue

@@ -17,7 +17,7 @@
       class="link"
       ref="apiChangesDiff"
     >
-      <TopicLinkBlockIcon v-if="topic.role" :role="topic.role" />
+      <TopicLinkBlockIcon v-if="topic.role && !change" :role="topic.role" />
       <DecoratedTopicTitle v-if="topic.fragments" :tokens="topic.fragments" />
       <WordBreak v-else :tag="titleTag">{{ topic.title }}</WordBreak>
       <span v-if="change" class="visuallyhidden">- {{ changeName }}</span>
@@ -256,7 +256,6 @@ export default {
 
   &.changed {
     @include change-highlight-target();
-    @include change-highlight-horizontal-text-alignment();
     box-sizing: border-box;
   }
 }

src/styles/base/_changes.scss

@@ -24,7 +24,7 @@
   }
 
   &::after {
-    right: 0;
+    left: $change-coin-x-offset;
     @include coin($modified-svg, $change-icon-width);
     margin-top: $change-coin-y-offset-reduced;
     // Workaround for a bug, where -webkit-backdrop-filter not working on iOS when <pre> has `overflow: auto`

src/styles/core/_changes.scss

@@ -12,14 +12,17 @@ $change-border-stroke-width: 1px;
 $change-total-icon-width: rem(17px);
 $change-highlight-vertical-space: 7px;
 $change-icon-width: rem(20px);
-$change-highlight-horizontal-space: 14px;
+$change-highlight-horizontal-space: 17px;
 $change-highlight-horizontal-space-rem: rem($change-highlight-horizontal-space);
 $change-highlight-vertical-space-total: $change-highlight-vertical-space + $change-border-stroke-width;
+
 // Width of highlight endcaps only used in this file
 $change-total-coin-space: rem(5px);
 $change-coin-y-offset: 10px;
 $change-coin-y-offset-reduced: rem($change-highlight-vertical-space-total) + $change-total-coin-space/2;
-
+$change-coin-x-offset: $change-highlight-horizontal-space - 9px;
+// the space needed for the change icon + it's margin
+$change-icon-occupied-space: $change-icon-width + $change-highlight-horizontal-space-rem;
 // Paths to the changes icons
 $modified-svg: url('~theme/assets/img/icons/modified-icon.svg') !default;
 $modified-dark-svg: $modified-svg !default;
@@ -51,7 +54,7 @@ $deprecated-dark-rounded-svg: $deprecated-svg !default;
   bottom: 0;
   content: " ";
   margin: auto;
-  margin-right: ($change-highlight-horizontal-space - 5);
+  margin-right: $change-coin-x-offset;
   position: absolute;
   top: 0;
   width: $size;
@@ -70,6 +73,8 @@ $deprecated-dark-rounded-svg: $deprecated-svg !default;
   // vertical block of wrapped names to be clickable, even if a user happens
   // to click the space in between lines
   display: inline-flex;
+  width: 100%;
+  box-sizing: border-box;
 
   @include breakpoint(small) {
     padding-left: 0;
@@ -78,15 +83,15 @@ $deprecated-dark-rounded-svg: $deprecated-svg !default;
 }
 
 @mixin change-highlight-end-spacing() {
-  padding-right: $change-icon-width + $change-highlight-horizontal-space-rem;
+  padding-left: $change-icon-occupied-space;
 }
 
 @mixin change-highlight-horizontal-spacing() {
-  padding-left: rem($change-highlight-horizontal-space);
+  padding-right: $change-highlight-horizontal-space-rem;
   @include change-highlight-end-spacing();
 
   &.changed {
-    padding-left: $change-highlight-horizontal-space;
+    padding-right: $change-highlight-horizontal-space-rem;
   }
 
   @include breakpoint(small) {
@@ -95,7 +100,7 @@ $deprecated-dark-rounded-svg: $deprecated-svg !default;
     padding-right: 0;
 
     &.changed {
-      padding-left: $change-highlight-horizontal-space;
+      padding-right: $change-highlight-horizontal-space;
       @include change-highlight-end-spacing();
     }
   }
@@ -105,34 +110,6 @@ $deprecated-dark-rounded-svg: $deprecated-svg !default;
   padding-top: $change-highlight-vertical-space-total;
   padding-bottom: $change-highlight-vertical-space-total;
 }
-///
-/// Counteracts the left (start) padding created by `change-highlight-horizontal-spacing()`
-/// in order to keep the text aligned with its siblings.
-/// The 1 value represents the border width.
-///
-@mixin change-highlight-horizontal-text-alignment() {
-  margin-left: rem(-$change-highlight-horizontal-space - 1);
-  width: calc(100% + #{$change-highlight-horizontal-space} + 1px);
-
-  @include change-highlight-horizontal-text-alignment-small();
-}
-
-///
-/// Small vp specific padding and margin to have margin go outside of content symmetrically
-///
-@mixin change-highlight-horizontal-text-alignment-small() {
-  @include breakpoint(small) {
-    &:not(.changed) {
-      margin-left: 0;
-      width: 100%;
-    }
-
-    &.changed {
-      margin-left: rem(-$change-highlight-horizontal-space);
-      width: calc(100% + #{$change-highlight-horizontal-space * 2});
-    }
-  }
-}
 
 ////
 /// Apply styles related to the API diff/changes functionality

src/styles/core/_vars.scss

@@ -31,7 +31,7 @@ $article-stacked-margin-small: 20px;
 
 // TopicLink components
 $topic-link-icon-width: 1.294rem;
-$topic-link-icon-spacing: 0.5em;
+$topic-link-icon-spacing: 1rem;
 
 // Code Block Style Elements
 $code-block-style-elements-padding: 8px 14px !default;

tests/unit/components/DocumentationTopic/TopicsLinkBlock.spec.js

@@ -483,6 +483,16 @@ describe('TopicsLinkBlock', () => {
       expect(linkBlock.classes(`changed-${changeType}`)).toBe(!isOnLink);
     };
 
+    it('does not render the TopicLinkBlockIcon', () => {
+      expect(wrapper.find(TopicLinkBlockIcon).exists()).toBe(true);
+      store.state.apiChanges = {
+        [propsData.topic.identifier]: {
+          change: 'modified',
+        },
+      };
+      expect(wrapper.find(TopicLinkBlockIcon).exists()).toBe(false);
+    });
+
     describe('when the topic does not have an abstract', () => {
       beforeEach(() => {
         wrapper = shallowMount(TopicsLinkBlock, {