#17 Add Save Layout UI Component

[pling-scottlogic]

Description

Adds a UI component to handle saving custom layouts. Closes #17.

Change List

• Add SaveLayoutPanel component
• Add Showcase example for SaveLayoutPanel
• Add sub-components for checkboxes, radio buttons (and icons) and chevron icons
• Add radio and chevron SVG icons to index.css
• Add chevron icon to ComboBox
• Adjust automatic focus and make close button optional in Dialog component
• Update the "New Theme" example to log details after clicking save

Screenshots

Testing

Manual testing covered keyboard as well as mouse navigation. All user-provided inputs - layout name, group, checkbox and radio values - are logged to the console correctly (see second screenshot).

Notes

CI checks are not expected to pass until #23 is merged into the base branch.

[vferraro-scottlogic]

I think this would look cleaner if every prop was on a new line

[vferraro-scottlogic]

I think this can be removed as it is unused. this styling will be applied to elements with className "cancelButton saveButton saltButton" and our buttons have either "cancelButton" or "saveButton" as classNames but not both. I think the intention was to do something like on line 82 (to style both classes use ",")

[cfisher-scottlogic]

I've made a few comments/questions for the code.

I also have some UI-related comments comparing the actual UI to the Figma designs:

1. It looks like the font is a different colour
2. The selected radio button inner white circle is a different size
3. There's less (left) padding in the dropdown boxes (are these called combo boxes?)

None of it is major stuff though, so nice work 🙂

[heswell]

class names like this maybe a bit too generic, I tend to prefix them with component name, although they likely won't need individual styling like this once all the theme styles are in place.

[cfisher-scottlogic]

LGTM 🙂

[pling-scottlogic]

I've made a few comments/questions for the code.

I also have some UI-related comments comparing the actual UI to the Figma designs:

1. It looks like the font is a different colour

2. The selected radio button inner white circle is a different size

3. There's less (left) padding in the dropdown boxes (are these called combo boxes?)

None of it is major stuff though, so nice work 🙂

1. I'm seeing the same hex value in Figma and dev tools, so I wonder if there's a screenshot compression issue here? There are different fonts on the Figma design though, so we probably want to ask Justyna about that.
2. Fixed in 7af9ecc
3. The styling on these inputs is coming from the Input component in Salt Core. If we want this to match the design perfectly, we should probably build our own custom Input component (based on the Salt one); but as it's such a minor difference, maybe we can just seek design sign-off on it.