Meta UX issue
The issue is tracking the individual tasks to improve create correlation rule user experience. See a more detailed description for each item below.
Page layout
[ ] 1.1 Implement OuiPageContent to place the page content on a single panel
[ ] 1.2 Set consistent spacing between the nested panels and "Add query" CTA
[ ] 1.3. Use Heading 1 style for OuiPageHeader and Heading 2 style for the sections on the page (Correlation rule details, Correlation queries) to maintain the visual hierarchy.
Functionality
[ ] 2.1 Change the color for "Delete" OuiButtonIcon button icon to$OuiColorSubdued in the default state and to$OuiColorDanger for the hover state for each field in the query.
[ ] 2.2 Hide the "Delete" button icon when there is just one field (as at least one field is required for the query).
1.2 Set consistent spacing between the nested panels and "Add query" CTA
Current experience:
Proposed experience:
1.3 Use Heading 1 style for OuiPageHeader and Heading 2 style for the sections on the page (Correlation rule details, Correlation queries) to maintain the visual hierarchy.
Current experience:
Proposed experience:
Functionality
2.1 Change the color for "Delete" OuiButtonIcon button icon to$OuiColorSubdued in the default state and to$OuiColorDanger for the hover state for each field in the query.
2.2 Hide the "Delete" button icon when there is just one field (as at least one field is required for the query).
dblock
commented
2 weeks ago
Meta UX issue The issue is tracking the individual tasks to improve create correlation rule user experience. See a more detailed description for each item below.
Page layout
Functionality
$OuiColorSubduedin the default state and to$OuiColorDangerfor the hover state for each field in the query.Naming and terminology
TBD
Page layout
1.1 Implement OuiPageContent to place the page content on a single panel
Current experience:
Proposed experience:
1.2 Set consistent spacing between the nested panels and "Add query" CTA
Current experience:
Proposed experience:
1.3 Use Heading 1 style for OuiPageHeader and Heading 2 style for the sections on the page (Correlation rule details, Correlation queries) to maintain the visual hierarchy.
Current experience:
Proposed experience:
Functionality
2.1 Change the color for "Delete" OuiButtonIcon button icon to
$OuiColorSubduedin the default state and to$OuiColorDangerfor the hover state for each field in the query.2.2 Hide the "Delete" button icon when there is just one field (as at least one field is required for the query).
Current experience:
Proposed experience: