Change Details

**Problem:** The way in which text truncation is handled by Codex buttons doesn't make them fully ready for all scenarios. Particularly those involving especially long translations in narrow screens. In said cases, Codex buttons (as their OOUI ancestors) will overflow their layout. The current text truncation strategy for buttons in Codex involves the following: 1. Ellipsis: Codex buttons now have a max-width of 28em, and they display an ellipsis to indicate that the button label is being truncated when it exceeds said max width. The ellipsis, though, is not displayed when the available space for the button is reduced. In said scenario, the button will overflow: {F37088538} 2. Wrapping: Codex buttons have a “no-wrap” rule applied by default to their labels. This prevents them from breaking into further lines of text (see the issue that originated the rule: T93552). In general, and given that button text needs to be as short and direct as possible, this shouldn't be an issue. Nevertheless, our products are localized into a large amount of languages, and some localizations (even of short labels) can cause buttons to overflow due to that property. {F37033787} **Solution:** 1. Ellipsis: A potentially more flexible approach would be for buttons to adjust their width and flexibly display ellipsis when their surrounding space is reduced: (Below, a max-width of 100% was applied to the button to showcase this behavior): {F37088566} In order to ensure that the complete information is conveyed, a tooltip should be displayed to display the full text. 2. Wrapping: Codex button (potentially only the standalone component) could include a property that allows its text to wrap. {F37033789} **Notes:** * This issue originally came from a OOUI task (T165870#8879237): It is not only a matter of removing the property `white-space: nowrap;` as it appears that, in order to bypass the no-wrap behavior of the OOUI button, we'd have to write separate style modules each time. (see T165870 and T165870#8891653 for further context) * In case we provide that wrapping property, then we should make sure to document the cases in which this prop would be useful, and to indicate that the primary recommendation is to keep buttons' text clear, concise and action-oriented. **Acceptance criteria:** [] We have an efficient solution to prevent button overflow in Codex [] The solution is documented in the Codex demo (Task TBC) [] The solution is documented in the Codex Components Figma library (Task TBC)

**Problem:** The way in which text truncation is handled by Codex buttons doesn't make them fully ready for all scenarios. Particularly those involving especially long translations in narrow screens. In said cases, Codex buttons (as their OOUI ancestors) will overflow their layout. The current text truncation strategy for buttons in Codex involves the following: 1. Ellipsis: Codex buttons now have a max-width of 28em, and they display an ellipsis to indicate that the button label is being truncated when it exceeds said max width. The ellipsis, though, is not displayed when the available space for the button is reduced. In said scenario, the button will overflow: {F37088538} 2. Wrapping: Codex buttons have a “no-wrap” rule applied by default to their labels. This prevents them from breaking into further lines of text (see the issue that originated the rule: T93552). In general, and given that button text needs to be as short and direct as possible, this shouldn't be an issue. Nevertheless, our products are localized into a large amount of languages, and some translations (even of short labels) can cause buttons to overflow due to the existence of that property. {F37033787} **Solution:** 1. Ellipsis: A potentially more flexible approach would be for buttons to adjust their width and flexibly display ellipsis when their surrounding space is reduced. (Below, a max-width of 100% was applied to the button to showcase this behavior): {F37088566} In order to ensure that the complete information is conveyed, a tooltip should accompany truncated buttons to display their full text. 2. Wrapping: Codex buttons (potentially only the standalone component) could include a property that allow their text to wrap whenever there's a known issue or risk of overflow. {F37033789} **Notes:** * This issue originally came from a OOUI task (T165870#8879237): It is not only a matter of removing the property `white-space: nowrap;` as it appears that, in order to bypass the no-wrap behavior of the OOUI button, we'd have to write separate style modules each time. (see T165870 and T165870#8891653 for further context) * In case we provide a wrapping property, then we should make sure to document the cases in which this prop would be useful, and to indicate that the primary recommendation is to keep buttons' text clear, concise and action-oriented. **Acceptance criteria:** [] We have an efficient solution to prevent button overflow in Codex [] The solution is documented in the Codex demo (Task TBC) [] The solution is documented in the Codex Components Figma library (Task TBC)

**Problem:** The way in which text truncation is handled by Codex buttons doesn't make them fully ready for all scenarios. Particularly those involving especially long translations in narrow screens. In said cases, Codex buttons (as their OOUI ancestors) will overflow their layout. The current text truncation strategy for buttons in Codex involves the following: 1. Ellipsis: Codex buttons now have a max-width of 28em, and they display an ellipsis to indicate that the button label is being truncated when it exceeds said max width. The ellipsis, though, is not displayed when the available space for the button is reduced. In said scenario, the button will overflow: {F37088538} 2. Wrapping: Codex buttons have a “no-wrap” rule applied by default to their labels. This prevents them from breaking into further lines of text (see the issue that originated the rule: T93552). In general, and given that button text needs to be as short and direct as possible, this shouldn't be an issue. Nevertheless, our products are localized into a large amount of languages, and some localiztranslations (even of short labels) can cause buttons to overflow due to the existence of that property. {F37033787} **Solution:** 1. Ellipsis: A potentially more flexible approach would be for buttons to adjust their width and flexibly display ellipsis when their surrounding space is reduced:. (Below, a max-width of 100% was applied to the button to showcase this behavior): {F37088566} In order to ensure that the complete information is conveyed, a tooltip should be displayedaccompany truncated buttons to display their full text. 2. Wrapping: Codex buttons (potentially only the standalone component) could include a property that allows its their text to wrap whenever there's a known issue or risk of overflow. {F37033789} **Notes:** * This issue originally came from a OOUI task (T165870#8879237): It is not only a matter of removing the property `white-space: nowrap;` as it appears that, in order to bypass the no-wrap behavior of the OOUI button, we'd have to write separate style modules each time. (see T165870 and T165870#8891653 for further context) * In case we provide thata wrapping property, then we should make sure to document the cases in which this prop would be useful, and to indicate that the primary recommendation is to keep buttons' text clear, concise and action-oriented. **Acceptance criteria:** [] We have an efficient solution to prevent button overflow in Codex [] The solution is documented in the Codex demo (Task TBC) [] The solution is documented in the Codex Components Figma library (Task TBC)