diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index c7ab14d5a35..386525467cc 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -366,12 +366,10 @@ export default function Playground({ version, }; - let codeBlock; - if (!hasUsageTargetOptions) { - // codeSnippets are React components, so we need to get their rendered text - // using outerText will preserve line breaks for formatting in Stackblitz editor - codeBlock = codeRef.current.querySelector('code').outerText; - } else { + // using outerText will preserve line breaks for formatting in Stackblitz editor + const codeBlock = codeRef.current.querySelector('code').outerText; + + if (hasUsageTargetOptions) { editorOptions.files = Object.keys(codeSnippets[usageTarget]) .map((fileName) => ({ [fileName]: hostRef.current!.querySelector(`#${getCodeSnippetId(usageTarget, fileName)} code`) diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts index f379a2d472c..c711d7212bc 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -68,7 +68,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => { const package_json = defaultFiles[3]; - files[indexHtml] = files[indexHtml].replace(/{{ TEMPLATE }}/g, code).replace( + files[indexHtml] = defaultFiles[1].replace(/{{ TEMPLATE }}/g, code).replace( '', ` - - + function dismiss() { + modal.dismiss(); + } + ``` diff --git a/static/usage/v7/input/mask/javascript/index_html.md b/static/usage/v7/input/mask/javascript/index_html.md index de58d9ded47..bf7aadd8150 100644 --- a/static/usage/v7/input/mask/javascript/index_html.md +++ b/static/usage/v7/input/mask/javascript/index_html.md @@ -1,58 +1,45 @@ ```html - - - - - + + + + + + + + - - - - - - - - - - - - + - - - + window.addEventListener('appload', () => { + initCardMask(); + initPhoneMask(); + }); + ``` diff --git a/static/usage/v7/modal/styling/animations/javascript/index_html.md b/static/usage/v7/modal/styling/animations/javascript/index_html.md index 0eb4709069f..d7210184ac2 100644 --- a/static/usage/v7/modal/styling/animations/javascript/index_html.md +++ b/static/usage/v7/modal/styling/animations/javascript/index_html.md @@ -1,106 +1,95 @@ ```html - - - - - + + + App + + + + Open Modal - - - - - App - - - - Open Modal + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + - - - - Modal - - Close - - - - - - - - - - -

Connor Smith

-

Sales Rep

- - - - - - - -

Daniel Smith

-

Product Designer

- - - - - - - -

Greg Smith

-

Director of Operations

- - - - - - - -

Zoey Smith

-

CEO

- - - - - - - + - - + function dismiss() { + modal.dismiss(); + } + ``` diff --git a/static/usage/v7/theming/automatic-dark-mode/javascript.md b/static/usage/v7/theming/automatic-dark-mode/javascript.md index 9e65673ba8d..0300924c4e0 100644 --- a/static/usage/v7/theming/automatic-dark-mode/javascript.md +++ b/static/usage/v7/theming/automatic-dark-mode/javascript.md @@ -1,105 +1,86 @@ ```html - - - - + + + + + + Display + + + + + + + - - + + Appearance + + Text Size + + Bold Text + + - - - - - - - - Display - - - - - - - + Brightness + + + + + + + + + True Tone + + - - Appearance - - Text Size - - Bold Text - - + + + Night Shift + 9:00 PM to 8:00 AM + + + - Brightness - - - - - - - - - True Tone - - + - // Listen for changes to the prefers-color-scheme media query - prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); + - - - + /* This is added for the flashing that happens when toggling between themes */ + ion-item { + --transition: none; + } + ``` diff --git a/static/usage/v7/theming/manual-dark-mode/javascript.md b/static/usage/v7/theming/manual-dark-mode/javascript.md index 0b01544ae9b..33173b9eea3 100644 --- a/static/usage/v7/theming/manual-dark-mode/javascript.md +++ b/static/usage/v7/theming/manual-dark-mode/javascript.md @@ -1,132 +1,113 @@ ```html - - - - - - - - - - - - - - - - Display - - - - - - - - - - Appearance - - - Dark Mode - - - - - Text Size - - Bold Text - - - - Brightness - - - - - - - - - True Tone - - - - - - Night Shift - 9:00 PM to 8:00 AM - - - - - - - - - - + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + ```