[Tidy] Remove CSS classes to position image (#919)

Co-authored-by: Antony Milne <[email protected]> Co-authored-by: Jo Stichbury <[email protected]>
mckinsey · Dec 4, 2024 · 66413e9 · 66413e9
1 parent c18a6eb
commit 66413e9
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 363 deletions.
diff --git a/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md b/vizro-core/changelog.d/20241204_135618_huong_li_nguyen_remove_custom_img_css.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Removed
+
+- Remove built-in CSS shortcuts `#floating-*` to float images. These can still be provided manually. ([#919](https://github.com/mckinsey/vizro/pull/919))
+
+
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard-first-page.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard-first-page.png
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard-second-page.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard-second-page.png
diff --git a/vizro-core/docs/pages/tutorials/explore-components.md b/vizro-core/docs/pages/tutorials/explore-components.md
@@ -104,7 +104,7 @@ The code below adds two components to the page:
             id="line_gdp",
             figure=px.line(gapminder_data, x="year", y="gdpPercap", color="continent",
                             labels={"year": "Year", "continent": "Continent",
-                            "gdpPercap":"GDP Per Cap"}, title=''),
+                            "gdpPercap":"GDP Per Cap"}),
         )
         ```
 
@@ -137,7 +137,7 @@ The code below adds two components to the page:
                 vm.Graph(
                     figure=px.line(gapminder_data, x="year", y="gdpPercap", color="continent",
                                     labels={"year": "Year", "continent": "Continent",
-                                    "gdpPercap":"GDP Per Cap"}, title=''),
+                                    "gdpPercap":"GDP Per Cap"}),
                 ),
 
             ],
@@ -460,46 +460,15 @@ You can apply selectors to configure [`Filters`][vizro.models.Filter] and [`Para
 
 ## 4. The final touches
 
-This section puts everything together by adding a homepage to the example for navigation between the two separate pages.
-
-For easy navigation within your dashboard, we'll create a page that serves as the entry point for the user. On this homepage are two [`Cards`][vizro.models.Card] which serve as tiles that can be customized with a title, some text, and an image. These cards link to the subpages within your dashboard using their `href` attributes as `href="/first-page"` and `href="/second-page"`. This establishes the navigation links from the homepage to each of the subpages.
-
-Each page is added to the dashboard using the following line of code: `vm.Dashboard(pages=[home_page, first_page, second_page])`. This ensures that all the pages are accessible.
+Each page is added to the dashboard using the following line of code: `vm.Dashboard(pages=[first_page, second_page])`. This ensures that all the pages are accessible.
 
-The code below illustrates a functional dashboard where you can navigate from the homepage to each of the subpages. Additionally, you can use the navigation panel on the left side to switch between the three pages.
+By default, a navigation panel on the left side enables the user to switch between the two pages.
 
 !!! example "Final dashboard"
     === "Code"
         ```python
-        home_page = vm.Page(
-            title="Homepage",
-            components=[
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/786167c822cce65fe85ffad8ed000d8553a5ef44/vizro-core/docs/assets/images/collections.svg#icon-top)
-
-                    ### First Page
-
-                    Exemplary first dashboard page.
-                    """,
-                    href="/first-page",
-                ),
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/786167c822cce65fe85ffad8ed000d8553a5ef44/vizro-core/docs/assets/images/features.svg#icon-top)
-
-                    ### Second Page
-
-                    Exemplary second dashboard page.
-                    """,
-                    href="/second-page",
-                ),
-            ],
-        )
-
-        ...
-
         dashboard = vm.Dashboard(pages=[home_page, first_page, second_page])
+        Vizro().build(dashboard).run()
         ```
 
     === "app.py"
@@ -509,32 +478,6 @@ The code below illustrates a functional dashboard where you can navigate from th
         import vizro.models as vm
         import vizro.plotly.express as px
 
-        home_page = vm.Page(
-            title="Homepage",
-            components=[
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/786167c822cce65fe85ffad8ed000d8553a5ef44/vizro-core/docs/assets/images/collections.svg)
-
-                    ### First Page
-
-                    Exemplary first dashboard page.
-                    """,
-                    href="/first-page",
-                ),
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/786167c822cce65fe85ffad8ed000d8553a5ef44/vizro-core/docs/assets/images/features.svg#icon-top)
-
-                    ### Second Page
-
-                    Exemplary second dashboard page.
-                    """,
-                    href="/second-page",
-                ),
-            ],
-        )
-
         df = px.data.gapminder()
         gapminder_data = (
                 df.groupby(by=["continent", "year"]).
@@ -603,13 +546,10 @@ The code below illustrates a functional dashboard where you can navigate from th
             ],
         )
 
-        dashboard = vm.Dashboard(pages=[home_page, first_page, second_page])
+        dashboard = vm.Dashboard(pages=[first_page, second_page])
         Vizro().build(dashboard).run()
         ```
 
-    === "Homepage"
-        [![FinalPage]][finalpage]
-
     === "Subpage1"
         [![FinalPage1]][finalpage1]
 
@@ -631,9 +571,8 @@ Vizro doesn't end here, and we only covered the key features, but there is still
 - How to use [Actions](../user-guides/actions.md) for example, for chart interaction or custom controls.
 - How to create dashboards from `yaml`, `dict` or `json` following the [dashboard guide](../user-guides/dashboard.md).
 
-[finalpage]: ../../assets/tutorials/dashboard/dashboard4.png
-[finalpage1]: ../../assets/tutorials/dashboard/dashboard2.png
-[finalpage2]: ../../assets/tutorials/dashboard/dashboard3.png
+[finalpage1]: ../../assets/tutorials/dashboard/dashboard-first-page.png
+[finalpage2]: ../../assets/tutorials/dashboard/dashboard-second-page.png
 [firstpage1]: ../../assets/tutorials/dashboard/dashboard21.png
 [firstpage2]: ../../assets/tutorials/dashboard/dashboard22.png
 [firstpage3]: ../../assets/tutorials/dashboard/dashboard23.png

diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md
@@ -322,18 +322,20 @@ Note the added URL hash `#my-image`. Now create a CSS file placed in your `asset
 
 Use the following pre-defined URL hashes in your image path to apply Vizro's default styling.
 
-#### To float the image next to the text:
+**To float the image next to the text:**
 
-- floating-left: `![](my_image.png#floating-left)`
-- floating-right: `![](my_image.png#floating-right)`
-- floating-center: `![](my_image.png#floating-center)`
+To float an image for example to the right of the text, use the `src` attribute as a CSS selector. Follow these steps:
+
+1. Add a hash (#) to the image URL, e.g., `![](assets/images/continents/europe.svg#my-image)`
+1. Target that hash in your custom CSS file `img[src*="#my-image"] { float: right; }`
 
 !!! example "Card with floating image"
     === "images.css"
         ```css
         img[src*="#my-image"] {
             width: 120px;
             height: 120px;
+            float: right;
         }
         ```
 
@@ -349,7 +351,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def
                         text="""
                         ### My card with floating image!
 
-                        ![](assets/images/continents/europe.svg#my-image#floating-right)
+                        ![](assets/images/continents/europe.svg#my-image)
 
                          Commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit.
 
@@ -381,7 +383,7 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def
         pages:
           - components:
               - text: |
-                  ![](assets/images/continents/europe.svg#my-image#floating-right)
+                  ![](assets/images/continents/europe.svg#my-image)
 
                   Commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit.
 
@@ -402,63 +404,17 @@ Use the following pre-defined URL hashes in your image path to apply Vizro's def
     === "Result"
         [![CardImageFloating]][cardimagefloating]
 
-#### Card with icon
-
-- default icon styling (`icon-top`): `![](my_image.png#icon-top)`
-
-!!! example "Card with icon"
-    === "app.py"
-        ```{.python pycafe-link}
-        import vizro.models as vm
-        from vizro import Vizro
-
-        page = vm.Page(
-            title="Card with icon",
-            components=[
-                vm.Card(
-                    text="""
-                    ![](https://raw.githubusercontent.com/mckinsey/vizro/d24a6f0d4efdf3c47392458e64b190fa1f92b2a7/vizro-core/docs/assets/images/hypotheses.svg#icon-top)
-
-                    ### Card Title
-
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla dictum lacus eget fringilla.
-                    Maecenas in various nibh, quis venenatis nulla. Integer et libero ultrices, scelerisque velit sed.
-                    """,
-                ),
-            ],
-        )
-
-        dashboard = vm.Dashboard(pages=[page])
-        Vizro().build(dashboard).run()
-        ```
-
-    === "app.yaml"
-        ```yaml
-        # Still requires a .py to add data to the data manager and parse YAML configuration
-        # See from_yaml example
-        pages:
-          - components:
-              - text: |
-                  ![](assets/images/icons/hypotheses.svg#icon-top)
-
-                  ### Card Title
-
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla dictum lacus eget fringilla.
-                  Maecenas in various nibh, quis venenatis nulla. Integer et libero ultrices, scelerisque velit sed.
-                type: card
-            title: Card with icon
-        ```
+### Make an icon responsive to theme switch
 
-    === "Result"
-        [![CardIcon]][cardicon]
+To make an icon responsive to theme switching, override its [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).
 
-### Make an icon responsive to theme switch
+In this example, we use the `--fill-icon-image-card` CSS variable from the `vizro-bootstrap` CSS file. It uses the `invert()` function to flip the icon's color during a theme switch.
 
-To make an icon responsive to the theme switch, override the value of the [`filter` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). The `filter` CSS property lets you add visual effects to elements using different functions. In our example, we're using the `--inverse-color` CSS variable from the Vizro theme. It uses the CSS `invert()` function to flip the color of the icon when you switch themes. Note that this only works if your initial icon has a white fill color. If your icon is not white, you can change its color by adding `fill="white"` to the SVG code. Assign the predefined CSS variable `--inverse-color` to the `filter` property of your selected icon.
+This approach works if your icon initially has a white fill color. If not, modify the SVG code by adding `fill="white"`.
 
 ```css
 img[src*="#my-image"] {
-    filter: var(--inverse-color);
+    filter: var(--fill-icon-image-card);
 }
 ```
 
@@ -720,7 +676,6 @@ vm.Page.add_type("controls", vm.Button)
 [button]: ../../assets/user_guides/components/button.png
 [buttontext]: ../../assets/user_guides/components/button_text.png
 [card]: ../../assets/user_guides/components/card.png
-[cardicon]: ../../assets/user_guides/components/card_icon.png
 [cardimagedefault]: ../../assets/user_guides/components/card_image_default.png
 [cardimagefloating]: ../../assets/user_guides/components/card_image_floating.png
 [cardimagestyled]: ../../assets/user_guides/components/card_image_styled.png

diff --git a/vizro-core/examples/dev/assets/css/custom.css b/vizro-core/examples/dev/assets/css/custom.css
@@ -42,3 +42,9 @@
 img#banner {
   height: 16px;
 }
+
+img[src*="icon-top"] {
+  filter: var(--fill-icon-image-card);
+  height: 36px;
+  width: 36px;
+}