paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes on the Select component

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-07-24 20:27:32 +01:00
parent 1b8011e2b5
commit de89a3deeb
5 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/common-heads-build.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/ui': patch
---
Fixes some styles on the Select component in BUI.
docs-ui/public/theme-backstage.css
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/ui/css/styles.css
+7 -4
View File
@@ -10578,11 +10578,11 @@
justify-content: space-between;
align-items: center;
gap: var(--bui-space-2);
max-width: 100%;
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
width: 100%;
display: flex;
& svg {
color: var(--bui-fg-secondary);
flex-shrink: 0;
}
@@ -10612,6 +10612,7 @@
&:hover {
border-color: var(--bui-border-hover);
transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
}
&:focus-visible {
@@ -10650,6 +10651,7 @@
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
color: var(--bui-fg-primary);
text-align: left;
overflow: hidden;
& .bui-SelectItemIndicator {
@@ -10664,14 +10666,15 @@
.bui-SelectItem {
width: var(--anchor-width);
padding-block: var(--bui-space-2);
padding-inline: var(--bui-space-4);
padding-left: var(--bui-space-3);
padding-right: var(--bui-space-4);
color: var(--bui-fg-primary);
border-radius: var(--bui-radius-3);
cursor: pointer;
user-select: none;
font-size: var(--bui-font-size-3);
align-items: center;
gap: var(--bui-space-2);
gap: var(--bui-space-1);
outline: none;
grid-template-columns: 1rem 1fr;
grid-template-areas: "icon text";
packages/ui/src/components/Select/Select.stories.tsx
+8
View File
@@ -58,6 +58,14 @@ export const WithLabel: Story = {
},
};
export const WithFullWidth: Story = {
args: {
...Default.args,
label: 'Font Family',
style: { width: '100%' },
},
};
export const WithLabelAndDescription: Story = {
args: {
...WithLabel.args,
packages/ui/src/components/Select/Select.styles.css
+7 -4
View File
@@ -28,13 +28,13 @@
display: flex;
justify-content: space-between;
align-items: center;
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
cursor: pointer;
gap: var(--bui-space-2);
max-width: 100%;
width: 100%;
& svg {
flex-shrink: 0;
color: var(--bui-fg-secondary);
}
&[data-size='small'] {
@@ -62,6 +62,7 @@
}
&:hover {
transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
border-color: var(--bui-border-hover);
}
@@ -105,6 +106,7 @@
font-family: var(--bui-font-regular);
font-weight: var(--bui-font-weight-regular);
color: var(--bui-fg-primary);
text-align: left;
& .bui-SelectItemIndicator {
display: none;
@@ -123,13 +125,14 @@
grid-template-columns: 1rem 1fr;
align-items: center;
padding-block: var(--bui-space-2);
padding-inline: var(--bui-space-4);
padding-left: var(--bui-space-3);
padding-right: var(--bui-space-4);
color: var(--bui-fg-primary);
border-radius: var(--bui-radius-3);
cursor: pointer;
user-select: none;
font-size: var(--bui-font-size-3);
gap: var(--bui-space-2);
gap: var(--bui-space-1);
outline: none;
&[data-focused] {