[rdar://116401230] fix: hierarchy-item-icon

Author: marinaaisa

src/components/DocumentationTopic/Hierarchy.vue

@@ -21,7 +21,6 @@
       <HierarchyItem
         v-if="rootLink"
         :url="rootLink"
-        :hasSlash="false"
       >
         {{ $t('documentation.title') }}
       </HierarchyItem>

src/components/DocumentationTopic/HierarchyCollapsedItems.vue

@@ -10,7 +10,6 @@
 
 <template>
   <li class="hierarchy-collapsed-items">
-    <span class="hierarchy-item-icon icon-inline">/</span>
     <button
       class="toggle"
       ref="btn"
@@ -130,14 +129,9 @@ $dropdown-vertical-offset: rem(7px);
   align-items: center;
   margin-left: $nav-space-hierarchy-elements;
 
-  .hierarchy-item-icon {
-    width: 9px;
-    height: 15px;
-    margin-right: $nav-space-hierarchy-elements;
-    display: flex;
-    justify-content: center;
-    font-size: 1em;
-    align-self: baseline;
+  &:before{
+    content: '\00a0/\00a0';
+
   }
 
   @include nav-in-breakpoint() {

src/components/DocumentationTopic/HierarchyItem.vue

@@ -14,7 +14,6 @@
     :class="[{ collapsed: props.isCollapsed }, data.staticClass]"
     class="hierarchy-item"
   >
-    <span v-if="props.hasSlash" class="hierarchy-item-icon icon-inline">/</span>
     <router-link v-if="props.url" class="parent item nav-menu-link" :to="props.url">
       <slot />
     </router-link>
@@ -40,10 +39,6 @@ export default {
       type: String,
       required: false,
     },
-    hasSlash: {
-      type: Boolean,
-      default: () => true,
-    },
   },
 };
 </script>
@@ -52,19 +47,10 @@ export default {
 @import 'docc-render/styles/_core.scss';
 
 .hierarchy-item {
-  // style the chevron icon
- :deep(.hierarchy-item-icon) {
-    width: 9px;
-    height: 15px;
-    margin-right: $nav-space-hierarchy-elements;
-    display: flex;
-    justify-content: center;
-    font-size: 1em;
-    align-self: baseline;
-    // hide on when collapsed
-    @include nav-in-breakpoint() {
-      display: none;
-    }
+  // applies " / " at the start of the item when the item is not the first child
+  &:not(:first-child):before{
+    content: '\00a0/\00a0';
+
   }
 
   display: flex;

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

@@ -125,9 +125,7 @@ describe('Hierarchy', () => {
     expect(barItem.text()).toBe(bar.title);
 
     const currentItem = items.at(items.length - 1);
-    expect(currentItem.attributes()).toEqual({
-      hasslash: 'true',
-    });
+    expect(currentItem.attributes()).toEqual({});
     expect(currentItem.text()).toBe(baz.title);
 
     expect(wrapper.contains(HierarchyCollapsedItems)).toBe(false);
@@ -205,25 +203,20 @@ describe('Hierarchy', () => {
         // next assert the collapsible items. Only one, as 3 can live outside at 1200
         expect(items.at(1).attributes()).toEqual({
           iscollapsed: 'true',
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         // assert the last item has no attributes
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -248,27 +241,22 @@ describe('Hierarchy', () => {
 
         // assert the collapsible items. Two collapsed, as 2 can live outside between 1000 - 1200
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         // assert the last item has no attributes
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -292,35 +280,29 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
         expect(items.at(0).classes()).not.toContain('root-hierarchy');
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -352,35 +334,29 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
         expect(items.at(0).classes()).not.toContain('root-hierarchy');
 
         // next assert the collapsible items. 4, as 0 can live outside below 800
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -432,26 +408,21 @@ describe('Hierarchy', () => {
 
         // next assert the collapsible items. Two, as 2 can live outside at 1200 with tags
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -483,27 +454,22 @@ describe('Hierarchy', () => {
 
         // assert the collapsible items. 3 collapsed, as 1 can live outside between 1000 - 1200
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         // assert the items outside of the collapse
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -535,35 +501,29 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
         expect(items.at(0).classes()).not.toContain('root-hierarchy');
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items
@@ -603,35 +563,29 @@ describe('Hierarchy', () => {
         // assert what items are shown
         // assert there is no root item
         expect(items.at(0).attributes()).toEqual({
-          hasslash: 'true',
           url: references[parentTopicIdentifiers[0]].url,
           iscollapsed: 'true',
         });
         expect(items.at(0).classes()).not.toContain('root-hierarchy');
 
         // next assert the collapsible items. 3, as 1 can live between 800 and 1000
         expect(items.at(1).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[1]].url,
         });
         expect(items.at(2).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[2]].url,
         });
         expect(items.at(3).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[3]].url,
         });
         expect(items.at(4).attributes()).toEqual({
-          hasslash: 'true',
           iscollapsed: 'true',
           url: references[parentTopicIdentifiers[4]].url,
         });
         expect(items.at(5).attributes()).toEqual({
-          hasslash: 'true',
         });
 
         // assert there is a `HierarchyCollapsedItems` rendered, with correct items

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

@@ -45,10 +45,6 @@ describe('HierarchyCollapsedItems', () => {
     expect(wrapper.is('li.hierarchy-collapsed-items')).toBe(true);
   });
 
-  it('renders a slash instead of an icon', () => {
-    expect(wrapper.find('.hierarchy-item-icon').text()).toBe('/');
-  });
-
   it('renders a non-focused button', () => {
     const btn = wrapper.find('button.toggle');
     expect(btn.exists()).toBe(true);

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

@@ -33,12 +33,6 @@ describe('HierarchyItem', () => {
     expect(wrapper.classes('collapsed')).toBe(true);
   });
 
-  it('renders a slash instead of an icon', () => {
-    const wrapper = mountWithProps({ url: 'foo.bar' });
-
-    expect(wrapper.find('.hierarchy-item-icon').text()).toBe('/');
-  });
-
   it('renders a .parent.item link if the URL exists', () => {
     const wrapper = mountWithProps({ url: 'foo.bar' });
     const item = wrapper.find('.item');