Page MenuHomePhabricator

AnneT (Anne Tomasevich)
Senior Software Engineer, Design Systems Team

Today

  • Clear sailing ahead.

Tomorrow

  • Clear sailing ahead.

Tuesday

  • Clear sailing ahead.

User Details

User Since
Aug 5 2019, 7:51 PM (199 w, 5 d)
Availability
Available
LDAP User
Anne Tomasevich
MediaWiki User
ATomasevich (WMF) [ Global Accounts ]

Recent Activity

Wed, May 31

AnneT updated the task description for T330803: Field: explore implementation options.
Wed, May 31, 7:57 PM · Accessibility, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT closed T330803: Field: explore implementation options, a subtask of T309239: Add Field component to Codex, as Resolved.
Wed, May 31, 7:56 PM · Patch-For-Review, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT closed T330803: Field: explore implementation options as Resolved.
Wed, May 31, 7:56 PM · Accessibility, Design-Systems-Team (Design-Systems-Sprint), Codex

Tue, May 30

AnneT updated subscribers of T334514: ToggleSwitch: consider making the label required.

I'd like to revisit this after spending a lot of time with the new Field and Label components and other input components like Checkbox and Radio. Some thoughts:

Tue, May 30, 6:48 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT closed T337279: Provide comprehensive linting against static values where tokens are available as Resolved.
Tue, May 30, 6:22 PM · Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT removed a project from T325105: [Epic] Add CSS-only versions of most Codex Vue components: Patch-For-Review.
Tue, May 30, 6:21 PM · Epic, Design-Systems-Team (Design-Systems-Sprint), CSS, Codex
AnneT closed T331034: TextArea: Add `fixedHeight` and `autosize` props, a subtask of T284272: TextArea: Add TextArea component to Codex, as Resolved.
Tue, May 30, 6:19 PM · Design-Systems-Team, Design, Codex
AnneT closed T331034: TextArea: Add `fixedHeight` and `autosize` props as Resolved.
Tue, May 30, 6:19 PM · Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT moved T325105: [Epic] Add CSS-only versions of most Codex Vue components from Ready for Development to Pending Release on the Design-Systems-Team (Design-Systems-Sprint) board.
Tue, May 30, 6:17 PM · Epic, Design-Systems-Team (Design-Systems-Sprint), CSS, Codex

Mon, May 29

AnneT moved T309246: Label: Add Label component to Codex from Committed to In Development on the Design-Systems-Team (Design-Systems-Sprint) board.
Mon, May 29, 11:49 AM · Patch-For-Review, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT renamed T309246: Label: Add Label component to Codex from Label: Add Label component or composable to Codex to Label: Add Label component to Codex.
Mon, May 29, 11:44 AM · Patch-For-Review, Design-Systems-Team (Design-Systems-Sprint), Codex

Thu, May 25

Restricted Application raised the priority of T284273: Allow links to be styled as buttons from Medium to High.
Thu, May 25, 10:22 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, QuickSurveys, Codex
AnneT moved T284273: Allow links to be styled as buttons from Committed to Code Review on the Design-Systems-Team (Design-Systems-Sprint) board.
Thu, May 25, 10:22 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, QuickSurveys, Codex
AnneT updated subscribers of T333394: Button: Support the "checkbox hack".

@CCiufo-WMF revisiting this, I did originally set the acceptance criteria to just cover making this possible, not actually providing full support within Codex itself. So resolving T284273 will resolve this task too, although we may want to consider if we do want to provide documented, full support for the checkbox hack in Codex in the future.

Thu, May 25, 10:22 PM · Patch-For-Review, Codex, Design-Systems-Team
AnneT renamed T284273: Allow links to be styled as buttons from Allow links to be styles as buttons to Allow links to be styled as buttons.
Thu, May 25, 10:21 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, QuickSurveys, Codex
AnneT updated the task description for T284273: Allow links to be styled as buttons.
Thu, May 25, 10:20 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, QuickSurveys, Codex
AnneT renamed T284273: Allow links to be styled as buttons from Allow buttons to be links to Allow links to be styles as buttons.
Thu, May 25, 10:15 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, QuickSurveys, Codex
AnneT updated the task description for T284273: Allow links to be styled as buttons.
Thu, May 25, 3:07 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, QuickSurveys, Codex

Wed, May 24

AnneT added a comment to T325105: [Epic] Add CSS-only versions of most Codex Vue components.

@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.

Wed, May 24, 8:46 PM · Epic, Design-Systems-Team (Design-Systems-Sprint), CSS, Codex
AnneT added a comment to T333394: Button: Support the "checkbox hack".

@bwang suggested a way for us to do minimal updates in Codex to allow them to achieve the right styles in Vector:

Wed, May 24, 7:10 PM · Patch-For-Review, Codex, Design-Systems-Team
AnneT updated the task description for T284273: Allow links to be styled as buttons.
Wed, May 24, 7:07 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, QuickSurveys, Codex
AnneT added a comment to T326665: Design and build Accordion component (MVP).

Good question @CCiufo-WMF and thanks for laying out the options @egardner - I would recommend we update the markup of the Vue component to use <details> (in a future patch) and use that for the CSS-only version as well. I can't get behind the idea of not using the appropriate, semantic HTML element just to support IE11

Wed, May 24, 5:11 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, Design, Codex

Mon, May 22

AnneT moved T326665: Design and build Accordion component (MVP) from Ready for Development to Code Review on the Design-Systems-Team (Design-Systems-Sprint) board.
Mon, May 22, 9:21 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, Design, Codex
AnneT assigned T326665: Design and build Accordion component (MVP) to Sswiergosz.

@Sswiergosz I'm assigning this to you since you built the component, but do let us know if you don't have time to do follow-up work. Thanks again for your contribution to Codex!

Mon, May 22, 9:21 PM · Design-Systems-Team (Design-Systems-Sprint), Patch-For-Review, Design, Codex
AnneT changed the status of T309246: Label: Add Label component to Codex, a subtask of T307319: Design System Codex / Wikit, from Open to In Progress.
Mon, May 22, 5:57 PM · Linked-Open-Data-Network-Program, Wikidata, Foundational Technology Requests
AnneT changed the status of T309246: Label: Add Label component to Codex from Open to In Progress.
Mon, May 22, 5:57 PM · Patch-For-Review, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT moved T309239: Add Field component to Codex from Ready for Development to In Development on the Design-Systems-Team (Design-Systems-Sprint) board.
Mon, May 22, 5:57 PM · Patch-For-Review, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT changed the status of T309239: Add Field component to Codex, a subtask of T307319: Design System Codex / Wikit, from Open to In Progress.
Mon, May 22, 5:57 PM · Linked-Open-Data-Network-Program, Wikidata, Foundational Technology Requests
AnneT changed the status of T309239: Add Field component to Codex from Open to In Progress.
Mon, May 22, 5:57 PM · Patch-For-Review, Design-Systems-Team (Design-Systems-Sprint), Codex

Thu, May 18

AnneT changed the status of T330803: Field: explore implementation options, a subtask of T309239: Add Field component to Codex, from Open to In Progress.
Thu, May 18, 8:09 PM · Patch-For-Review, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT changed the status of T330803: Field: explore implementation options from Open to In Progress.
Thu, May 18, 8:09 PM · Accessibility, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT moved T330803: Field: explore implementation options from In Development to Code Review on the Design-Systems-Team (Design-Systems-Sprint) board.
Thu, May 18, 8:09 PM · Accessibility, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT added a comment to T325105: [Epic] Add CSS-only versions of most Codex Vue components.
Message
  • The messages with dismiss button and auto-dismiss are missing.

The dismiss and auto-dismiss functionality is not really possible without JavaScript, so those features were not implemented.

@AnneT should we include a message in the CSS-only version demo explaining this?

Thu, May 18, 6:33 PM · Epic, Design-Systems-Team (Design-Systems-Sprint), CSS, Codex
AnneT added a comment to T333392: Button: add "large" size.

@bmartinezcalvo I've added the size prop to the configurable demo, thanks for the reminder!

Thu, May 18, 5:22 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT updated subscribers of T326900: Vertical centering issues of text/multiline text and icons in several components .

@lwatson FYI, this is the component-library-wide vertical alignment issue I was talking about

Thu, May 18, 2:14 PM · Design-Systems-Team, Codex
AnneT updated subscribers of T336526: Use Codex button/icon markup instead of mediawiki ui markup in Vector.

@Jdlrobson @bwang we've just merged the following:

Thu, May 18, 12:45 PM · Patch-For-Review, Design-Systems-Team, Desktop Improvements (Vector 2022), Readers-Web-Backlog (Web Team FY2022-23 Q4 Sprint 4)
AnneT claimed T322436: Codex should provide mechanism for flushing icons.
Thu, May 18, 12:42 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex

Wed, May 17

AnneT added a comment to T331034: TextArea: Add `fixedHeight` and `autosize` props.

Moving this to design review so we can decide what to do about fixedHeight

Wed, May 17, 5:39 PM · Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT reassigned T331034: TextArea: Add `fixedHeight` and `autosize` props from lwatson to bmartinezcalvo.
Wed, May 17, 5:39 PM · Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT claimed T336533: Icon: CSS-only icons in buttons do not scale properly.
Wed, May 17, 5:38 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT moved T336533: Icon: CSS-only icons in buttons do not scale properly from Design Sign-Off to Pending Release on the Design-Systems-Team (Design-Systems-Sprint) board.
Wed, May 17, 5:37 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT reassigned T336533: Icon: CSS-only icons in buttons do not scale properly from AnneT to bmartinezcalvo.
Wed, May 17, 5:37 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT reassigned T325105: [Epic] Add CSS-only versions of most Codex Vue components from AnneT to bmartinezcalvo.
Wed, May 17, 5:37 PM · Epic, Design-Systems-Team (Design-Systems-Sprint), CSS, Codex
AnneT changed the status of T335387: CSS Components on IE11: Icons are not displayed from Open to Stalled.
Wed, May 17, 5:37 PM · Browser-Support-Internet-Explorer, Patch-For-Review, Design-Systems-Team (Design-Systems-Sprint)
AnneT moved T333437: Create MVP version of DSG documentation in Codex from In Development to Code Review on the Design-Systems-Team (Design-Systems-Sprint) board.
Wed, May 17, 5:37 PM · Documentation, Wikimedia Design Style Guide, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT changed the status of T335387: CSS Components on IE11: Icons are not displayed, a subtask of T334619: Perform a browser support test for Codex built with Vite 4, from Open to Stalled.
Wed, May 17, 5:37 PM · Quality-and-Test-Engineering-Team (QTE) (Test engineering), Design-Systems-Team (Design-Systems-Sprint)

Tue, May 16

AnneT changed the status of T322077: Lower the maintenance costs of TypeaheadSearch in Vector from Stalled to In Progress.
Tue, May 16, 8:27 PM · Patch-For-Review, Design-Systems-Team, Codex

Mon, May 15

AnneT added a comment to T335710: [Spike] Determine remaining blockers (if any) for CSS component adoption.

@bwang we hadn't implemented any responsiveness in the flush layout mixin until just now since we were blocked on how to implement T333392: Button: add "large" size. I just pushed a series of patches that will:

Mon, May 15, 10:59 PM · MW-1.41-notes (1.41.0-wmf.10; 2023-05-23), Patch-For-Review, Readers-Web-Backlog (Web Team FY2022-23 Q4 Sprint 3)
AnneT moved T325105: [Epic] Add CSS-only versions of most Codex Vue components from Ready for Development to Code Review on the Design-Systems-Team (Design-Systems-Sprint) board.

@bmartinezcalvo thanks for all the feedback! I've responded to it all and pushed a patch that fixes some of the issues you raised. I just have a question about the Select disabled colors.

Mon, May 15, 9:46 PM · Epic, Design-Systems-Team (Design-Systems-Sprint), CSS, Codex
AnneT updated the task description for T333392: Button: add "large" size.
Mon, May 15, 9:32 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT renamed T333392: Button: add "large" size from Button: Increase padding of buttons on small screens to Button: add "large" size.
Mon, May 15, 9:25 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT claimed T333392: Button: add "large" size.

Update: the engineers have decided against largeOnMobile. Since Minerva only uses large buttons for all viewport widths for now, we will simply add the large size.

Mon, May 15, 7:56 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT added a comment to T333392: Button: add "large" size.

@bmartinezcalvo thanks for your thoughts on this! I like the idea of introducing a new size for the 44px version, and agree with the terminology "medium" for the existing size and "large" for the 44px size. Not restricting it to icon-only buttons makes sense to me and makes implementation a bit easier.

Mon, May 15, 2:54 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT added a comment to T336265: Dialog: Enable removal of body padding and gap styles.

@Sgs the idea of style props is really interesting, thank for sharing those examples. I agree that a boolean prop is not ideal here and that we should think about a pattern that we could use for cases like this throughout the library.

Mon, May 15, 2:50 PM · Design-Systems-Team, Codex
AnneT placed T336548: [Spike] Try using the default WikimediaUI Codex theme in Vector up for grabs.

@CCiufo-WMF Sorry, I must have assigned myself by accident - this would be for the Web team to do, but we will want to discuss the results of the experiment to determine if we want to continue to offer the legacy Wikimedia UI theme in Codex (the one with the 14px base font size).

Mon, May 15, 2:06 PM · Patch-For-Review, Readers-Web-Backlog (Web Team FY2022-23 Q4 Sprint 4), Design-Systems-Team, Codex

Thu, May 11

AnneT added a comment to T288287: Remove IE11 from Basic support ("Grade C").

Speaking specifically about IE11 here:

Thu, May 11, 10:43 PM · Design-Systems-Team, Front-end Modernization, CSS, MediaWiki-General, MediaWiki-extensions-General, Browser-Support-Internet-Explorer
AnneT added a comment to T322436: Codex should provide mechanism for flushing icons.

It looks like the only remaining issue (once my latest patch is merged and released) is T336548.

Thu, May 11, 9:26 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT created T336548: [Spike] Try using the default WikimediaUI Codex theme in Vector.
Thu, May 11, 9:24 PM · Patch-For-Review, Readers-Web-Backlog (Web Team FY2022-23 Q4 Sprint 4), Design-Systems-Team, Codex
AnneT added a comment to T333392: Button: add "large" size.

@bmartinezcalvo @Volker_E @egardner we're in agreement with the Web team that we should handle this in the Button component and enable dev users to set a larger size in certain contexts, and that it's acceptable to set the larger size only on mobile viewports. We now need to decide what's appropriate in the context of the design system. The remaining questions are:

Thu, May 11, 9:11 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT changed the status of T322436: Codex should provide mechanism for flushing icons, a subtask of T322077: Lower the maintenance costs of TypeaheadSearch in Vector, from Open to In Progress.
Thu, May 11, 6:02 PM · Patch-For-Review, Design-Systems-Team, Codex
AnneT changed the status of T322436: Codex should provide mechanism for flushing icons from Open to In Progress.
Thu, May 11, 6:02 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT added a comment to T322436: Codex should provide mechanism for flushing icons.

However, it looks like the flushing is 1px off from what we currently use - Looks like you subtract the border here rather than add it: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/918598/3/resources/lib/codex-design-tokens/theme-wikimedia-ui.less#163 - I'm not sure which is correct since it's late in my day but wanted to note this down.

Thu, May 11, 6:00 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT moved T336533: Icon: CSS-only icons in buttons do not scale properly from Committed to Code Review on the Design-Systems-Team (Design-Systems-Sprint) board.
Thu, May 11, 5:51 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT changed the status of T336533: Icon: CSS-only icons in buttons do not scale properly from Open to In Progress.
Thu, May 11, 5:51 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT created T336533: Icon: CSS-only icons in buttons do not scale properly.
Thu, May 11, 5:28 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex

Wed, May 10

AnneT added a comment to T322436: Codex should provide mechanism for flushing icons.

To add more context: Codex buttons use px for padding, so using px for the flush layout mixin is necessary since button padding will not change with font size. So the mixin will work with Codex buttons but not the Vector buttons with relative padding values.

Wed, May 10, 11:25 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT committed rEVTE3e8ea46ed84a: Update Codex to v0.10.0 (authored by AnneT).
Update Codex to v0.10.0
Wed, May 10, 8:42 PM

Tue, May 9

AnneT updated subscribers of T333584: Add Stepper component to Codex.

This makes me wonder about a11y requirements. Should we backup the dots with some specific aria attributes or a title? Also, if click navigation is supported, should we support keyboard arrow navigation?

Tue, May 9, 9:51 PM · Design-Systems-Team, Codex
Sgs awarded T336265: Dialog: Enable removal of body padding and gap styles a Like token.
Tue, May 9, 2:54 PM · Design-Systems-Team, Codex
AnneT added a comment to T333392: Button: add "large" size.

@Jdlrobson we've been referring to these kinds of buttons with icons as icon-only buttons (i.e. no visible text).

Tue, May 9, 1:45 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT added a comment to T336265: Dialog: Enable removal of body padding and gap styles.

@Sgs @VYanez-WMF please feel free to edit the description to add more details!

Tue, May 9, 1:43 PM · Design-Systems-Team, Codex
AnneT created T336265: Dialog: Enable removal of body padding and gap styles.
Tue, May 9, 1:43 PM · Design-Systems-Team, Codex
AnneT added a comment to T333584: Add Stepper component to Codex.

@Sgs Thanks for raising these points! I think we can narrow down the potential features of this component to a minimum viable product that will work for the onboarding dialog and be extendable in the future if we need to add more features to support more use cases.

Tue, May 9, 12:21 PM · Design-Systems-Team, Codex

Mon, May 8

AnneT added a comment to T333437: Create MVP version of DSG documentation in Codex .

@bmartinezcalvo Text versions of the typography examples are now up for review! https://917391--wikimedia-codex.netlify.app/style-guide/typography.html#use-of-styles

Mon, May 8, 6:44 PM · Documentation, Wikimedia Design Style Guide, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT added a comment to T333437: Create MVP version of DSG documentation in Codex .

@bmartinezcalvo done in the latest patchset; it'll show up on the test site shortly!

Mon, May 8, 1:45 PM · Documentation, Wikimedia Design Style Guide, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT closed T335088: Add documentation to the Codex docs site explaining what CSS-only components are and how to use them as Resolved.
Mon, May 8, 12:45 PM · Documentation, Design-Systems-Team, Codex

May 4 2023

AnneT closed T332753: Create a basic "Hello world" example of how to use Codex in a MediaWiki extension as Resolved.

This has been completed and documented on mw.org

May 4 2023, 7:12 PM · Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT closed T332753: Create a basic "Hello world" example of how to use Codex in a MediaWiki extension, a subtask of T328777: Develop plan for DST representation at Hackathon 2023, as Resolved.
May 4 2023, 7:12 PM · Design-Systems-Team (Design-Systems-Sprint)
AnneT removed a project from T332753: Create a basic "Hello world" example of how to use Codex in a MediaWiki extension: Patch-For-Review.
May 4 2023, 7:11 PM · Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT updated the task description for T332753: Create a basic "Hello world" example of how to use Codex in a MediaWiki extension.
May 4 2023, 7:11 PM · Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT closed T331039: TextArea: Add base and state styles, a subtask of T284272: TextArea: Add TextArea component to Codex, as Resolved.
May 4 2023, 2:50 PM · Design-Systems-Team, Design, Codex
AnneT closed T331039: TextArea: Add base and state styles as Resolved.

Since there's no configurable demo set up for TextArea yet, I think we can skip design review for now. Once the TextArea demos are built and we're getting ready to take TextArea out of WIP, we can make sure it goes through design review. Nice work, @lwatson!

May 4 2023, 2:50 PM · Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT updated the task description for T331039: TextArea: Add base and state styles.
May 4 2023, 2:49 PM · Design-Systems-Team (Design-Systems-Sprint), Codex

May 3 2023

AnneT moved T325105: [Epic] Add CSS-only versions of most Codex Vue components from In Development to Design Sign-Off on the Design-Systems-Team (Design-Systems-Sprint) board.

@bmartinezcalvo / @CCiufo-WMF do we want to do design review of CSS-only components? I think it would be worthwhile to have a designer review the CSS-only components that we have implemented just to check that we have indeed reached an acceptable level of parity with the Vue component. FWIW, not all components are 100% the same due to different underlying markup (e.g. the CSS-only Select menu is native to the browser, and keyboard navigation works differently for CSS-only tabs).

May 3 2023, 9:12 PM · Epic, Design-Systems-Team (Design-Systems-Sprint), CSS, Codex
AnneT updated the task description for T325105: [Epic] Add CSS-only versions of most Codex Vue components.
May 3 2023, 9:09 PM · Epic, Design-Systems-Team (Design-Systems-Sprint), CSS, Codex
AnneT added a comment to T333437: Create MVP version of DSG documentation in Codex .

Thanks for the feedback @bmartinezcalvo! Everything should now be fixed except for this one:

May 3 2023, 4:48 PM · Documentation, Wikimedia Design Style Guide, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT updated subscribers of T333392: Button: add "large" size.

Looping in @Jdlrobson and @bwang so they can weigh in on the design discussion here.

May 3 2023, 3:52 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT added a comment to T322436: Codex should provide mechanism for flushing icons.

@Jdlrobson @bwang The patch to add this mixin has been merged, but please let us know if you have any feedback. See the code here and a working example here (below the button tables).

May 3 2023, 3:45 PM · CSS, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT added a comment to T270150: Selectors in content.media.less need improvement in terms of performance and stability.

Am I understanding correctly that part of the problem is that we could potentially add more CSS classes to the parser-generated markup, but this would not cover templates that mimic the parser output? If that's the case, I wonder if some version of "CSS-only components" could help here. This could look like creating semantic CSS class names via BEM and documenting the intended markup structure and classes, which template authors could copy. We're documenting CSS-only Codex components on the Codex docs site (example); something similar could be done on-wiki for this.

May 3 2023, 3:39 PM · MW-1.41-notes (1.41.0-wmf.11; 2023-05-30), Patch-For-Review, MW-1.39-notes (1.39.0-wmf.4; 2022-03-23), Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure), Parsoid, Performance-Team (Radar), Parsoid-Media-Structure

May 2 2023

AnneT updated subscribers of T335710: [Spike] Determine remaining blockers (if any) for CSS component adoption.
May 2 2023, 7:44 PM · MW-1.41-notes (1.41.0-wmf.10; 2023-05-23), Patch-For-Review, Readers-Web-Backlog (Web Team FY2022-23 Q4 Sprint 3)
AnneT added a comment to T333394: Button: Support the "checkbox hack".

@bwang Good point - we make use of several native button pseudo-selectors (enabled/disabled, active/focus/hover...) which would not work with label, and I'm assuming we'd need to explicitly set display: inline-block to cover other elements. We would either need to use an explicit class-based approach in Button or write special styles to cover other elements.

May 2 2023, 7:41 PM · Patch-For-Review, Codex, Design-Systems-Team
AnneT added a comment to T335710: [Spike] Determine remaining blockers (if any) for CSS component adoption.

@bwang we now support 3 icon sizes in both the Vue and CSS-only icons, with associated size tokens that are also available. Will that be sufficient for your needs?

May 2 2023, 7:37 PM · MW-1.41-notes (1.41.0-wmf.10; 2023-05-23), Patch-For-Review, Readers-Web-Backlog (Web Team FY2022-23 Q4 Sprint 3)
AnneT placed T334887: docs: Consolidate top-level nav items up for grabs.
May 2 2023, 5:32 PM · Documentation, Design-Systems-Team (Design-Systems-Sprint)
AnneT moved T334887: docs: Consolidate top-level nav items from In Development to Design Sign-Off on the Design-Systems-Team (Design-Systems-Sprint) board.
May 2 2023, 5:31 PM · Documentation, Design-Systems-Team (Design-Systems-Sprint)
AnneT added a comment to T334887: docs: Consolidate top-level nav items.

@bmartinezcalvo awesome, thanks for reviewing!

May 2 2023, 12:06 PM · Documentation, Design-Systems-Team (Design-Systems-Sprint)

May 1 2023

AnneT added a comment to T333437: Create MVP version of DSG documentation in Codex .

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

May 1 2023, 10:17 PM · Documentation, Wikimedia Design Style Guide, Design-Systems-Team (Design-Systems-Sprint), Codex
AnneT added a comment to T333392: Button: add "large" size.

@bmartinezcalvo That all makes sense to me! I've opened a patch as a proof of concept of this change,here's the preview site. Some details to review on mobile:

May 1 2023, 6:25 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT renamed T333392: Button: add "large" size from Button: Increase padding of icon-only buttons on small screens to Button: Increase padding of buttons on small screens.
May 1 2023, 3:31 PM · Design-Systems-Team (Design-Systems-Sprint), Accessibility, Codex
AnneT changed the status of T333392: Button: add "large" size, a subtask of T322077: Lower the maintenance costs of TypeaheadSearch in Vector, from Open to In Progress.
May 1 2023, 3:31 PM · Patch-For-Review, Design-Systems-Team, Codex
AnneT added a comment to T334887: docs: Consolidate top-level nav items.

@bmartinezcalvo thanks for the info! You can see the updates here. One note: when menu items are hovered, they have black text, but I decided to keep the blue text on hover in the menu since that's how regular menu items (not in the dropdown menu) act.

May 1 2023, 1:07 PM · Documentation, Design-Systems-Team (Design-Systems-Sprint)