mergeStyles: initial shadow DOM and constructable stylesheets implementation #28906
Conversation
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
spmonahan
changed the title
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit a2bae80:
|
|
/azp run |
|
Azure Pipelines could not run because the pipeline triggers exclude this branch/path. |
spmonahan
commented
Aug 17, 2023
| @@ -1,5 +1,6 @@ | |||
| pr: | |||
| - master | |||
| - shadow-dom # Remove before merging to master | |||
There was a problem hiding this comment.
|
/azp run |
|
Azure Pipelines successfully started running 1 pipeline(s). |
change/@fluentui-jest-serializer-merge-styles-8ad53e9f-3456-4924-b50d-48ffd979b2ce.json
Outdated
Show resolved
Hide resolved
change/@fluentui-merge-styles-284eeed7-0d8c-4ebf-a44c-1e34467aca9b.json
Outdated
Show resolved
Hide resolved
change/@fluentui-react-b73398fa-9e0a-4d05-97a4-7a4820a876c1.json
Outdated
Show resolved
Hide resolved
change/@fluentui-utilities-3b3cdc9c-0e4f-4c68-aee6-9040e041186c.json
Outdated
Show resolved
Hide resolved
behowell
reviewed
Aug 18, 2023
spmonahan
force-pushed
the
merge-styles/shadow-dom
branch
2 times, most recently
from
f677bb8
to
cd7a66b
Compare
spmonahan
requested review from
GeoffCoxMSFT,
a team,
ms-acalzaretto,
smhigley,
Jahnp and
bigbadcapers
as code owners
spmonahan
added a commit
that referenced
this pull request
Sep 6, 2023
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Oct 6, 2023
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Oct 9, 2023
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Oct 10, 2023
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Oct 11, 2023
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Oct 12, 2023
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Oct 26, 2023
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Nov 3, 2023
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Nov 16, 2023
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Dec 5, 2023
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Dec 15, 2023
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Jan 4, 2024
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Jan 5, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Feb 16, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Feb 16, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Feb 22, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Feb 23, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Feb 26, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Feb 26, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Feb 28, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Mar 1, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Mar 8, 2024
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Mar 23, 2024
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Mar 26, 2024
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Mar 28, 2024
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
to spmonahan/fluentui
that referenced
this pull request
Mar 29, 2024
…ntation (microsoft#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Apr 4, 2024
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Apr 15, 2024
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
spmonahan
added a commit
that referenced
this pull request
Apr 18, 2024
…ntation (#28906) * feat: update mergeStyles to support shadow DOM NOTE: this is stil a work in progress. - Refactors Stylesheet.ts to support shadow DOM - Adds React context and hooks for opting in to shadow DOM - Adds an API for projecting styles to child windows. * refactor and docs - Refactors stylesheet shadow DOM implementation a bit. - Adds a new docs page. * refactor to clean up types - Fixes various Typescript errors - Adds APIs to better encapsulate shadow DOM features * change files * add pipeline trigger * update test * fix typescript error * improve 'ShadowConfig' check * export ShadowConfig type * add constant for '__global__' * add default ShadowConfig * remove commented out line * better change file messages * remove IStyleSheetKey type * clean up * fix import path * add null checks before inserting styles * remove commented out code * refactor IStyleOptions to optionally include shadowConfig Adds an optional `shadowConfig` object to IStyleOptions. This allows us to pass the shadow DOM configuration object through to all the places we need it without modifying APIs to add a parameter for "shadowConfig". Aligns naming. Previously we had a type `ShadowConfig` and mostly referred to objects as "shadowConfig" but there were some instances of "shadowDom". Everything is now referred to by "shadowConfig/ShadowConfig". * update styleToClassName tests * update customizable tests * update component types for shadow DOM - remove "shadowDom" prop - update syles types to include "__shadowConfig__" key * remove unused variable * fix types in shadow dom example * add guard to calling requestAnimationFrame in Stylesheet This fix is for ssr-tests.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
NOTE: this feature is being merged into a non-master branch as it's not yet ready for stable release but we want to be able to stick with a more or less typical PR workflow.
Previous Behavior
mergeStylesdid not work with shadow DOM or constructable stylesheets.New Behavior
mergeStylesnow, optionally, supports shadow DOM and constructable stylesheets.This is missing many tests but I want to get it up for feedback.
Related Issue(s)
NOTE: replaces #28894 as I had a naming conflict with the git branches.