Commit Graph

20382 Commits

Author SHA1 Message Date
Pete Bacon Darwin 1a9f526315 docs(core): fix typo in developer docs (#41080)
PR Close #41080
2021-03-15 13:26:51 -07:00
Pete Bacon Darwin ef09922c61 docs(compiler): fix typos in partial compilation comments (#41080)
PR Close #41080
2021-03-15 13:26:51 -07:00
Pete Bacon Darwin 5565810bd6 refactor(compiler-cli): implement `ɵɵngDeclareNgModule` and `ɵɵngDeclareInjector` (#41080)
This commit changes the partial compilation so that it outputs declaration
calls rather than definition calls for NgModules and Injectors.

The JIT compiler and the linker are updated to be able to handle these
new declarations.

PR Close #41080
2021-03-15 13:26:51 -07:00
Pete Bacon Darwin 8a33842cca refactor(compiler): consolidate `R3CompiledExpression` (#41080)
There were a number of almost identical interfaces used in
the same way throughout the Render3 compiler code.
This commit changes the compiler to use the same interface
throughout.

PR Close #41080
2021-03-15 13:26:51 -07:00
Pete Bacon Darwin 90301f42a9 refactor(compiler): remove unused code (#41080)
These functions are not used so can be removed.

PR Close #41080
2021-03-15 13:26:51 -07:00
Pete Bacon Darwin be9d059efc refactor(compiler): move `type` in shared `R3PartialDeclaration` interface (#41080)
All interfaces that extend `R3PartialDeclaration` require a `type`
property so it makes sense to put it in the base interface.

PR Close #41080
2021-03-15 13:26:51 -07:00
Pete Bacon Darwin 12c925a000 refactor(compiler): consolidate `wrapReference()` (#41080)
This function is declared in multiple places. The instances inside
`compiler` are slightly different to those in `compiler-cli`. So this
commit consolidates them into two reusable functions.

PR Close #41080
2021-03-15 13:26:51 -07:00
Pete Bacon Darwin 28a7fba29a refactor(compiler): use `DefinitionMap` and remove `mapToMapExpression()` (#41080)
By consistently using the `DefinitionMap` class there is no longer
any need for the `mapToMapExpression()` function.

PR Close #41080
2021-03-15 13:26:51 -07:00
David Shevitz cc75e1d17b docs: add contributors guide to aio (#41061)
PR Close #41061
2021-03-15 12:16:37 -07:00
Andrew Kushnir 3bd1992218 perf(forms): avoid direct references to the `Validators` class (#41189)
Currently the `Validators` class contains a number of static methods that represent different validators as well as some helper methods. Since class methods are not tree-shakable, any reference to the `Validator` class retains all of its methods (even if you've used just one).

This commit refactors the code to extract the logic into standalone functions and use these functions in the code instead of referencing them via `Validators` class. That should make the code more tree-shakable. The `Validators` class still retains its structure and calls these standalone methods internally to keep this change backwards-compatible.

PR Close #41189
2021-03-15 11:12:55 -07:00
FDIM 1644d64398 feat(compiler-cli): introduce HttpContext request context (#25751)
A long-requested feature for HttpClient is the ability to store and retrieve
custom metadata for requests, especially in interceptors. This commit
implements this functionality via a new context object for requests.

Each outgoing HttpRequest now has an associated "context", an instance of
the HttpContext class. An HttpContext can be provided when making a request,
or if not then an empty context is created for the new request. This context
shares its lifecycle with the entire request, even across operations that
change the identity of the HttpRequest instance such as RxJS retries.

The HttpContext functions as an expando. Users can create typed tokens as instances of HttpContextToken, and
read/write a value for the key from any HttpContext object.

This commit implements the HttpContext functionality. A followup commit will
add angular.io documentation.

PR Close #25751
2021-03-15 10:33:48 -07:00
George Kalpakas 9ad57e6cb3 docs: document `help wanted` and `good first issue` labels (#41195)
Previously, we used the `hotlist: community-help` label to mark issues
that were good candidates for contributions from the community.
Recently, we also started using the `good first issue` label to mark
issues that would additionally be suitable for first-time contributors.

This commit is part of the work to replace `hotlist: community-help`
with the newly added `help wanted` label, which (same as
`good first issue`) is a [default GitHub label][1]. This commit changes
all occurrences of `hotlist: community-help` in the documentation to
`help wanted` and also documents the purpose of the `help wanted` and
`good first issue` labels.

[1]: https://docs.github.com/en/github/managing-your-work-on-github/managing-labels#about-default-labels

PR Close #41195
2021-03-15 10:31:29 -07:00
Andrew Kushnir 937e90cd16 perf(forms): make built-in ControlValueAccessors more tree-shakable (#41146)
This commit updates Forms code to avoid direct references to all built-in ControlValueAccessor classes, which
prevents their tree-shaking from production builds. Instead, a new static property is added to all built-in
ControlValueAccessors, which is checked when we need to identify whether a given ControlValueAccessors is a
built-in one.

PR Close #41146
2021-03-12 15:54:59 -08:00
Andrew Kushnir 8a9fe49a2a fix(forms): properly handle the change to the FormGroup shape (#40829)
Currently the code in the `FormGroupDirective` assumes that the shape of the underlying `FormGroup` never
changes and `FormControl`s are not replaced with other types. In practice this is possible and Forms code
should be able to process such changes in FormGroup shape.

This commit adds extra check to the `FormGroupDirective` class to avoid applying FormControl-specific to
other types.

Fixes #13788.

PR Close #40829
2021-03-12 14:23:01 -08:00
George Kalpakas e3ea8630bc ci: remove `CHANGELOG.md` from the `public-api` group (#41135)
This commit changes the owning group for the `CHANGELOG.md` file from
`public-api` to `dev-infra` (similar to other top-level `.md` files).

Internal discussion:
https://angular-team.slack.com/archives/C040TF8UT/p1615218082023400

PR Close #41135
2021-03-12 13:27:13 -08:00
stefanos- cfaf425314 docs: add book about testing to resources (#41159)
PR Close #41159
2021-03-12 13:25:48 -08:00
Alan Agius 713b43f944 docs: remove deprecated Angular CLI APIs that have been removed (#41174)
With this change we remove deprecated Angular CLI APIs that have been removed in versions 12.

PR Close #41174
2021-03-12 13:24:28 -08:00
George Kalpakas 8d457ab2e1 fix(docs-infra): fix `<code-tabs>` in IE11 (#41183)
Previously, `<code-tabs>` did not work correctly in IE11. More
specifically, due to how IE11 handles updates to `innerHTML`, the
contents of `<code-pane>` elements were cleared before we could capture
them and pass them to the `<aio-code>` components.

This commit fixes it by ensuring we capture the `<code-pane>` contents
before clearing unneeded HTML.

Before: ![code tabs in IE11 before][1]
After: ![code tabs in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110815248-f4460e00-8292-11eb-868e-eca7ba5e9cd3.png
[2]: https://user-images.githubusercontent.com/8604205/110815253-f5773b00-8292-11eb-80a6-1a0b1ea44d8f.png

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas ea00e2c0b4 fix(docs-infra): fix display of AngularJS logo on the "Press kit" page in IE11 (#41183)
Previously, the AngularJS SVG logo shown on the "Press kit" page was not
displayed correctly in IE11 (see the image below).

This commit fixes it by explicitly specifying the SVG `viewBox` on the
logo.

Before: ![presskit AngularJS logo in IE11 before][1]
After: ![presskit AngularJS logo in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110812629-7123b880-8290-11eb-9f71-0ae910536fa5.png
[2]: https://user-images.githubusercontent.com/8604205/110812633-7254e580-8290-11eb-896c-84f595d273b8.png

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas 0d1b3fe55e fix(docs-infra): fix the layout of the "Features" page in IE11 (#41183)
IE11 does not support `justify-content: space-evenly` and therefore
falls back to the default (`flex-start`), breaking the layout of the
items in the "Features" page (see the image below).

This commit fixes the layout by specifying `space-around` as a fallback
for `justify-content`, which keeps the layout closer to the intended.

Before: ![features page layout in IE11 before][1]
After: ![features page layout in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110811038-045bee80-828f-11eb-8027-d5851762a5eb.png
[2]: https://user-images.githubusercontent.com/8604205/110811076-0a51cf80-828f-11eb-98a0-2f2928128dd0.png

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas 5c0122f7fd fix(docs-infra): fix the layout of docs pages in IE11 (#41183)
IE11 does not recognize the `<main>` element as a block element and
therefore it does not apply margin/paddings/widths as expected. This
resulted in the layout of docs pages being broken in IE11 (see the image
below).

This commit fixes the layout by explicitly setting `.sidenav-content`
(which is a `<main>` element) to `display: block`.

Before: ![docs pages layout in IE11 before][1]
After: ![docs pages layout in IE11 after][2]

[1]: https://user-images.githubusercontent.com/8604205/110808902-1b014600-828d-11eb-9eef-c1234dc2d436.png
[2]: https://user-images.githubusercontent.com/8604205/110808907-1ccb0980-828d-11eb-91d9-06e5cfafc894.png

PR Close #41183
2021-03-12 13:22:57 -08:00
George Kalpakas 8c939dcb40 fix(docs-infra): fix angular.io on browsers that support Custom Elements but not ES2015 (#41183)
Before #41162, angular.io was broken on IE 11 due to missing a polyfill
for an API (`Reflect.construct()`) needed by the Custom Elements ES5
shim. #41162 tried to fix this by loading the necessary polyfill
(`es.reflect.construct.js`) on browsers that do not support ES2015
modules (including IE 11).

It turns out that the fix in #41162 was itself broken, because the
`es.reflect.consruct.js` script (included directly in the page via a
`<script>` tag) was in CommonJS format (which cannot run in the browser
as is). By chance, this still allowed browsers that supported neither
Custom Elements nor ES2015 modules (such as IE 11) to work correctly as
a side-effect of loading the `@webcomponents/custom-elements` polyfill
after the Custom Elements ES5 shim (`native-shim.js`). However, on the
few browsers that natively support Custom Elements but not ES2015
modules, angular.io would still be broken.

This commit correctly fixes angular.io on all browsers by properly
bundling the polyfills and transpiling to ES5.

Implementation-wise, we use [esbuild][1] for bundling the polyfills (and
converting from CommonJS to a browser-compatible, IIFE-based format) and
[swc][2] for downleveling the code to ES5 (since `esbuild` only supports
ES2015+).

[1]: https://esbuild.github.io/
[2]: https://swc.rs/

PR Close #41183
2021-03-12 13:22:57 -08:00
Misko Hevery 70962465b5 fix(core): Switch `emitDistinctChangesOnlyDefaultValue` to true (#41121)
BREAKING CHANGE:

Switching default of `emitDistinctChangesOnlyDefaultValue`
which changes the default behavior and may cause some applications which
rely on the incorrect behavior to fail.

`emitDistinctChangesOnly` flag has also been deprecated and will be
removed in a future major release.

The previous implementation would fire changes `QueryList.changes.subscribe`
whenever the `QueryList` was recomputed. This resulted in an artificially
high number of change notifications, as it is possible that recomputing
`QueryList` results in the same list. When the `QueryList` gets recomputed
is an implementation detail, and it should not be the thing that determines
how often change event should fire.

Unfortunately, fixing the behavior outright caused too many existing
applications to fail. For this reason, Angular considers this fix a
breaking fix and has introduced a flag in `@ContentChildren` and
`@ViewChildren`, that controls the behavior.

```
export class QueryCompWithStrictChangeEmitParent {
  @ContentChildren('foo', {
    // This option is the new default with this change.
    emitDistinctChangesOnly: true,
  })
  foos!: QueryList<any>;
}
```
For backward compatibility before v12
`emitDistinctChangesOnlyDefaultValue` was set to `false. This change
changes the default to `true`.

PR Close #41121
2021-03-12 10:47:56 -08:00
Keen Yee Liau 012a2b55e1 build(language-service): use 'export =' syntax for default export (#41165)
Tsserver expects `@angular/language-service` to provide a factory function
as the default export (commonjs-style) of the package.

The current implementation side steps TypeScript's import syntax by using
`module.exports = factory`.
This allows the code to incorrectly re-export other symbols:

```ts
export * from './api';
```

which transpiles to:

```js
var tslib_1 = require("tslib");
tslib_1.__exportStar(require("@angular/language-service/api"), exports);
```

Doing this meant that the package now has a runtime dependency on `tslib`,
which is totally unnecessary.

With the proper `export =` syntax, `tslib` is removed, and no other exports
are allowed.

Output:
```js
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("@angular/language-service", ["require", "exports"], factory);
    }
})(function (require, exports) {
    "use strict";
    return function factory(tsModule) {
        var plugin;
        return {
            create: function (info) {
                var config = info.config;
                var bundleName = config.ivy ? 'ivy.js' : 'language-service.js';
                plugin = require("./bundles/" + bundleName)(tsModule);
                return plugin.create(info);
            },
            getExternalFiles: function (project) {
                var _a, _b;
                return (_b = (_a = plugin === null || plugin === void 0 ? void 0 : plugin.getExternalFiles) === null || _a === void 0 ? void 0 : _a.call(plugin, project)) !== null && _b !== void 0 ? _b : [];
            },
            onConfigurationChanged: function (config) {
                var _a;
                (_a = plugin === null || plugin === void 0 ? void 0 : plugin.onConfigurationChanged) === null || _a === void 0 ? void 0 : _a.call(plugin, config);
            },
        };
    };
});
```

PR Close #41165
2021-03-11 14:48:33 -08:00
Pete Bacon Darwin 69afeb3808 fix(localize): trim extracted `equiv-text` values (#41180)
The ViewEngine message extraction would trim the values
of the `equiv-text` attributes. This commit aligns the Ivy
extraction of these attributes.

Fixes #41176

PR Close #41180
2021-03-11 10:31:37 -08:00
Stepan Suvorov 94e8f5d4a4 docs: add stepan suvorov to GDE resources (#41178)
PR Close #41178
2021-03-11 09:31:48 -08:00
George Kalpakas f2ca29cd27 build(docs-infra): upgrade cli command docs sources to edc1d0bc7 (#41175)
Updating [angular#master](https://github.com/angular/angular/tree/master) from
[cli-builds#master](https://github.com/angular/cli-builds/tree/master).

##
Relevant changes in
[commit range](d62203a9f...edc1d0bc7):

**Modified**
- help/add.json
- help/build.json
- help/e2e.json
- help/extract-i18n.json
- help/generate.json
- help/new.json
- help/serve.json
- help/test.json

PR Close #41175
2021-03-11 09:30:51 -08:00
George Kalpakas e1e766a880 fix(docs-infra): generate the `404.html` page correctly (#41163)
Previously, the generated `404.html` page did not include a `<body>`
tag. In some browsers (such as IE 11), this was causing warnings in the
console.

This commit ensures the generated page contains a `<body>` tag. It also
fixes the indentation in the generated page.

PR Close #41163
2021-03-11 09:30:03 -08:00
George Kalpakas 79e21b966e fix(docs-infra): fix angular.io on IE 11 (#41162)
Previously, the angular.io app was broken on IE 11. In particular, pages
that included Custom Elements would fail to load, because the
`Reflect.construct()` method (which the Custom Elements ES5 shim relies
on) was not available.

This commit fixes this by loading the polyfill for `Reflect.construct()`
on browsers that do not support ES2015 (including IE 11).

PR Close #41162
2021-03-11 09:25:32 -08:00
George Kalpakas d368fa2fa4 fix(docs-infra): avoid unnecessarily loading Custom Elements ES5 shim (#41162)
The custom elements spec is not compatible with ES5 style classes. This
means ES2015 code compiled to ES5 will not work with a native
implementation of Custom Elements. To support browsers that natively
support Custom Elements but not ES2015 modules, we load
`@webcomponents/custom-elements/src/native-shim.js`, which minimally
augments the native implementation to be compatible with ES5 code.
(See [here][1] for more details.)

Previously, the shim was included in `polyfills.ts`, which meant it was
loaded in all browsers (even those supporting ES2015 modules and thus
not needing the shim).

This commit moves the shim from `polyfills.ts` to a `nomodule` script
tag in `index.html`. This will ensure that it is only loaded in browsers
that do not support ES2015 modules and thus do not needed the shim.

NOTE:
This commit also reduces size of the polyfills bundle by ~400B
(52609B --> 52215B).

[1]: https://www.npmjs.com/package/@webcomponents/custom-elements#es5-vs-es2015

PR Close #41162
2021-03-11 09:25:32 -08:00
Kristiyan Kostadinov 3c66b100dd perf(common): remove unused methods from DomAdapter (#41102)
The `DomAdapter` is present in all Angular apps and its methods aren't tree shakeable.
These changes remove the methods that either aren't being used anymore or were only
used by our own tests. Note that these changes aren't breaking, because the adapter
is an internal API.

The following methods were removed:
* `getProperty` - only used within our own tests.
* `log` - Guaranteed to be defined on `console`.
* `logGroup` and `logGroupEnd` - Only used in one place. It was in the DomAdapter for built-in null checking.
* `logGroupEnd` - Only used in one place. It was placed in the DomAdapter for built in null checking.
* `performanceNow` - Only used in one place that has to be invoked through the browser console.
* `supportsCookies` - Unused.
* `getCookie` - Unused.
* `getLocation` and `getHistory` - Only used in one place which appears to have access to the DOM
already, because it had direct accesses to `window`. Furthermore, even if this was being used
in a non-browser context already, the `DominoAdapter` was set up to throw an error.

The following APIs were changed to be more compact:
* `supportsDOMEvents` - Changed to a readonly property.
* `remove` - No longer returns the removed node.

PR Close #41102
2021-03-10 11:48:24 -08:00
pniedermeyer 4c79b8a644 docs: Remove of unnecessary Input (#41150)
remove unnecessary Input

PR Close #41150
2021-03-10 11:20:01 -08:00
Alan Agius ba81e8cc94 build: remove commit message max line length limit (#41157)
With this change we remove the lines length restriction in commit message body. This was previously in place due to a bug in GitHub UI, which is now fixed.

PR Close #41157
2021-03-10 11:05:43 -08:00
Pete Bacon Darwin b5e8c28640 fix(localize): render correct closing tag placeholder names in XLIFF 2 (#41152)
When there are elements in a translated message, the start and end tags
are encoded as placeholders. The names of these placeholders are computed
from the name of the element. For example `<a> will be `START_LINK` and
`</a>` will be `CLOSE_LINK`.

If there are more than one element with the same name, but different attributes,
then the starting placeholder name is made unique.
For example `<a href="a">` would be `START_LINK`, while `<a href="b">` in
the same message would then be called `START_LINK_1`.
But the closing tags will not be made unique since there are no attrbutes;
the always have the same text `</a>`, which will produce, for example,
`CLOSE_LINK`.

Previously, when extracting XLIFF 2 formatted translation files, the closing
tag placeholder names were computed incorrectly from the opening tag
placeholder names. For example `CLOSE_LINK_1`.

This commit strips these `_1` type endings from the start tag placeholder
name when computing the closing tag placeholder name. It also ensures
that the `type` of the placeholder is computed accurately in these cases
too.

Fixes #41142

PR Close #41152
2021-03-10 10:59:59 -08:00
Andrew Kushnir 1fb0dbb300
release: cut the v12.0.0-next.4 release (#41156) 2021-03-10 10:03:45 -08:00
Andrew Kushnir ab15e61656 docs: release notes for the v11.2.5 release 2021-03-10 18:00:13 +00:00
Joey Perrott 41b8f98744 build: update the lock closed sha to the latest sha (#41140)
Update to use the latest lock closed sha, additionally use the full length sha for
referencing the exact version to use.

PR Close #41140
2021-03-09 13:24:50 -08:00
JoostK b50d88073e perf(compiler-cli): ensure module resolution cache is reused for type-check program (#39693)
The Angular compiler creates two `ts.Program`s; one for emit and one for
template type-checking. The creation of the type-check program could
benefit from reusing the `ts.ModuleResolutionCache` that was primed
during the creation of the emit program. This requires that the compiler
host implements `resolveModuleNames`, as otherwise TypeScript will setup
a `ts.ModuleResolutionHost` of its own for both programs.

This commit ensures that `resolveModuleNames` is always implemented,
even if the originally provided compiler host does not. This is
beneficial for the `ngc` binary.

PR Close #39693
2021-03-09 10:41:08 -08:00
Theoklitos Bampouris e29a29ce9f docs(common): change misspelled constant (#41136)
Change misspelled constant from LOCAL_ID to LOCALE_ID
PR Close #41136
2021-03-09 08:57:38 -08:00
Aristeidis Bampakos a730315fb2 docs: use double quotes in Tour of Heroes (pt1) (#41134)
Use double quotes to be consistent across the component template

PR Close #41134
2021-03-09 08:56:50 -08:00
George Kalpakas f281310d39 fix(docs-infra): print info to help debugging SW cache issue (#41106)
From time to time, an angular.io page fails to load due to requesting a
file that cannot be found neither on the server nor in the cache. We
believe this is caused by the browser's partially clearing a cache.
See #28114 for more details.

Some time ago, we introduced [SwUpdate#unrecoverable][1] to help work
around this issue by [reloading the page][2] when such an error is
detected.

However, this issue still pops up occasionally (for example, #41073).

In an attempt to help diagnose the issue, this commit prints more info
regarding the SW state and cache content when this error occurs. It will
result in something like the following being printed to the console:

```
ServiceWorker: activated

Cache: ngsw:/:db:control (2 entries)
  - https://angular.io/assignments: {"f5f02035-ee1f-463c-946c-e8b85badca25":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"}
  - https://angular.io/latest: {"latest":"5c95f89a85255a6fefb4045a20f751ef32b2f3a4"}

Cache: ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:cache (24 entries)
  - https://angular.io/0-es2015.867022f8bb092ae1efb1.worker.js
  - https://angular.io/announcement-bar-announcement-bar-module-es2015.1b5b762c9c8837c770f8.js
  - https://angular.io/api-api-list-module-es2015.40a43cd22f50f64d63bb.js
  ...

Cache: ngsw:/:db:ngsw:/:5c95f89a85255a6fefb4045a20f751ef32b2f3a4:assets:app-shell:meta (1 entries)
  - https://angular.io/https://fonts.gstatic.com/s/robotomono/v13/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2:
      {"ts":1615031956601,"used":true}

If you see this error, please report an issue at https://github.com/angular/angular/issues/new?template=3-docs-bug.md
including the above logs.
```

NOTE:
This change increases the main bundle by 1649B (0.37%), but it can be
reverted as soon as we gather enough info to diagnose the issue.

[1]: https://angular.io/api/service-worker/SwUpdate#unrecoverable
[2]: https://github.com/angular/angular/blob/c676ec1ce5d586d4bc46/aio/src/app/sw-updates/sw-updates.service.ts#L55-L61

PR Close #41106
2021-03-09 08:54:52 -08:00
George Kalpakas 7a27cd262f refactor(docs-infra): simplify code snippet indentation in the "Cheat sheet" guide (#41051)
Previously, the indentation of code snippets in the "Cheat sheet" guide
was done using `<br>` elements (for line breaks) and `&emsp;` HTML
entities (for space). This was laborious and put the onus on the author
to remember to use these symbols (instead of regular whitespace
characters).
(Discussed in
https://github.com/angular/angular/pull/41051#discussion_r585651621.)

This commit changes the way `<code>` elements are styles inside the
"Cheat sheet" guide to allow using regular whitespace characters in code
snippets. It also changes all `<br>`/`&emsp;` occurrences to `\n`/`  `
respectively to make code snippets more readable in the source code.

PR Close #41051
2021-03-09 08:52:52 -08:00
George Kalpakas d7398d3025 fix(docs-infra): improve the layout of the "Features" page on medium screens (#41051)
The "Features" page organizes features in groups/rows of 3 features
each. On wide screens, all 3 paragraphs of a group/row can be shown next
to each other. On narrow screens (between 768px and 1057px), the layout
changes to stack the paragraphs vertically. On medium screens, however,
there is not enough space to show more than two paragraphs next to each
other.

Previously, the 3rd paragraph was wrapped over to the next line.

This commit improves the layout on medium screens by switching to
immediately stacking the paragraphs vertically as soon as there is not
enough space for them to be displayed in one row. Since the total width
is still too much for one paragraph, the paragraphs are limited to 80%
of the total width.

Before (on 1000px width): [features page (on 1000px) before][1]
After (on 1000px width): [features page (on 1000px) after][2]

[1]: https://user-images.githubusercontent.com/8604205/109825316-62128a00-7c42-11eb-8391-650201257274.png
[2]: https://user-images.githubusercontent.com/8604205/109825323-6343b700-7c42-11eb-86c1-e8307c5a727a.png

PR Close #41051
2021-03-09 08:52:52 -08:00
George Kalpakas 1054d554d8 fix(docs-infra): avoid truncating several API list items (#41051)
Previously, with the min width of 220px per item, several API list items
were truncated.

This commit increases the min width per item to 330px, which allows
almost all items to have their full text shown. It also increases the
API list page's max content width from 50em (800px) to 62.5em (1000px)
to allow items to be shown on three columns despite their increased
width. This increase in the content width shouldn't negatively affect
UX, since the API list page uses a multi-column layout (i.e. it does not
contain 1000px-lines of text.)

Before: ![api-list before][1]
After: ![api-list after][2]

[1]: https://user-images.githubusercontent.com/8604205/109396457-5f5e1f00-793a-11eb-80cf-1418f409325a.png
[2]: https://user-images.githubusercontent.com/8604205/109396659-499d2980-793b-11eb-95d3-f54250f7fab5.png

PR Close #41051
2021-03-09 08:52:52 -08:00
George Kalpakas a926fd020b fix(docs-infra): show ellipsis when text overflows in API list items (#41051)
Previously, when an API list item's text overflowed its container, it
was just hidden. This made it often difficult to realize that there was
more text.

This commit fixes this by ensuring an ellipsis (`...`) is shown when the
text overflows.

Before: ![api-list truncated before][1]
After: ![api-list truncated after][2]

[1]: https://user-images.githubusercontent.com/8604205/109396186-0cd03300-7939-11eb-921c-00621a3889a4.png
[2]: https://user-images.githubusercontent.com/8604205/109396187-0e016000-7939-11eb-9f3b-4535be083417.png

PR Close #41051
2021-03-09 08:52:52 -08:00
George Kalpakas 304a32b655 fix(docs-infra): limit max content width on "Contributors" and "Cheat sheet" pages (#41051)
Previously, the content width on the "Contributors" page (`/about`) and
the "Cheat sheet" guide (`/guide/cheatsheet`) was unlimited (i.e. the
content would take up all the available space horizontally). This was
not very ergonomic on large screens. Especially on the "Cheat sheet"
guide there was a lot of unnecessary whitespace between the code shown
on the left column and the description shown on the right column.

This commit fixes this by setting a max content width for both pages of
84em (1404px by default). This keeps the content at a more manageable
width and avoids unnecessary whitespace.

Before (contributors): ![contributors page on 2500px before][1]
Before (cheatsheet): ![cheatsheet on 2500px before][2]
After (contributors): ![contributors page on 2500px after][3]
After (cheatsheet): ![cheatsheet on 2500px after][4]

[1]: https://user-images.githubusercontent.com/8604205/109394323-1bb1e800-792f-11eb-9cd6-c5b83e5ae921.png
[2]: https://user-images.githubusercontent.com/8604205/109394329-1fde0580-792f-11eb-91c0-4ed7ad408b17.png
[3]: https://user-images.githubusercontent.com/8604205/109394319-181e6100-792f-11eb-9463-a281dfe80448.png
[4]: https://user-images.githubusercontent.com/8604205/109394330-210f3280-792f-11eb-9837-ddc7a8d01d19.png

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas 4907d644bb refactor(docs-infra): use more consistent content width on marketing pages (#41051)
Previously, each marketing page used a different limit for its content's
width (if it had a limit at all) and implemented the width limiting in a
different way. Besides resulting in an inconsistent UX, this also made
it difficult to apply site-wide layout changes.

This commit makes the limit for most marketing pages consistent and uses
the same CSS class to make it easier to apply site-wide changes in the
future. The chosen limit is slightly larger than that of docs pages
(62.5em/1000px vs 50em/800px), because marketing pages have a different
type of content and layout (i.e. images, multi-column layout, etc.).
Finally, this commit also removes obsolete wrapper elements, CSS classes
and CSS styles, that are no longer necessary after the changes.

Notably, the homepage (`/`) and the "Contributors" page (`/about`) have
remained unchanged, because the former has its own layout that is
different from other marketing pages and the latter would offer a worse
UX with a small content width limit (as the one used on other marketing
pages).

The content widths of the rest of the marketing pages change slightly as
a result of the changes in this commit, but not in a way that would have
a negative impact on UX. More specifically:

| Page (URL)    | Size before | Size after |
|:--------------|------------:|-----------:|
| `/contribute` |       880px |     1000px |
| `/events`     |   unlimited |     1000px |
| `/features`   |       996px |     1000px |
| `/presskit`   |       800px |     1000px |
| `/resources`  |       800px |     1000px |

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas 8365bc8946 refactor(docs-infra): fix code indentation in `ContributorListComponent`'s template (#41051)
This commit fixes the indentation of the template of
`ContributorListComponent` to make it more readable.

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas 1b38b413de docs: fix indentation of code snippets in the "Cheat sheet" guide (#41051)
Previously, the indentation of code snippets in the "Cheat sheet" guide
was done using regular spaces. However, leading whitespace is ignored in
HTML elements (by default), which resulted in the identation being lost.

This commit fixes this by using the `&emsp;` HTML entity for
indentation, ensuring the code snippets are easier to read.

Some examples:

Before: ![cheatsheet code indentation before][1]
After: ![cheatsheet code since PR 40944][2]

[1]: https://user-images.githubusercontent.com/8604205/109385242-218dd600-78fb-11eb-9261-18ab5f2c308c.png
[2]: https://user-images.githubusercontent.com/8604205/109385246-25b9f380-78fb-11eb-8e82-d8a561deba21.png

PR Close #41051
2021-03-09 08:52:51 -08:00
George Kalpakas 76daca800e refactor(docs-infra): remove unnecessary wrapper `<div>` from the "Cheat sheet" guide (#41051)
This commit removes an unnecessary wrapper `<div>` from the
"Cheat sheet" guide. The CSS styles that referenced the element's ID
(`#cheatsheet`) have been updated to use `.page-guide-cheatsheet`
instead.

PR Close #41051
2021-03-09 08:52:51 -08:00