fleet/frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.stories.tsx

125 lines
2.4 KiB
TypeScript
Raw Normal View History

import { Meta, StoryObj } from "@storybook/react";
import { noop } from "lodash";
// @ts-ignore
import InputFieldWithIcon from ".";
import "../../../../index.scss";
const meta: Meta<typeof InputFieldWithIcon> = {
component: InputFieldWithIcon,
title: "Components/FormFields/InputWithIcon",
argTypes: {
iconPosition: {
options: ["start", "end"],
control: "radio",
},
iconName: {
options: [
"chevrondown",
"chevronleft",
"chevronright",
"chevronup",
"cpu",
"downcaret",
"filter",
"mac",
"memory",
"storage",
"upcaret",
"uptime",
"world",
"osquery",
"join",
"add-button",
"packs",
"help",
"admin",
"config",
"success-check",
"offline",
"windows-original",
"centos-original",
"ubuntu-original",
"apple-original",
"search",
"all-hosts",
"alerts",
"logout",
"account",
"clipboard",
"list-select",
"grid-select",
"label",
"docker",
"cloud",
"self-hosted",
"help-solid",
"help-stroke",
"warning-filled",
"delete-cloud",
"pdf",
"credit-card-small",
"billing-card",
"lock-big",
"link-big",
"briefcase",
"name-card",
"business",
"clock",
"host-large",
"single-host",
"username",
"password",
"email",
"hosts",
"query",
"import",
"pencil",
"add-plus",
"x",
"right-arrow",
"camera",
"plus-minus",
"bold-plus",
"linux-original",
"clock2",
"trash",
"laptop-plus",
"wrench-hand",
"external-link",
"fullscreen",
"windowed",
"heroku",
"ubuntu",
"windows",
"centos",
"apple",
"linux",
],
control: "select",
},
},
args: {
autofocus: false,
iconPosition: "start",
iconName: "email",
disabled: false,
label: "Email",
placeholder: "Type here...",
error: "",
UI – refactor forms and form fields (#16159) ## Addresses #15325 - Define shared global styles for forms (`form` and `.form`s) and `.form-field`s - Sweep through the app, updating each form from being locally styled to first prioritizing the global styles and only defining local styles where needed for custom behavior - Remove lots of unnecessary nesting of elements - Other small bug fixes and improvements ### Samples, before (L) | after (R): **Save query modal** ![Screenshot 2024-01-17 at 11 49 14 AM](https://github.com/fleetdm/fleet/assets/61553566/14f209fb-31db-41ef-8e63-e0d8994698c1) **Edit query form** ![Screenshot 2024-01-17 at 11 50 35 AM](https://github.com/fleetdm/fleet/assets/61553566/b07e70ea-3095-4e4f-be73-95a3c499839b) **Add hosts modal** ![Screenshot 2024-01-17 at 11 51 48 AM](https://github.com/fleetdm/fleet/assets/61553566/4ef1f410-a823-41d1-b2f6-ea8eb5231f93) ## QA Plan: @xpkoala here's the same list from the issue, freshly de-checked for you to use if it's helpful: * Please check error states of each field #### Specified by issue: ##### In "Save query" modal: - [ ] Reduce space between checkboxes and their help text to 8px/0.5rem for the following fields: - [ ] Observers can run - [ ] Discard data - [ ] Update the following checkbox labels to have normal font weight (not bold): - [ ] Discard data ##### On "Edit query" page: - [ ] Update the following checkbox labels to have normal font weight (not bold): - [ ] Observers can run - [ ] Discard data ##### In "Add hosts" modal, for copy text fields: - [ ] match typical form form field styles - [ ] Adjust the positioning of the copy icon to keep it from being too far down ##### Further locations to check - [ ] ChangeEmailForm.jsx - [ ] ChangePasswordForm.jsx - [ ] ConfirmInviteForm.jsx - [ ] ConfirmSSOInviteForm.jsx - [ ] EnrollSecretModal.tsx - [ ] ForgotPasswordForm.jsx - [ ] LoginForm.tsx - [ ] EditPackForm.tsx - [ ] (New)PackForm.tsx - [ ] AdminDetails.jsx - [ ] ConfirmationPage.tsx - [ ] FleetDetails.jsx - [ ] OrgDetails.jsx - [ ] ResetPasswordForm.tsx - [ ] UserSettingsForm.jsx - [ ] EditTeamModal.tsx - [ ] IdpSection.tsx - [ ] DeleteIntegrationModal.tsx - [ ] IntegrationForm.tsx - [ ] EndUserMigrationSection.tsx - [ ] RequestCSRModal.tsx - [ ] Advanced.tsx - [ ] Agents.tsx - [ ] FleetDesktop.tsx - [ ] HostStatusWebhook.tsx front - [ ] Info.tsx - [ ] Smtp.tsx - [ ] Sso.tsx - [ ] Statistics.tsx - [ ] WebAddress.tsx - [ ] CreateTeamModal.tsx - [ ] DeleteTeamModal.tsx - [ ] EditTeamModal.tsx - [ ] AgentOptionsPage.tsx - updated the layout of this page to align with the rest of the forms in the UI – can easily revert if it's not what we want - [ ] AddMemberModal.tsx - [ ] RemoveMemberModal.tsx - [ ] UserForm.tsx - Used by both `EditUserModal` and `CreateUserModal` - A few different conditions that cause different rendering behavior - [ ] DeleteHostModal.tsx - [ ] TransferHostModal.tsx - [ ] LabelForm.tsx - [ ] MacOSTargetForm.tsx - [ ] WindowsTargetForm.tsx - [ ] BootstrapPackageListltem.ts - [ ] EndUserAuthForm.tsx - [ ] PackQueryEditorModal.tsx - [ ] PolicyForm.tsx - [ ] SaveNewPolicyModal.tsx - [ ] ConfirmSaveChangesModal.tsx - [ ] Query automations modal - [ ] Policy automations modal - addresses #16010 - [ ] SoftwareAutomationsModal ## Checklist for submitter - [x] Changes file added for user-visible changes in `changes/` - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling <jacob@fleetdm.com> Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
2024-01-18 15:48:44 +00:00
helpText: "",
name: "",
tabIndex: "",
type: "",
className: "",
onChange: noop,
},
};
export default meta;
type Story = StoryObj<typeof InputFieldWithIcon>;
export const Default: Story = {};