Steven Palmesano
62ed3583e6
**Related issue:** Resolves #49276 **New features** - Added new "Secondary" (bordered, off-white fill) and "Subdued" (borderless, low-emphasis) button variants to match the Figma spec, alongside the existing Primary style. - Allowed rows to be selected in Controls > OS updates. **Cleanup** - Once nothing referenced the old styles anymore, fully removed the old `text-icon`, `brand-inverse-icon`, `inverse-alert`, `inverse`, and `icon` button variants (type, styles, and Storybook entries) from the shared `Button` component. - Removed the `iconStroke` prop, which had become a no-op once the old variants it supported were gone. - Renamed `ActionsDropdown`'s variants (`button`/`brand-button`/`small-button`) to `subdued`/`primary`/`secondary` to match the same naming used everywhere else. - Replaced a one-off dropdown implementation on the Software title page with the shared `ActionsDropdown` component, instead of maintaining duplicate styling logic. - Changed the button name on Host details > Reports > Report details from "View data for all hosts" to "View report for all hosts" (to match the previous page's Actions drop-down options). # Checklist for submitter - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. ## Testing - [x] Added/updated automated tests - [x] QA'd all new/changed functionality manually <img width="1475" height="241" alt="Screenshot 2026-07-21 at 06 35 49" src="https://github.com/user-attachments/assets/7cfbd444-7837-40e8-854e-bc5989d57d85" /> <img width="661" height="306" alt="Screenshot 2026-07-21 at 06 37 18" src="https://github.com/user-attachments/assets/5d0c4873-8179-4089-b115-7e8cd3a53b4d" /> <img width="1427" height="423" alt="Screenshot 2026-07-21 at 06 37 30" src="https://github.com/user-attachments/assets/a4850a60-f44a-4902-b45e-0094f23a52f8" /> <img width="1427" height="640" alt="Screenshot 2026-07-21 at 06 37 46" src="https://github.com/user-attachments/assets/738a4a7f-cd7d-4162-b659-6f649c32204d" /> <img width="1445" height="479" alt="Screenshot 2026-07-22 at 07 03 22" src="https://github.com/user-attachments/assets/4f672dc0-5c6d-4eb8-8465-ed5233fcd1b2" /> <img width="811" height="871" alt="Screenshot 2026-07-21 at 06 41 20" src="https://github.com/user-attachments/assets/5421c96e-2dab-492a-af26-be0e5a7791ca" />
138 lines
2.7 KiB
SCSS
138 lines
2.7 KiB
SCSS
.input-field {
|
|
line-height: $line-height;
|
|
background-color: $core-fleet-white;
|
|
border: solid 1px $ui-fleet-black-10;
|
|
border-radius: $border-radius;
|
|
font-size: $x-small;
|
|
padding: $pad-small $pad-medium;
|
|
color: $core-fleet-black;
|
|
font-family: "Inter", sans-serif;
|
|
box-sizing: border-box;
|
|
height: 36px;
|
|
transition: border-color 100ms;
|
|
width: 100%;
|
|
|
|
&::placeholder {
|
|
color: $ui-fleet-black-50;
|
|
}
|
|
|
|
&:focus:not(.input-field--read-only),
|
|
&:focus-visible:not(.input-field--read-only) {
|
|
box-shadow: none;
|
|
outline: 0;
|
|
border: 1px solid $ui-fleet-black-75-down;
|
|
}
|
|
|
|
&--disabled {
|
|
color: $ui-fleet-black-50;
|
|
|
|
.form-field__label,
|
|
.form-field__help-text {
|
|
color: $ui-fleet-black-50;
|
|
}
|
|
}
|
|
|
|
&--error {
|
|
color: $core-vibrant-red;
|
|
border: 1px solid $core-vibrant-red;
|
|
box-sizing: border-box;
|
|
border-radius: $border-radius;
|
|
|
|
&:focus {
|
|
border-color: $ui-error;
|
|
background-color: $core-fleet-white;
|
|
color: $core-fleet-black;
|
|
}
|
|
}
|
|
|
|
&__textarea {
|
|
min-height: 100px;
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
&__label {
|
|
display: block;
|
|
font-size: $medium;
|
|
font-weight: $regular;
|
|
color: $core-fleet-black;
|
|
margin-bottom: $pad-xsmall;
|
|
|
|
&--error {
|
|
font-weight: $bold;
|
|
color: $ui-error;
|
|
}
|
|
}
|
|
|
|
&__wrapper {
|
|
margin-bottom: $pad-medium;
|
|
}
|
|
|
|
// Same styling as .form-field__help-text TODO: consider consolidating
|
|
&__help-text {
|
|
font-size: $x-small;
|
|
font-weight: $regular;
|
|
line-height: $line-height;
|
|
letter-spacing: 1px;
|
|
color: $core-fleet-blue;
|
|
|
|
code {
|
|
color: $ui-fleet-black-75;
|
|
background-color: $ui-light-grey;
|
|
padding: $pad-xxsmall;
|
|
font-family: "SourceCodePro", $monospace;
|
|
}
|
|
}
|
|
|
|
// Old-style textarea copy button (absolute positioned icon above textarea)
|
|
&__copy-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $pad-xsmall;
|
|
position: absolute;
|
|
top: 3px; // vertically center
|
|
right: 0;
|
|
margin: 1px 4px;
|
|
background-color: $core-fleet-white;
|
|
|
|
&--text-area {
|
|
top: -30px;
|
|
}
|
|
}
|
|
|
|
&__input-container.copy-enabled {
|
|
position: relative;
|
|
}
|
|
|
|
// New input action buttons (bordered boxes beside input)
|
|
&__input-container--has-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $pad-small;
|
|
|
|
.input-field {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
&__action-buttons {
|
|
display: flex;
|
|
gap: $pad-small;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__action-button {
|
|
.fleeticon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Removes arrows on Firefox number fields
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|