Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test stylelint plugin #897

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .pre-commit-config.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ repos:
- [email protected]
- [email protected]
- [email protected]
- [email protected]
args: ["--fix"]

- repo: https://github.com/errata-ai/vale
Expand Down
3 changes: 2 additions & 1 deletion .stylelintrc
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{
"extends": "stylelint-config-standard",
"plugins": ["stylelint-order"],
"plugins": ["stylelint-order", "stylelint-csstree-validator"],
"rules": {
"order/properties-alphabetical-order": true,
"csstree/validator": true,
"selector-class-pattern": null,
"custom-property-pattern": null,
"color-function-notation": "legacy",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
}

.card-body {
color: var(--text-light-mode-secondary);
color: var(--text-secondary-inverted);
}

.textbox {
border-radius: 24px;
font-size: var(--text-size-02);
font-size: 0.875rem;
margin-bottom: 20px;
max-width: 60%;
padding: 4px 12px;
Expand All @@ -17,14 +17,14 @@

.user_input:focus {
background: var(--field-enabled);
box-shadow: 0 0 0 2px var(--focus-focus) inset;
box-shadow: 0 0 0 2px var(--focus) inset;
color: var(--text-primary);
outline-width: 0;
}

#text-area {
background-color: inherit;
border: 1px solid var(--border-subtle-alpha-01);
border: 1px solid var(--border-subtleAlpha01);
color: var(--text-primary);
min-height: 14vh;
padding: 8px;
Expand Down Expand Up @@ -68,10 +68,6 @@

#model-dropdown .Select-menu-outer {
font-size: 12px;

/* top: 0; */

/* transform: translateY(3px) translateY(-100%); */
}

#model-dropdow .dash-dropdown {
Expand Down Expand Up @@ -122,22 +118,13 @@
}

#data-upload-component {
border: 1px dashed var(--border-subtle-alpha-01);
border: 1px dashed var(--border-subtleAlpha01);
color: var(--text-primary);
height: 5vh;
line-height: 5vh;
text-align: center;
}

/*
#settings-api-key-toggle .form-check-input {
border-radius: 8px;
}

#settings-api-base-toggle .form-check-input {
border-radius: 8px;
}
*/
#toggle-div-api-base,
#toggle-div-api-key {
align-items: center;
Expand Down Expand Up @@ -177,19 +164,19 @@

.btn-primary:enabled:has(#dropdown-menu-icon) {
background-color: inherit;
color: var(--text-active);
color: var(--text-primary);
font-size: 1.5rem;
}

.btn-primary:disabled:has(#dropdown-menu-icon) {
background-color: inherit;
color: var(--text-active);
color: var(--text-primary);
font-size: 1.5rem;
}

.download-button {
background-color: inherit;
color: var(--text-active);
color: var(--text-primary);
width: 100%;
}

Expand All @@ -199,14 +186,14 @@

.dropdown-menu-toggle-class {
background-color: inherit;
color: var(--text-active);
color: var(--text-primary);
height: 2rem;
scale: 90%;
}

.dropdown-menu-toggle-class:hover {
background-color: inherit;
color: var(--text-active);
color: var(--text-primary);
cursor: pointer;
height: 2rem;
scale: 90%;
Expand All @@ -218,7 +205,7 @@
.disabled
) {
background-color: inherit;
color: var(--text-active);
color: var(--text-primary);
}

.modal-class {
Expand All @@ -234,7 +221,7 @@

.custom_header {
align-items: center;
border-bottom: 1px solid var(--border-subtle-alpha-01);
border-bottom: 1px solid var(--border-subtleAlpha01);
display: flex;
flex-direction: row;
height: 60px;
Expand Down Expand Up @@ -314,7 +301,7 @@
background: var(--text-primary);
border-top-left-radius: 8px;
bottom: 0;
color: var(--text-contrast-primary);
color: var(--text-primary-inverted);
display: flex;
font-size: 0.8rem;
font-weight: 500;
Expand All @@ -327,7 +314,7 @@
.anchor-container:focus,
.anchor-container:hover {
background: var(--text-secondary);
color: var(--text-contrast-primary);
color: var(--text-primary-inverted);
}

img#banner {
Expand All @@ -346,7 +333,9 @@ img#banner {
flex-flow: column wrap;
gap: 12px;
justify-content: flex-start;
overflow: none;

/* Nadija, can you check what overflow behaviour you guys wanted here? none doesn't exist as a property */
overflow: hidden;
}

.flex-container h4 {
Expand Down
1 change: 1 addition & 0 deletions vizro-ai/examples/dashboard_ui/requirements.in
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
gunicorn
vizro-ai>=0.3.2
vizro==0.1.27
black
openpyxl
langchain_anthropic
Expand Down
36 changes: 29 additions & 7 deletions vizro-ai/examples/dashboard_ui/requirements.txt
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,20 @@ anyio==4.4.0
# anthropic
# httpx
# openai
async-timeout==4.0.3
# via
# aiohttp
# langchain
attrs==24.2.0
# via aiohttp
autoflake==2.3.1
# via vizro-ai
# via
# vizro
# vizro-ai
black==24.8.0
# via
# -r requirements.in
# vizro
# vizro-ai
blinker==1.8.2
# via flask
Expand Down Expand Up @@ -63,6 +70,8 @@ distro==1.9.0
# openai
et-xmlfile==1.1.0
# via openpyxl
exceptiongroup==1.2.2
# via anyio
filelock==3.16.1
# via huggingface-hub
flask==3.0.3
Expand All @@ -77,6 +86,8 @@ frozenlist==1.4.1
# aiosignal
fsspec==2024.10.0
# via huggingface-hub
greenlet==3.1.1
# via sqlalchemy
gunicorn==23.0.0
# via -r requirements.in
h11==0.14.0
Expand All @@ -100,7 +111,9 @@ idna==3.8
# requests
# yarl
importlib-metadata==8.5.0
# via dash
# via
# dash
# flask
itsdangerous==2.2.0
# via flask
jinja2==3.1.4
Expand Down Expand Up @@ -182,7 +195,9 @@ pathspec==0.12.1
platformdirs==4.3.2
# via black
plotly==5.24.1
# via dash
# via
# dash
# vizro
pydantic==2.9.1
# via
# anthropic
Expand Down Expand Up @@ -217,8 +232,6 @@ requests==2.32.3
# tiktoken
retrying==1.3.4
# via dash
ruff==0.6.4
# via vizro
setuptools==74.1.2
# via dash
six==1.16.0
Expand Down Expand Up @@ -246,16 +259,23 @@ tokenizers==0.20.1
# via
# anthropic
# langchain-mistralai
tomli==2.1.0
# via
# autoflake
# black
tqdm==4.66.5
# via
# huggingface-hub
# openai
typing-extensions==4.12.2
# via
# anthropic
# anyio
# black
# dash
# huggingface-hub
# langchain-core
# multidict
# openai
# pydantic
# pydantic-core
Expand All @@ -264,8 +284,10 @@ tzdata==2024.1
# via pandas
urllib3==2.2.3
# via requests
vizro==0.1.23
# via vizro-ai
vizro==0.1.27
# via
# -r requirements.in
# vizro-ai
vizro-ai==0.3.2
# via -r requirements.in
werkzeug==3.0.4
Expand Down
9 changes: 4 additions & 5 deletions vizro-core/docs/pages/user-guides/custom-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -316,11 +316,10 @@ It's essential to understand the relationship between the targeted CSS class or

### Make your CSS responsive to theme switches with variables
To ensure your CSS adapts to theme changes, we recommend using CSS variables (`var`) whenever possible. For a
comprehensive list of available CSS variable names, refer to the
[Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/css-variables/). Note that our Vizro Bootstrap
stylesheet is still under development. While all Bootstrap variables have values assigned, some of these values may
come from the default Bootstrap theme, which can result in styling that looks different from the intended Vizro design.
You can also define your own CSS variables, as demonstrated in the example on
comprehensive list of available variable names, refer to the
[Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/css-variables/). Note that our
Bootstrap stylesheet is still under development, so not all Bootstrap variables are currently available.
Additionally, you can define your own CSS variables, as demonstrated in the example on
[changing the container background color](#change-the-styling-of-a-container).

### Turn off page title
Expand Down
21 changes: 16 additions & 5 deletions vizro-core/examples/dev/app.py
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import plotly.graph_objects as go
import vizro.models as vm
import vizro.plotly.express as px
from dash import dash_table, dcc, html
from dash import dash_table, dcc, get_asset_url, html
from vizro import Vizro
from vizro.actions import export_data, filter_interaction
from vizro.figures import kpi_card, kpi_card_reference
Expand Down Expand Up @@ -606,10 +606,10 @@ def my_custom_table(data_frame=None, chosen_columns: Optional[list[str]] = None)
columns = [{"name": i, "id": i} for i in chosen_columns]
defaults = {
"style_as_list_view": True,
"style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
"style_data": {"border_bottom": "1px solid var(--border-subtleAlpha01)", "height": "40px"},
"style_header": {
"border_bottom": "1px solid var(--state-overlays-selected-hover)",
"border_top": "1px solid var(--main-container-bg-color)",
"border_bottom": "1px solid var(--stateOverlays-selectedHover)",
"border_top": "1px solid var(--right-side-bg)",
"height": "32px",
},
}
Expand Down Expand Up @@ -817,5 +817,16 @@ def multiple_cards(data_frame: pd.DataFrame, n_rows: Optional[int] = 1) -> html.
),
)


if __name__ == "__main__":
Vizro().build(dashboard).run()
app = Vizro().build(dashboard)
app.dash.layout.children.append(
dbc.NavLink(
["Made with ", html.Img(src=get_asset_url("logo.svg"), id="banner", alt="Vizro logo"), "vizro"],
href="https://github.com/mckinsey/vizro",
target="_blank",
className="anchor-container",
)
)
server = app.dash.server
app.run()
25 changes: 25 additions & 0 deletions vizro-core/examples/dev/assets/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,28 @@
height: 210px;
width: 240px;
}

.anchor-container {
align-items: center;
background: var(--text-primary);
border-top-left-radius: 8px;
bottom: 0;
color: var(--text-primary-inverted);
display: flex;
font-size: 0.8rem;
font-weight: 500;
height: 24px;
padding: 0 12px;
position: fixed;
right: 0;
}

.anchor-container:focus,
.anchor-container:hover {
background: var(--text-secondary);
color: var(--text-primary-inverted);
}

img#banner {
height: 16px;
}
4 changes: 4 additions & 0 deletions vizro-core/examples/dev/requirements.in
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# This file is only used if you don't have hatch installed.
gunicorn
openpyxl
vizro==0.1.27
Loading
Loading