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.

Sign up for GitHub

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

chore(search): add missing size-specific CSS properties #3538

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+19 −1
Open

chore(search): add missing size-specific CSS properties #3538

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c6329c7
fix(search): add search missing variables in the theme overrides
rubencarvalho Feb 5, 2025
b7421af
fix(search): add search missing variables in the theme overrides
rubencarvalho Feb 5, 2025
f589fec
fix: correct nested CSS structure for size XL variant
rubencarvalho Feb 11, 2025
f8e0ece
fix: removed redundant css imports in express
Feb 14, 2025
c90bfbb
Merge branch 'main' into ruben/search-missing-variables
Rajdeepc Feb 14, 2025
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
11 changes: 10 additions & 1 deletion components/search/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,14 +158,23 @@
"--system-search-border-color-key-focus",
"--system-search-border-radius",
"--system-search-edge-to-visual",
"--system-search-size-l-block-size",
"--system-search-size-l-border-radius",
"--system-search-size-l-edge-to-visual",
"--system-search-size-l-icon-size",
"--system-search-size-l-text-to-icon",
"--system-search-size-m-border-radius",
"--system-search-size-m-edge-to-visual",
"--system-search-size-s-block-size",
"--system-search-size-s-border-radius",
"--system-search-size-s-edge-to-visual",
"--system-search-size-s-icon-size",
"--system-search-size-s-text-to-icon",
"--system-search-size-xl-block-size",
"--system-search-size-xl-border-radius",
"--system-search-size-xl-edge-to-visual"
"--system-search-size-xl-edge-to-visual",
"--system-search-size-xl-icon-size",
"--system-search-size-xl-text-to-icon"
],
"passthroughs": [
"--mod-textfield-background-color",
Expand Down
9 changes: 9 additions & 0 deletions components/search/themes/express.css
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The addition of --spectrum-search-block-size, --spectrum-search-icon-size, and --spectrum-search-text-to-icon seem a little repetitive here in Express, on the CSS side of things as far as I can tell, those custom properties look like they're being inherited in Express from where they're set in spectrum-two.css, would things still work as you'd want them in SWC if we removed the extra code you added here in express.css?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

express.css inherits spectrum.css if I am not wrong! Can you please check @rise-erpelding

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct, spectrum-two.css imports spectrum.css, and express.css imports spectrum.css.

You can set, for instance, --spectrum-foo: var(--spectrum-bar) in spectrum-two.css and still see that being applied in Express if it's not been overridden in spectrum or express. Unless we need to leave it in to avoid an issue in SWC, I think we could probably remove the custom properties that are redefined in express.css since those tokens are the same for all themes.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this make sense. Thanks

Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,25 @@
&.spectrum-Search--sizeS {
--spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2);
--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75);
--spectrum-search-block-size: var(--spectrum-component-height-75);
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75);
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75);
}

&.spectrum-Search--sizeL {
--spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2);
--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200);
--spectrum-search-block-size: var(--spectrum-component-height-200);
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200);
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200);
}

&.spectrum-Search--sizeXL {
--spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2);
--spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300);
--spectrum-search-block-size: var(--spectrum-component-height-300);
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
}
}
}
9 changes: 9 additions & 0 deletions components/search/themes/spectrum-two.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,25 @@
&.spectrum-Search--sizeS {
--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
--spectrum-search-block-size: var(--spectrum-component-height-75);
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75);
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75);
}

&.spectrum-Search--sizeL {
--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
--spectrum-search-block-size: var(--spectrum-component-height-200);
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200);
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200);
}

&.spectrum-Search--sizeXL {
--spectrum-search-border-radius: var(--spectrum-corner-radius-100);
--spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
--spectrum-search-block-size: var(--spectrum-component-height-300);
--spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300);
--spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300);
}
}
}
Loading