Skip to content

Commit 67a48fa

Browse files
huong-li-nguyenhuong-li-nguyen
authored
[Bug] Update default line-height (#1019)
1 parent b39034d commit 67a48fa

File tree

7 files changed

+123
-23
lines changed

7 files changed

+123
-23
lines changed

‎vizro-core/changelog.d/20250214_125733_huong_li_nguyen_remove_line_height_default.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!--
2+
A new scriv changelog fragment.
3+
4+
Uncomment the section that is right (remove the HTML comment wrapper).
5+
-->
6+
7+
<!--
8+
### Highlights ✨
9+
10+
- 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))
11+
12+
-->
13+
<!--
14+
### Removed
15+
16+
- A bullet item for the Removed 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))
17+
18+
-->
19+
<!--
20+
### Added
21+
22+
- 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))
23+
24+
-->
25+
<!--
26+
### Changed
27+
28+
- 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))
29+
30+
-->
31+
<!--
32+
### Deprecated
33+
34+
- 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))
35+
36+
-->
37+
<!--
38+
### Fixed
39+
40+
- 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))
41+
42+
-->
43+
<!--
44+
### Security
45+
46+
- 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))
47+
48+
-->

‎vizro-core/examples/scratch_dev/app.py

+59-7
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,68 @@
77
iris = px.data.iris()
88

99
page = vm.Page(
10-
title="Page with subsections",
10+
title="New Line Height",
1111
layout=vm.Layout(grid=[[0, 1]]),
1212
components=[
13-
vm.Container(
14-
title="Container I",
15-
components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))],
13+
vm.Card(
14+
id="new-line-height",
15+
text="""
16+
# New
17+
18+
## What is Vizro?
19+
20+
Vizro is an open-source dashboarding framework developed by McKinsey. Built with Plotly and Dash, Vizro
21+
provides a high-level API for creating interactive, production-ready dashboards with minimal code.
22+
It includes pre-configured layouts, themes, and components, making it easier to build data-driven
23+
applications.
24+
25+
Even if you're not creating a Vizro app, you can still use its styling and design system in your Dash
26+
applications.
27+
28+
## Vizro Features Available for Dash Apps
29+
30+
* Vizro Bootstrap-themed figure templates are available in the dash-bootstrap-templates library starting
31+
from version 2.1.0. Both dark and light-themed templates are included.
32+
33+
* Vizro Bootstrap theme provides styling for Bootstrap components, allowing them to match the Vizro light
34+
or dark theme.
35+
36+
* Vizro theme for other Dash components extends styling beyond Bootstrap. Vizro includes custom CSS to
37+
theme additional Dash components that are not part of Bootstrap. You can explore all the custom CSS files
38+
in their GitHub repository.
39+
40+
* Vizro KPI cards like the ones shown in the image above can be added to a regular Dash app, bringing a
41+
visually consistent way to display key performance indicators. For more details, see this Plotly forum post.""",
1642
),
17-
vm.Container(
18-
title="Container II",
19-
components=[vm.Graph(figure=px.box(iris, x="species", y="sepal_length", color="species"))],
43+
vm.Card(
44+
id="old-line-height",
45+
text="""
46+
# Old
47+
48+
## What is Vizro?
49+
50+
Vizro is an open-source dashboarding framework developed by McKinsey. Built with Plotly and Dash, Vizro
51+
provides a high-level API for creating interactive, production-ready dashboards with minimal code.
52+
It includes pre-configured layouts, themes, and components, making it easier to build data-driven
53+
applications.
54+
55+
Even if you're not creating a Vizro app, you can still use its styling and design system in your Dash
56+
applications.
57+
58+
## Vizro Features Available for Dash Apps
59+
60+
* Vizro Bootstrap-themed figure templates are available in the dash-bootstrap-templates library starting
61+
from version 2.1.0. Both dark and light-themed templates are included.
62+
63+
* Vizro Bootstrap theme provides styling for Bootstrap components, allowing them to match the Vizro light
64+
or dark theme.
65+
66+
* Vizro theme for other Dash components extends styling beyond Bootstrap. Vizro includes custom CSS to
67+
theme additional Dash components that are not part of Bootstrap. You can explore all the custom CSS files
68+
in their GitHub repository.
69+
70+
* Vizro KPI cards like the ones shown in the image above can be added to a regular Dash app, bringing a
71+
visually consistent way to display key performance indicators. For more details, see this Plotly forum post.""",
2072
),
2173
],
2274
)

‎vizro-core/examples/scratch_dev/assets/css/custom.css

+3-12
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,7 @@
22
padding-left: 8px;
33
}
44

5-
[data-bs-theme="dark"] {
6-
--container-bg-color: #232632;
7-
}
8-
9-
[data-bs-theme="light"] {
10-
--container-bg-color: #F5F6F6;
11-
}
12-
13-
/* Use the custom variable var(--container-bg-color) */
14-
.page-component-container {
15-
background: var(--container-bg-color);
16-
padding: 12px;
5+
#old-line-height p {
6+
line-height: 1;
7+
margin-bottom: 0.5rem;
178
}

‎vizro-core/src/vizro/models/_components/card.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ class Card(VizroBaseModel):
3030

3131
@_log_call
3232
def build(self):
33-
text = dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False)
33+
text = dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False, className="card-text")
3434
card_content = (
3535
dbc.NavLink(
3636
children=text,

‎vizro-core/src/vizro/static/css/bootstrap_overwrites.css

+5
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,8 @@ label[for="theme-selector"] {
9797
margin-right: 0;
9898
padding-left: 0;
9999
}
100+
101+
/* Remove bottom margin of last child as card comes with padding */
102+
.card-text > *:last-child {
103+
margin-bottom: 0;
104+
}

‎vizro-core/src/vizro/static/css/vizro-bootstrap.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vizro-core/tests/unit/vizro/models/_components/test_card.py

+6-2
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ def test_card_build_with_href(self):
4747

4848
expected_card = dbc.Card(
4949
dbc.NavLink(
50-
dcc.Markdown(id="card_id", children="Hello", dangerously_allow_html=False),
50+
dcc.Markdown(id="card_id", children="Hello", dangerously_allow_html=False, className="card-text"),
5151
href="https://www.google.com",
5252
target="_top",
5353
),
@@ -60,7 +60,11 @@ def test_card_build_wo_href(self):
6060
card = vm.Card(id="card_id", text="Hello")
6161
card = card.build()
6262
assert_component_equal(
63-
card, dbc.Card(dcc.Markdown(id="card_id", children="Hello", dangerously_allow_html=False), className="")
63+
card,
64+
dbc.Card(
65+
dcc.Markdown(id="card_id", children="Hello", dangerously_allow_html=False, className="card-text"),
66+
className="",
67+
),
6468
)
6569

6670
@pytest.mark.parametrize(

0 commit comments

Comments
 (0)