feat(Button): button redesign #1234
Conversation
src/components/PopupBase/__tests__/__snapshots__/PopupBase.spec.tsx.snap
Outdated
Show resolved
Hide resolved
|
Check the docs about breaking change comments, the syntax is important for the library to pick it up. (singular change, I think it should be on one line). Please adjust the description to match, then when squashing the commits, you can just copy paste it. |
This reverts commit 1a84a26.
BREAKING CHANGE: use 'medium' instead of 'normal' in the case of size
| &:active { | ||
| background-color: var(--transparent); | ||
| } | ||
| } |
| if (buttonRef && buttonRef.current) { | ||
| setButtonWidth(buttonRef.current.offsetWidth); | ||
| } | ||
| }, [buttonRef]); |
There was a problem hiding this comment.
In this case, we only measure the element's width during the initial phase. If the width or text changes during the button's lifecycle, it could result in an incorrect width. For example, if we switch the language and all the text changes, the button may have the wrong width. Although this might be an edge case, what do you think about measuring the element's width on demand—specifically when the loading state is true? This way, we will always have the correct width for both the button and the loading state:
....
const buttonRef = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);
const [buttonWidth, setButtonWidth] = React.useState<number | undefined>();
if (buttonRef.current && isLoading && !buttonWidth) {
setButtonWidth(buttonRef.current.offsetWidth);
}
if (!isLoading && buttonWidth) {
setButtonWidth(undefined); // Reset to auto width when not loading
}
if (typeof children !== 'number' && !children) {
return null;
}
...
style={{ width: buttonWidth ? `${buttonWidth}px` : 'auto' }}
....
There was a problem hiding this comment.
I still think we don't need React.useLayoutEffect for calculation width.
|
Loading state doesn't work for link: |
| &:active { | ||
| background-color: var(--transparent); | ||
| } | ||
| } |
Loading state has wrong width: Screen.Recording.2024-08-20.at.12.18.16.mov |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
BREAKING CHANGE: button props `isLink` & `isInline` & `isPrimary` are removed BREAKING CHANGE: button prop `isInline` button should be replaced by `size="small"` BREAKING CHANGE: button prop `isLink` should be replaced by `variant="ghost"` BREAKING CHANGE: button prop `isPrimary` should be replaced with `variant="filled"` (default) or removed BREAKING CHANGE: button prop `size: "normal"` is replaced with `size: "medium"` --------- Co-authored-by: André Nogueira <[email protected]> Co-authored-by: Oleksii Mukiienko <[email protected]>
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. Use imperative, present tense in your commit description ("change", not "changed" or "changes") without uppercases or period (.) at the end.
BREAKING CHANGE: button props isLink & isInline & isPrimary are removed
Checklist