@AnneT I'm checking the Field last patch and it seems there is an error to fix with the error state. The helper text should also reflect the error state so it should be content-error color. There was an error in the spec so I've updated it. Could we also update it in the demo? These are the styles we should use in the error. Thank you!

@AnneT I've flagged some important components in which we should also include the large size to unify with the Button large, including ToggleButton (that is also a button) and ButtonGroup or ToggleButtonGroup.

Design sign-off done. Adding some things we should fix:

@AnneT as defined in the Figma spec, large button should use 16px instead (in the Codex demo we are using 12px). Should we reopen this task to fix it?

In T333437#8822970, @bmartinezcalvo wrote:

In T333437#8817695, @AnneT wrote:

Design principles section is up: https://914017--wikimedia-codex.netlify.app/style-guide/design-principles-overview.html

Thank you @AnneT. Reviewed this section and the others. I leave you some small things to fix:

1. Style Guide > Overview: Remove the link from "statement of purpose" in the first section.

2. Style Guide > Overview > Our process: There are some missing links within "We follow design principles to provide solutions for visual identity, user interface components, and patterns."

3. Style Guide > Overview > Open to participate: Add the right link in "File a task on our workboard"

4. Design Principles > Overview > Open to collaboration: The caption is missing below the image.

5. Design Principles > Overview > Design for consistency: Same, the caption is missing below the image.

6. Visual Styles > Colors > Utility colors: Since white text on yellow600 is not contrasted enough (just 2.02:1) I would use black text for each column of colors (red600, green600 and yellow600).

7. Visual Styles > Typography > Readability > Dynamic text: The caption is missing below the image.

8. Visual Styles > Typography > Typefaces > Platform-specific fonts: There is an error in the CSS code text since InterLato should be simply Inter

9. Visual Styles > Typography > Use of styles: We could create the heading and paragraph styles with code instead. These images are not well readable there.

10. Visual Styles > Icons > Visual style: the values in the current image are not well visible, could we replace with this image?

11. Visual Styles > Images > Image selection: the current image is a bit pixelated and unbalanced with the text, so I've redesigned it. Could we replace it with this new one?

As decided in our DST planning, I'm resolving this task since it seems we don't need to do anything more here. We will open a new task if something new is needed.

In T309903#8897719, @Catrope wrote:

Should a readonly TextInput be focusable? If not, then it should always look the same regardless of focus/hover/active state. If so, we will need to determine exactly how it should look in these states.

By default, it looks like a readonly TextInput is focusable, and in the demo at https://923709--wikimedia-codex.netlify.app/components/demos/text-input.html it receives the same focus styles as a normal TextInput. I think that's probably fine because the readonly styling only affects the background color of the TextInput, but it's worth checking with @bmartinezcalvo

@CCiufo-WMF as commented during our last 1on1, I'm creating this task to complete the design explorations an I'm moving it to Up-Next so I can work on it in the next sprint.

The open questions described in this task have been solved during our last Eng/Design sync and the Label component's spec sheet has been completed so the task is Ready for development.

In T314514#8882865, @bmartinezcalvo wrote:

There is one open question to solve in the task before implementing the Image component: Do we want an option to provide a specific px size in the image? (use case from VE image settings)

I've included the component's documentation in the task description explaining how we could represent the accordion in the configurable demo and other demos.

@AnneT one thing to keep in mind is that the separation between label and ToggleSwitch should be 16px @spacing-100 while in the current Codex demo is 6px. We should fix it.

Moving this task to In Design to define the spec and explore the open questions to solve.

Since the current #d33 is not working on #F8F9FA and #EAECF0, I've included some possible solutions in the task description. Sharing them also here:

I've redesigned the userTemporary icon to be the same size as the userAvatar. Also updated the icon in the Figma library and published it.

Moving to In Design to resize the icon shape to the right size.

In T335694#8882569, @RHo wrote:

@bmartinezcalvo - could you please confirm the addition is reflected in Figma and other documentation per the task description? Then pending answer from AHT, we can resolve.

There is one open question to solve in the task before implementing the Image component: Do we want an option to provide a specific px size in the image? (use case from VE image settings)

During the last Eng/Design sync we decided that aspect ratios will not be defined as tokens but they will be included in the Image component as component's property. So I've created the Figma spec sheet accordingly with this and adding the following:

In T242467#8881974, @Samwilson wrote:

Patchdemo working now: https://patchdemo.wmflabs.org/wikis/1800f12d4e/wiki/Special:UrlShortener?url=https://patchdemo.wmflabs.org/foobar

It's still WIP, there's more to be done for the first draft, but do share any thoughts!

In T332124#8852583, @egardner wrote:

I've updated the patch to ensure that correct spacing exists between the various elements.

In T325105#8878352, @AnneT wrote:

@bmartinezcalvo I ended up not creating a separate demo, because having 2 CSS Tabs on a single page requires some extra work to track the current tab for both demos. This muddies the markup for both demos, which I believe will make them harder to understand for users. Most users will only ever have a single set of CSS tabs on a page, so they will not need to know how to handle multiple instances.

Instead, I just added another tab to the existing demo, and increased the length of the tab names so you can see the horizontal scrolling.

During the last Eng/Design sync we take the decision of removing the fixedHeight prop. We will only have an autosize prop. The grabber will appear when autosize=false, and will not appear when autosize=true.

The text mixings should be created in code in some moment, but at the moment just the Figma text styles combine the text tokens to create the Figma text styles. So I've included the design tokens used on each Figma text style mixing (font-size, line-height, font-family and font-weight) within the text style description so developers can read them when inspecting.