From cda5db339a3086681ea980e95412f71d7af0e51e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 17 Oct 2023 09:53:12 -0400 Subject: [PATCH 1/6] docs(textarea): fix specificity theming issue --- .../theming/angular/example_component_css.md | 5 ----- .../v7/textarea/theming/angular/global_css.md | 14 ++++++++++++++ static/usage/v7/textarea/theming/demo.html | 6 ++++-- static/usage/v7/textarea/theming/index.md | 2 ++ static/usage/v7/textarea/theming/javascript.md | 6 ++++-- static/usage/v7/textarea/theming/react/main_css.md | 6 ++++-- static/usage/v7/textarea/theming/vue.md | 6 ++++-- 7 files changed, 32 insertions(+), 13 deletions(-) create mode 100644 static/usage/v7/textarea/theming/angular/global_css.md diff --git a/static/usage/v7/textarea/theming/angular/example_component_css.md b/static/usage/v7/textarea/theming/angular/example_component_css.md index dae0d52310e..37a2f874cdc 100644 --- a/static/usage/v7/textarea/theming/angular/example_component_css.md +++ b/static/usage/v7/textarea/theming/angular/example_component_css.md @@ -7,9 +7,4 @@ ion-textarea.custom { --placeholder-color: #ddd; --placeholder-opacity: 0.8; } - -ion-textarea.custom .helper-text, -ion-textarea.custom .counter { - color: #373737; -} ``` diff --git a/static/usage/v7/textarea/theming/angular/global_css.md b/static/usage/v7/textarea/theming/angular/global_css.md new file mode 100644 index 00000000000..7142d5293f3 --- /dev/null +++ b/static/usage/v7/textarea/theming/angular/global_css.md @@ -0,0 +1,14 @@ +```css +/** + * Since we are styling elements inside of ion-textarea + * we need to move this CSS to a global stylesheet. Otherwise, + * Angular components with encapsulation enabled will add + * scoped style attributes to these selectors. + */ +ion-textarea.custom.ios .textarea-bottom .helper-text, +ion-textarea.custom.ios .textarea-bottom .counter, +ion-textarea.custom.md .textarea-bottom .helper-text, +ion-textarea.custom.md .textarea-bottom .counter { + color: #373737; +} +``` \ No newline at end of file diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html index 4a0f043efb4..5ea24d510e6 100644 --- a/static/usage/v7/textarea/theming/demo.html +++ b/static/usage/v7/textarea/theming/demo.html @@ -22,8 +22,10 @@ --placeholder-opacity: 0.8; } - ion-textarea.custom .helper-text, - ion-textarea.custom .counter { + ion-textarea.custom.ios .textarea-bottom .helper-text, + ion-textarea.custom.ios .textarea-bottom .counter, + ion-textarea.custom.md .textarea-bottom .helper-text, + ion-textarea.custom.md .textarea-bottom .counter { color: #373737; } diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md index 9042fb29fa4..3a50362dcee 100644 --- a/static/usage/v7/textarea/theming/index.md +++ b/static/usage/v7/textarea/theming/index.md @@ -9,6 +9,7 @@ import vue from './vue.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_css from './angular/example_component_css.md'; +import angular_global_css from './angular/global_css.md'; diff --git a/static/usage/v7/textarea/theming/react/main_css.md b/static/usage/v7/textarea/theming/react/main_css.md index dae0d52310e..04550b6ed83 100644 --- a/static/usage/v7/textarea/theming/react/main_css.md +++ b/static/usage/v7/textarea/theming/react/main_css.md @@ -8,8 +8,10 @@ ion-textarea.custom { --placeholder-opacity: 0.8; } -ion-textarea.custom .helper-text, -ion-textarea.custom .counter { +ion-textarea.custom.ios .textarea-bottom .helper-text, +ion-textarea.custom.ios .textarea-bottom .counter, +ion-textarea.custom.md .textarea-bottom .helper-text, +ion-textarea.custom.md .textarea-bottom .counter { color: #373737; } ``` diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md index c7cef62ba4a..3b418119d1a 100644 --- a/static/usage/v7/textarea/theming/vue.md +++ b/static/usage/v7/textarea/theming/vue.md @@ -9,8 +9,10 @@ --placeholder-opacity: 0.8; } - ion-textarea.custom .helper-text, - ion-textarea.custom .counter { + ion-textarea.custom.ios .textarea-bottom .helper-text, + ion-textarea.custom.ios .textarea-bottom .counter, + ion-textarea.custom.md .textarea-bottom .helper-text, + ion-textarea.custom.md .textarea-bottom .counter { color: #373737; } From a1ab732dd3038fc587c45a1412090aec48291713 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 17 Oct 2023 09:57:39 -0400 Subject: [PATCH 2/6] docs(input): fix specificity issue with theming --- .../angular/example_component_css.md | 5 ----- .../theming/css-properties/angular/global_css.md | 14 ++++++++++++++ .../v7/input/theming/css-properties/demo.html | 8 +++++--- .../usage/v7/input/theming/css-properties/index.md | 2 ++ .../v7/input/theming/css-properties/javascript.md | 6 ++++-- .../input/theming/css-properties/react/main_css.md | 8 +++++--- .../usage/v7/input/theming/css-properties/vue.md | 6 ++++-- 7 files changed, 34 insertions(+), 15 deletions(-) create mode 100644 static/usage/v7/input/theming/css-properties/angular/global_css.md diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md index 3aa7fddda86..4885a193f87 100644 --- a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md @@ -10,9 +10,4 @@ ion-input.custom { --padding-start: 10px; --padding-top: 10px; } - -ion-input.custom .helper-text, -ion-input.custom .counter { - color: var(--ion-color-step-700, #373737); -} ``` diff --git a/static/usage/v7/input/theming/css-properties/angular/global_css.md b/static/usage/v7/input/theming/css-properties/angular/global_css.md new file mode 100644 index 00000000000..81371bb9726 --- /dev/null +++ b/static/usage/v7/input/theming/css-properties/angular/global_css.md @@ -0,0 +1,14 @@ +```css +/** + * Since we are styling elements inside of ion-textarea + * we need to move this CSS to a global stylesheet. Otherwise, + * Angular components with encapsulation enabled will add + * scoped style attributes to these selectors. + */ +ion-input.custom.ios .input-bottom .helper-text, +ion-input.custom.ios .input-bottom .counter, +ion-input.custom.md .input-bottom .helper-text, +ion-input.custom.md .input-bottom .counter { + color: var(--ion-color-step-700, #373737); +} +``` diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html index 9acf641e5ff..491dd2b9812 100644 --- a/static/usage/v7/input/theming/css-properties/demo.html +++ b/static/usage/v7/input/theming/css-properties/demo.html @@ -27,9 +27,11 @@ --padding-top: 10px; } - ion-input.custom .helper-text, - ion-input.custom .counter { - color: var(--ion-color-step-700, #373737); + ion-input.custom.ios .input-bottom .helper-text, + ion-input.custom.ios .input-bottom .counter, + ion-input.custom.md .input-bottom .helper-text, + ion-input.custom.md .input-bottom .counter { + color: green; } diff --git a/static/usage/v7/input/theming/css-properties/index.md b/static/usage/v7/input/theming/css-properties/index.md index db7ffd5f993..b87bfe5194c 100644 --- a/static/usage/v7/input/theming/css-properties/index.md +++ b/static/usage/v7/input/theming/css-properties/index.md @@ -9,6 +9,7 @@ import vue from './vue.md'; import angular_example_component_html from './angular/example_component_html.md'; import angular_example_component_css from './angular/example_component_css.md'; +import angular_global_css from './angular/global_css.md'; diff --git a/static/usage/v7/input/theming/css-properties/react/main_css.md b/static/usage/v7/input/theming/css-properties/react/main_css.md index 45406a59340..2248742a91b 100644 --- a/static/usage/v7/input/theming/css-properties/react/main_css.md +++ b/static/usage/v7/input/theming/css-properties/react/main_css.md @@ -11,8 +11,10 @@ ion-input.custom { --padding-top: 10px; } -ion-input.custom .helper-text, -ion-input.custom .counter { - color: #373737; +ion-input.custom.ios .input-bottom .helper-text, +ion-input.custom.ios .input-bottom .counter, +ion-input.custom.md .input-bottom .helper-text, +ion-input.custom.md .input-bottom .counter { + color: var(--ion-color-step-700, #373737); } ``` diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md index 898bc493e16..1c3bc37210f 100644 --- a/static/usage/v7/input/theming/css-properties/vue.md +++ b/static/usage/v7/input/theming/css-properties/vue.md @@ -32,8 +32,10 @@ --padding-top: 10px; } - ion-input.custom .helper-text, - ion-input.custom .counter { + ion-input.custom.ios .input-bottom .helper-text, + ion-input.custom.ios .input-bottom .counter, + ion-input.custom.md .input-bottom .helper-text, + ion-input.custom.md .input-bottom .counter { color: var(--ion-color-step-700, #373737); } From 3c0f12a9e8c708b09b2c4c26b156f47019375322 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 17 Oct 2023 09:57:48 -0400 Subject: [PATCH 3/6] lint --- .../usage/v7/input/theming/css-properties/angular/global_css.md | 2 +- static/usage/v7/input/theming/css-properties/demo.html | 2 +- static/usage/v7/input/theming/css-properties/javascript.md | 2 +- static/usage/v7/input/theming/css-properties/react/main_css.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/static/usage/v7/input/theming/css-properties/angular/global_css.md b/static/usage/v7/input/theming/css-properties/angular/global_css.md index 81371bb9726..331507a6c09 100644 --- a/static/usage/v7/input/theming/css-properties/angular/global_css.md +++ b/static/usage/v7/input/theming/css-properties/angular/global_css.md @@ -8,7 +8,7 @@ ion-input.custom.ios .input-bottom .helper-text, ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, -ion-input.custom.md .input-bottom .counter { +ion-input.custom.md .input-bottom .counter { color: var(--ion-color-step-700, #373737); } ``` diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html index 491dd2b9812..e0d8c8446f3 100644 --- a/static/usage/v7/input/theming/css-properties/demo.html +++ b/static/usage/v7/input/theming/css-properties/demo.html @@ -30,7 +30,7 @@ ion-input.custom.ios .input-bottom .helper-text, ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, - ion-input.custom.md .input-bottom .counter { + ion-input.custom.md .input-bottom .counter { color: green; } diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md index 2195685abb3..ad2902a371d 100644 --- a/static/usage/v7/input/theming/css-properties/javascript.md +++ b/static/usage/v7/input/theming/css-properties/javascript.md @@ -24,7 +24,7 @@ ion-input.custom.ios .input-bottom .helper-text, ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, - ion-input.custom.md .input-bottom .counter { + ion-input.custom.md .input-bottom .counter { color: var(--ion-color-step-700, #373737); } diff --git a/static/usage/v7/input/theming/css-properties/react/main_css.md b/static/usage/v7/input/theming/css-properties/react/main_css.md index 2248742a91b..d40bfe3f5be 100644 --- a/static/usage/v7/input/theming/css-properties/react/main_css.md +++ b/static/usage/v7/input/theming/css-properties/react/main_css.md @@ -14,7 +14,7 @@ ion-input.custom { ion-input.custom.ios .input-bottom .helper-text, ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, -ion-input.custom.md .input-bottom .counter { +ion-input.custom.md .input-bottom .counter { color: var(--ion-color-step-700, #373737); } ``` From 8a1f2d0207950e8f2c5e7de266f5b3cc01d4c9c2 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 17 Oct 2023 09:58:00 -0400 Subject: [PATCH 4/6] more lint --- static/usage/v7/textarea/theming/angular/global_css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v7/textarea/theming/angular/global_css.md b/static/usage/v7/textarea/theming/angular/global_css.md index 7142d5293f3..5ed923b9604 100644 --- a/static/usage/v7/textarea/theming/angular/global_css.md +++ b/static/usage/v7/textarea/theming/angular/global_css.md @@ -11,4 +11,4 @@ ion-textarea.custom.md .textarea-bottom .helper-text, ion-textarea.custom.md .textarea-bottom .counter { color: #373737; } -``` \ No newline at end of file +``` From bba2102e65febcfb0ef7c045a57af946138704a6 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 17 Oct 2023 12:03:42 -0400 Subject: [PATCH 5/6] Update static/usage/v7/input/theming/css-properties/angular/global_css.md Co-authored-by: Maria Hutt --- .../usage/v7/input/theming/css-properties/angular/global_css.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/usage/v7/input/theming/css-properties/angular/global_css.md b/static/usage/v7/input/theming/css-properties/angular/global_css.md index 331507a6c09..011d7e097ce 100644 --- a/static/usage/v7/input/theming/css-properties/angular/global_css.md +++ b/static/usage/v7/input/theming/css-properties/angular/global_css.md @@ -1,6 +1,6 @@ ```css /** - * Since we are styling elements inside of ion-textarea + * Since we are styling elements inside of ion-input * we need to move this CSS to a global stylesheet. Otherwise, * Angular components with encapsulation enabled will add * scoped style attributes to these selectors. From b555e3190bc8a49cc1373c04a4fda965df9d0d9a Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 17 Oct 2023 12:07:28 -0400 Subject: [PATCH 6/6] use different color to make it clear the text is customized --- .../usage/v7/input/theming/css-properties/angular/global_css.md | 2 +- static/usage/v7/input/theming/css-properties/demo.html | 2 +- static/usage/v7/input/theming/css-properties/javascript.md | 2 +- static/usage/v7/input/theming/css-properties/react/main_css.md | 2 +- static/usage/v7/input/theming/css-properties/vue.md | 2 +- static/usage/v7/textarea/theming/angular/global_css.md | 2 +- static/usage/v7/textarea/theming/demo.html | 2 +- static/usage/v7/textarea/theming/javascript.md | 2 +- static/usage/v7/textarea/theming/react/main_css.md | 2 +- static/usage/v7/textarea/theming/vue.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/static/usage/v7/input/theming/css-properties/angular/global_css.md b/static/usage/v7/input/theming/css-properties/angular/global_css.md index 011d7e097ce..ba3ec022284 100644 --- a/static/usage/v7/input/theming/css-properties/angular/global_css.md +++ b/static/usage/v7/input/theming/css-properties/angular/global_css.md @@ -9,6 +9,6 @@ ion-input.custom.ios .input-bottom .helper-text, ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, ion-input.custom.md .input-bottom .counter { - color: var(--ion-color-step-700, #373737); + color: var(--ion-color-primary); } ``` diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html index e0d8c8446f3..8a6088ee7a3 100644 --- a/static/usage/v7/input/theming/css-properties/demo.html +++ b/static/usage/v7/input/theming/css-properties/demo.html @@ -31,7 +31,7 @@ ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, ion-input.custom.md .input-bottom .counter { - color: green; + color: var(--ion-color-primary); } diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md index ad2902a371d..5f81aae2da0 100644 --- a/static/usage/v7/input/theming/css-properties/javascript.md +++ b/static/usage/v7/input/theming/css-properties/javascript.md @@ -25,7 +25,7 @@ ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, ion-input.custom.md .input-bottom .counter { - color: var(--ion-color-step-700, #373737); + color: var(--ion-color-primary); } ``` diff --git a/static/usage/v7/input/theming/css-properties/react/main_css.md b/static/usage/v7/input/theming/css-properties/react/main_css.md index d40bfe3f5be..6dd25be2d40 100644 --- a/static/usage/v7/input/theming/css-properties/react/main_css.md +++ b/static/usage/v7/input/theming/css-properties/react/main_css.md @@ -15,6 +15,6 @@ ion-input.custom.ios .input-bottom .helper-text, ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, ion-input.custom.md .input-bottom .counter { - color: var(--ion-color-step-700, #373737); + color: var(--ion-color-primary); } ``` diff --git a/static/usage/v7/input/theming/css-properties/vue.md b/static/usage/v7/input/theming/css-properties/vue.md index 1c3bc37210f..77ab74eeeab 100644 --- a/static/usage/v7/input/theming/css-properties/vue.md +++ b/static/usage/v7/input/theming/css-properties/vue.md @@ -36,7 +36,7 @@ ion-input.custom.ios .input-bottom .counter, ion-input.custom.md .input-bottom .helper-text, ion-input.custom.md .input-bottom .counter { - color: var(--ion-color-step-700, #373737); + color: var(--ion-color-primary); } ``` diff --git a/static/usage/v7/textarea/theming/angular/global_css.md b/static/usage/v7/textarea/theming/angular/global_css.md index 5ed923b9604..c9c9c107cc6 100644 --- a/static/usage/v7/textarea/theming/angular/global_css.md +++ b/static/usage/v7/textarea/theming/angular/global_css.md @@ -9,6 +9,6 @@ ion-textarea.custom.ios .textarea-bottom .helper-text, ion-textarea.custom.ios .textarea-bottom .counter, ion-textarea.custom.md .textarea-bottom .helper-text, ion-textarea.custom.md .textarea-bottom .counter { - color: #373737; + color: var(--ion-color-primary); } ``` diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html index 5ea24d510e6..4cab52e4e47 100644 --- a/static/usage/v7/textarea/theming/demo.html +++ b/static/usage/v7/textarea/theming/demo.html @@ -26,7 +26,7 @@ ion-textarea.custom.ios .textarea-bottom .counter, ion-textarea.custom.md .textarea-bottom .helper-text, ion-textarea.custom.md .textarea-bottom .counter { - color: #373737; + color: var(--ion-color-primary); } diff --git a/static/usage/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md index 33a61027872..7e2da7069e1 100644 --- a/static/usage/v7/textarea/theming/javascript.md +++ b/static/usage/v7/textarea/theming/javascript.md @@ -22,7 +22,7 @@ ion-textarea.custom.ios .textarea-bottom .counter, ion-textarea.custom.md .textarea-bottom .helper-text, ion-textarea.custom.md .textarea-bottom .counter { - color: #373737; + color: var(--ion-color-primary); } ``` diff --git a/static/usage/v7/textarea/theming/react/main_css.md b/static/usage/v7/textarea/theming/react/main_css.md index 04550b6ed83..68e9b031149 100644 --- a/static/usage/v7/textarea/theming/react/main_css.md +++ b/static/usage/v7/textarea/theming/react/main_css.md @@ -12,6 +12,6 @@ ion-textarea.custom.ios .textarea-bottom .helper-text, ion-textarea.custom.ios .textarea-bottom .counter, ion-textarea.custom.md .textarea-bottom .helper-text, ion-textarea.custom.md .textarea-bottom .counter { - color: #373737; + color: var(--ion-color-primary); } ``` diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md index 3b418119d1a..8af2efe5c45 100644 --- a/static/usage/v7/textarea/theming/vue.md +++ b/static/usage/v7/textarea/theming/vue.md @@ -13,7 +13,7 @@ ion-textarea.custom.ios .textarea-bottom .counter, ion-textarea.custom.md .textarea-bottom .helper-text, ion-textarea.custom.md .textarea-bottom .counter { - color: #373737; + color: var(--ion-color-primary); }