-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #425 from phase2/feature/controller-docs
feat(updates): Documentation and Storybook updates.
- Loading branch information
Showing
14 changed files
with
434 additions
and
363 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,19 @@ | ||
| # @phase2/outline-form | ||
|
|
||
| ## 0.1.6 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - Updated dependencies | ||
| - @phase2/outline-controller-light-dom-styles[email protected] | ||
|
|
||
| ## 0.1.5 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - Updated dependencies | ||
| - @phase2/outline-controller-light-dom-styles[email protected] | ||
|
|
||
| ## 0.1.4 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
packages/controllers/@deprecated/light-dom-styles/CHANGELOG.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,53 @@ | ||
| # AdoptedStyleSheets Controller | ||
| # `AdoptedStylesheets` Controller | ||
|
|
||
| The `AdoptedStyleSheets` controller is a part of the `@phase2/outline-adopted-stylesheets-controller` package. This controller helps components attach "global" document styles without duplication at the component level as well as de-duping any previous inclusions into `AdoptedStyleSheets`. | ||
| [](https://www.npmjs.com/package/@phase2/outline-adopted-stylesheets-controller) | ||
|
|
||
| > The `AdoptedStylesheets` controller is a part of the `@phase2/outline-adopted-stylesheets-controller` package. This controller helps components attach "global" document styles without duplication at the component level as well as de-duping any previous inclusions into `AdoptedStylesheets`. | ||
| ## Installing the `AdoptedStylesheets` Controller | ||
|
|
||
| Install the new package: | ||
|
|
||
| ```bash | ||
| yarn add @phase2/outline-adopted-stylesheets-controller | ||
| ``` | ||
|
|
||
| ## Overview | ||
|
|
||
| Adopted stylesheets are a way to apply styles to a document or a shadow root. They are a part of the CSS Shadow Parts specification. You can read more about them [here](https://wicg.github.io/construct-stylesheets/). | ||
| Adopted stylesheets are a method to apply styles to a document or a shadow root. They are a part of the CSS Shadow Parts specification. Unfortunately, the original documentation link is no longer available. However, you can find more information about adopted stylesheets and their usage in web components in the following resources: | ||
|
|
||
| - [MDN Web Docs: Document adoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets): This documentation provides an in-depth look at the `adoptedStyleSheets` property of the `Document` interface. | ||
| - [MDN Web Docs: ShadowRoot adoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets): This documentation provides an in-depth look at the `adoptedStyleSheets` property of the `ShadowRoot` interface. | ||
|
|
||
| ## Methods | ||
|
|
||
| The `AdoptedStyleSheets` controller provides the following methods: | ||
| The `AdoptedStylesheets` controller provides the following methods: | ||
|
|
||
| - `constructor(globalStyles: CSSResult)`: This method is used to create a new instance of the `AdoptedStyleSheets` controller. It takes a `CSSResult` object as a parameter, which represents the global styles to be adopted. | ||
| - `constructor(globalStyles: CSSResult)`: This method is used to create a new instance of the `AdoptedStylesheets` controller. It takes a `CSSResult` object as a parameter, which represents the global styles to be adopted. | ||
|
|
||
| - `hostConnected()`: This method is called when the host element is connected to the DOM. It adds the document's stylesheet to the adopted stylesheets if it is not already present. | ||
|
|
||
| - `hostDisconnected()`: This method is called when the host element is disconnected from the DOM. It removes the document's stylesheet from the adopted stylesheets if it is present. | ||
|
|
||
| ## Usage | ||
|
|
||
| Here is an example of how to use the `AdoptedStyleSheets` controller in a component: | ||
| Here is an example of how to use the `AdoptedStylesheets` controller in a component: | ||
|
|
||
| ```typescript | ||
| import { AdoptedStyleSheets } from '@phase2/outline-adopted-stylesheets-controller'; | ||
| import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller'; | ||
| import { css, CSSResult } from 'lit'; | ||
| import { OutlineElement } from '@phase2/outline-core'; | ||
| import globalStyles from './my-component.lightDom.css.lit'; | ||
|
|
||
| class MyComponent extends OutlineElement { | ||
| adoptedStylesheets: AdoptedStyleSheets; | ||
| AdoptedStylesheets: AdoptedStylesheets; | ||
|
|
||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| this.adoptedStylesheets = new AdoptedStyleSheets(globalStyles); | ||
| this.addController(this.adoptedStylesheets); | ||
| this.AdoptedStylesheets = new AdoptedStylesheets(globalStyles); | ||
| this.addController(this.AdoptedStylesheets); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| In the provided example, the `connectedCallback` method is utilized. This method is invoked whenever the element is inserted into the DOM. Within this method, an instance of `AdoptedStyleSheets` is created and added as a controller. This is a more efficient approach than creating the instance and adding the controller within the `constructor`. The reason for this is that it delays these operations until the element is actually inserted into the DOM. If there are many such elements that are created but not immediately added to the DOM, this approach can significantly improve the startup performance of your application. Therefore, the `connectedCallback` method is a crucial part of managing the lifecycle of a web component, especially when dealing with adopted stylesheets. | ||
| In the provided example, the `connectedCallback` method is utilized. This method is invoked whenever the element is inserted into the DOM. Within this method, an instance of `AdoptedStylesheets` is created and added as a controller. This is a more efficient approach than creating the instance and adding the controller within the `constructor`. The reason for this is that it delays these operations until the element is actually inserted into the DOM. If there are many such elements that are created but not immediately added to the DOM, this approach can significantly improve the startup performance of your application. Therefore, the `connectedCallback` method is a crucial part of managing the lifecycle of a web component, especially when dealing with adopted stylesheets. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,11 @@ | ||
| # @phase2/outline-storybook | ||
|
|
||
| ## 0.1.1 | ||
|
|
||
| ### Patch Changes | ||
|
|
||
| - Documentation updates | ||
|
|
||
| ## 0.1.0 | ||
|
|
||
| ### Minor Changes | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.