Layout/Alignment with ColumnLayout and Align

[danieldeichfuss]

Project Information

mStudio Extension for taking notes

Feedback

Failing to align elements with the provided <ColumnLayout /> and <Align />. I tried a lot of different combinations, but I wasn't able to have all the elements on top in one line, center aligned. Could you help me how I would use the Flow components to create this layout and align elements?

Desired Layout

Current Result

Current Code (simplified)

<Section>
      <ColumnLayout m={[3, 1]}>
          <Align>
            <Avatar>
              <IconCustomer />
            </Avatar>
            <Text>
              <Text>
                <b>{noteData.customerName}</b> (Organisation)
              </Text>
              <Text>Rechte: lesen & editieren</Text>
            </Text>
          </Align>
        <Align>
          {interactionMode === InteractionMode.VIEW ? (
            <ActionGroup>
              <Action action={handleEdit}>
                <Button>
                  <Text>{ButtonLabels.edit}</Text>
                  <IconEdit />
                </Button>
              </Action>
            </ActionGroup>
          ) : (
            <ActionGroup>
              <Action action={handleSave}>
                <Button>
                  <Text>{ButtonLabels.save}</Text>
                  <IconSave />
                </Button>
              </Action>
              <Action action={handleCancel}>
                <Button color="secondary" variant="soft" slot="secondary">
                  {ButtonLabels.cancel}
                </Button>
              </Action>
            </ActionGroup>
          )}
        </Align>
      </ColumnLayout>
        <Section>
            <Markdown>{noteContent}</Markdown>
        </Section>

[Lisa18289]

Hi Daniel, you could use the section header to align the elements like that:

 <Section>
      <Header {...props}>
        <Align>
          <Avatar>
            <IconCustomer />
          </Avatar>
          <Text>
            <b>Organisation</b> Rechte: lesen & editieren
          </Text>
        </Align>

         <Button color="secondary" variant="soft">Cancel</Button>
        <Button>Save</Button>
      </Header>

      <TextArea />
</Section>

[danieldeichfuss]

Great! This worked! Thank you for the quick support 🙏

Three things I stumbled over:

• <Header /> is not yet documented
• Using header automatically changes the default button size to s
• It's not compatible with <ActionGroup /> if used inside of the <Header /> it just vanishes

[Lisa18289]

Header is only documented in other components, like section, as its behavior depends on the component it is used in.

There are some examples on how to use it inside a section: https://mittwald.github.io/flow/03-components/structure/section

You do not need an action group, as you can just place buttons directly in the header. Also the change of the button size is intentional, as buttons should always have this size when used in a section header

[danieldeichfuss]

Header is only documented in other components, like section, as its behavior depends on the component it is used in.

There are some examples on how to use it inside a section: https://mittwald.github.io/flow/03-components/structure/section

You do not need an action group, as you can just place buttons directly in the header. Also the change of the button size is intentional, as buttons should always have this size when used in a section header

Ah, found it now. Thank you. I think some explanation would help me to understand when to use what. The examples are helpful, but I found myself adding components without fully understanding why, just because it was in the example.

Regarding the change of the button size. Does that mean changing the button size in this context is discouraged? Would that be a violation of the style guide?