Small UI fixes for new Space creation/settings page (#197303)

## Summary
[According to this
PRD](https://docs.google.com/document/d/1HC_YjDtIzRvweU-oy6K2DevKfSvwfdHHZbjLFA43xls/edit#heading=h.jf3bwdwv0goe).

* Solution selection inside space settings is now full width (point 7)
* "Solution view" in features visibility section is not bold anymore
(point 8)
* Slightly tweaked placement for header and badges (point 14)

![CleanShot 2024-10-22 at 18 47
34@2x](https://github.com/user-attachments/assets/831772e4-e342-4999-baa4-79ec7341ffa9)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Kate Sosedova 2024-10-24 05:23:56 +02:00 committed by GitHub
parent 7dd66b3fd9
commit aaa9604973
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 13 additions and 16 deletions

View file

@ -29,12 +29,10 @@ exports[`EnabledFeatures renders as expected 1`] = `
id="xpack.spaces.management.enabledSpaceFeatures.chooseFeaturesToDisplayMessage"
values={
Object {
"solutionView": <strong>
<Memo(MemoizedFormattedMessage)
defaultMessage="Solution view"
id="xpack.spaces.management.enabledSpaceFeatures.chooseFeaturesToDisplaySolutionViewText"
/>
</strong>,
"solutionView": <Memo(MemoizedFormattedMessage)
defaultMessage="Solution view"
id="xpack.spaces.management.enabledSpaceFeatures.chooseFeaturesToDisplaySolutionViewText"
/>,
}
}
/>

View file

@ -43,12 +43,10 @@ export const EnabledFeatures: FunctionComponent<Props> = (props) => {
defaultMessage="Choose the features to display in the navigation menu for users of this space. If you want to focus on a single solution, you can simplify the navigation even more by selecting a {solutionView}."
values={{
solutionView: (
<strong>
<FormattedMessage
id="xpack.spaces.management.enabledSpaceFeatures.chooseFeaturesToDisplaySolutionViewText"
defaultMessage="Solution view"
/>
</strong>
<FormattedMessage
id="xpack.spaces.management.enabledSpaceFeatures.chooseFeaturesToDisplaySolutionViewText"
defaultMessage="Solution view"
/>
),
}}
/>

View file

@ -111,7 +111,7 @@ export const SolutionView: FunctionComponent<Props> = ({
return (
<SectionPanel title={sectionTitle} dataTestSubj="navigationPanel">
<EuiFlexGroup alignItems="flexStart">
<EuiFlexGroup alignItems="baseline">
<EuiFlexItem>
<EuiTitle size="xs">
<EuiFlexGroup gutterSize="s">
@ -163,6 +163,7 @@ export const SolutionView: FunctionComponent<Props> = ({
onChange={(solution) => {
onChange({ ...space, solution });
}}
fullWidth={true}
placeholder={i18n.translate(
'xpack.spaces.management.navigation.solutionViewDefaultValue',
{ defaultMessage: 'Select solution view' }
@ -180,7 +181,7 @@ export const SolutionView: FunctionComponent<Props> = ({
/>
</EuiText>
<EuiSpacer />
<EuiSpacer size="m" />
<EuiCallOut
color="primary"
size="s"

View file

@ -212,7 +212,7 @@ export const EditSpace: FC<PageProps> = ({
>
<EuiFlexItem grow={true} css={{ flexBasis: '100%', width: '100%' }}>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false} css={{ marginTop: '4px' }}>
<HeaderAvatar />
</EuiFlexItem>
<EuiFlexItem grow={true}>
@ -246,7 +246,7 @@ export const EditSpace: FC<PageProps> = ({
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false} css={{ marginTop: '4px' }}>
<div>
{shouldShowSolutionBadge ? (
<SpaceSolutionBadge