From 71629c9f10e176b5bf044482e701981defb8bd2c Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Fri, 15 Sep 2023 14:47:38 -0400 Subject: [PATCH 1/5] fix(playground): better handle multiple files for Javascript --- src/components/global/Playground/index.tsx | 1 + src/components/global/Playground/stackblitz.utils.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index c7ab14d5a35..3db6372dcf7 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -372,6 +372,7 @@ export default function Playground({ // using outerText will preserve line breaks for formatting in Stackblitz editor codeBlock = codeRef.current.querySelector('code').outerText; } else { + codeBlock = codeRef.current.querySelector('code').outerText; 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..170f5be3cb8 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)); - - // Add or remove the "dark" class on the document body - function toggleDarkTheme(shouldAdd) { - document.body.classList.toggle('dark', shouldAdd); - } - - - - - - + /* 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..d6c0f7a0689 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 - - - - - - - - - - + /* This sets a different background and item background in light mode on ios */ + .ios body { + --ion-background-color: #f2f2f6; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; + } + + /* This sets a different background and item background in light mode on md */ + .md body { + --ion-background-color: #f9f9f9; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; + } + + /* This is added for the flashing that happens when toggling between themes */ + ion-item { + --transition: none; + } + ``` From fce168691f996c99bc9f2b43cdd2499de1c41873 Mon Sep 17 00:00:00 2001 From: Shawn Taylor Date: Mon, 18 Sep 2023 13:54:26 -0400 Subject: [PATCH 3/5] Fix indentation --- static/usage/v7/theming/automatic-dark-mode/javascript.md | 6 +++--- static/usage/v7/theming/manual-dark-mode/javascript.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/static/usage/v7/theming/automatic-dark-mode/javascript.md b/static/usage/v7/theming/automatic-dark-mode/javascript.md index 170f5be3cb8..0300924c4e0 100644 --- a/static/usage/v7/theming/automatic-dark-mode/javascript.md +++ b/static/usage/v7/theming/automatic-dark-mode/javascript.md @@ -60,9 +60,9 @@