API template - overloads api page cleanup

[sjtrimble]

• API page clean up primarily focusing on new overloads design
• Moved some SCSS files to corresponding sections (some were in the modules section and should be in the page-specific sections)

Functionality Todos:

• Add relevant index of overload
• Make individual overload collapsable
• Show only the first overload expanded, rest collapsed
• Text should change to 'collapse all' once 'show all' is selected
• Need to fix chevron/carrot rotation animation when overloads / overload item is expanded or collapsed
• Need to display object ... as the and type , and the first sentence of the description should be "This is an anonymous type with a signature (link) described above.".

---

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] angular.io application / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: #24349

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

[mary-poppins]

You can preview 2bc5c65 at https://pr24976-2bc5c65.ngbuilds.io/.

[mary-poppins]

You can preview 8dfcc78 at https://pr24976-8dfcc78.ngbuilds.io/.

[petebacondarwin]

I'm afraid this needs a significant rebase.
Will the additional todos be completed in another PR?
Visually the "overloads" H4 looks smaller and less significant than the H5 headings of each overload, which seems wrong.
What else has changed, it is not so easy to tell from the diff. Perhaps some before and after images of significant changes would be helpful to speed up the approval process?

[sjtrimble]

@petebacondarwin
Here are some of the changes visualized (before/after):

Methods Section Changes

• Edit/source code icons blue to match link styling
• Smaller code font to match rest of text size
• Removal of box/border around parameters table

Overloads Section Changes

• Edit/source code icons blue to match link styling
• Larger heading size for Overloads section heading
• Removal of box/border around overloads section heading
• Expand/collapse caret icon accompanied by text for more clear instructions (as individual overload item section will have their own collapse/expand sections in the new design)

Overload Details Changes

• Added overload item heading with # of # to easily better distinguish between individual overload sections
• Smaller code font to match rest of text size
• Removal of box/border around parameters table
• Updated styling of individual overload section sub-headings so content hierarchy is a bit more clear

[sjtrimble]

@petebacondarwin

1. Regarding the additional to-do's, I was hoping you or someone on the team could help :)
2. Overloads heading is an error and I will fix
3. I will try to rebase and see how it goes.

[sjtrimble]

Design for reference:

[sjtrimble]

Overloads parameter table design discussed Jul 26 (for reference):

[IgorMinar]

the second option - indent & no color - looks good to me.

the option without indentation looks better on this mock, but once it's in the context of the entire page the lack of indentation makes the visual hierarchy harder to see, so that's why I think we should try to stick with the indentation for now.

[mary-poppins]

You can preview a8f5cd5 at https://pr24976-a8f5cd5.ngbuilds.io/.

[mary-poppins]

You can preview 07bd5c7 at https://pr24976-07bd5c7.ngbuilds.io/.

[sjtrimble]

@petebacondarwin

I rebased, and made the changes based on the mockup we agreed on.
There's a list of Functionality Todos in the description above that covers all of the items that are missing from this PR that I'll need help with :)

[petebacondarwin]

• Add relevant index of overload
• Make individual overload collapsable
• Show only the first overload expanded, rest collapsed
• Text should change to 'collapse all' once 'show all' is selected
• Need to fix chevron/carrot rotation animation when overloads / overload item is expanded or collapsed
• Need to display object ... as the and type , and the first sentence of the description should be "This is an anonymous type with a signature (link) described above.".

For this last item the docs for the HttpClient will need to be altered to add in docs for the option parameter. E.g.

  /**
   * Construct a request which interprets the body as an `ArrayBuffer` and returns it.
   *
   * @param options This is an anonymous type with a signature described in the
   * [usage notes](#request-usage-notes).
   * @return an `Observable` of the body as an `ArrayBuffer`.
   */
  request(method: string, url: string, options: {
    body?: any,
    headers?: HttpHeaders|{[header: string]: string | string[]},
    observe?: 'body',
    params?: HttpParams|{[param: string]: string | string[]},
    reportProgress?: boolean,
    responseType: 'arraybuffer', withCredentials?: boolean,
  }): Observable<ArrayBuffer>;

[mary-poppins]

You can preview da6d2bf at https://pr24976-da6d2bf.ngbuilds.io/.

[petebacondarwin]

Another review needed please @gkalpak (according to PullApprove).

[googlebot]

A Googler has manually verified that the CLAs look good.

(Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}