Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix minor craft bugs (button disabled cursor and chip close button appearance) & stories & add data test id prop to chip, button, icon button #633

Merged
merged 14 commits into from
Apr 13, 2022
Merged

Fix minor craft bugs (button disabled cursor and chip close button appearance) & stories & add data test id prop to chip, button, icon button #633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
ae2f28e
fix comp stories and craft bugs
Apr 11, 2022
a69324f
fix chips button
Apr 11, 2022
7883355
add actions support to story
Apr 11, 2022
2c10280
fix story
Apr 11, 2022
305e3c6
fix prop types
Apr 11, 2022
54364e9
Merge branch 'master' of github.com:mondaycom/monday-ui-react-core in…
Apr 11, 2022
8047ad8
fix tests
Apr 11, 2022
159deeb
fix tests
Apr 12, 2022
acf5e91
fix tests
Apr 12, 2022
1f0dd97
wip
Apr 12, 2022
ca3a1e4
linter and test fixes
Apr 13, 2022
67906a9
linter and test fixes
Apr 13, 2022
4a8ba11
fix function sign
Apr 13, 2022
b84ea1f
fix function sign
Apr 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/components/AlertBanner/__tests__/__snapshots__/alertBanner-snapshot-tests.jest.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ exports[`AlertBanner should render correctly with background color 1`] = `
aria-disabled={false}
aria-label="close-toast"
className="monday-alert-banner__alert-banner-close-btn monday-style-button monday-style-button--size-small monday-style-button--kind-tertiary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -76,6 +77,7 @@ exports[`AlertBanner should render correctly without props 1`] = `
aria-disabled={false}
aria-label="close-toast"
className="monday-alert-banner__alert-banner-close-btn monday-style-button monday-style-button--size-small monday-style-button--kind-tertiary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -177,6 +179,7 @@ exports[`AlertBanner should render with correctly with multiple elements 1`] = `
<button
aria-disabled={false}
className="monday-style-alert-banner-button monday-style-button monday-style-button--size-small monday-style-button--kind-primary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -197,6 +200,7 @@ exports[`AlertBanner should render with correctly with multiple elements 1`] = `
aria-disabled={false}
aria-label="close-toast"
className="monday-alert-banner__alert-banner-close-btn monday-style-button monday-style-button--size-small monday-style-button--kind-tertiary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -259,6 +263,7 @@ exports[`AlertBanner should render with correctly with text and button 1`] = `
<button
aria-disabled={false}
className="monday-style-alert-banner-button monday-style-button monday-style-button--size-small monday-style-button--kind-primary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -279,6 +284,7 @@ exports[`AlertBanner should render with correctly with text and button 1`] = `
aria-disabled={false}
aria-label="close-toast"
className="monday-alert-banner__alert-banner-close-btn monday-style-button monday-style-button--size-small monday-style-button--kind-tertiary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -364,6 +370,7 @@ exports[`AlertBanner should render with correctly with text and link 1`] = `
aria-disabled={false}
aria-label="close-toast"
className="monday-alert-banner__alert-banner-close-btn monday-style-button monday-style-button--size-small monday-style-button--kind-tertiary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -425,6 +432,7 @@ exports[`AlertBanner shuold render correctly with props 1`] = `
aria-disabled={false}
aria-label="close-toast"
className="monday-alert-banner__alert-banner-close-btn monday-style-button monday-style-button--size-small monday-style-button--kind-tertiary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down
20 changes: 12 additions & 8 deletions src/components/Button/Button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Loader from "components/Loader/Loader";
import { BUTTON_COLORS, BUTTON_INPUT_TYPE, BUTTON_TYPES, getActualSize } from "./ButtonConstants";
import { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from "./helper/dom-helpers";
import "./Button.scss";
import { ELEMENT_TYPES, getTestId } from "utils/test-utils";

const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;

Expand Down Expand Up @@ -54,7 +55,8 @@ const Button = forwardRef(
ariaHasPopup,
ariaExpanded,
ariaControls,
blurOnMouseUp
blurOnMouseUp,
dataTestId
},
ref
) => {
Expand Down Expand Up @@ -177,6 +179,7 @@ const Button = forwardRef(
id,
onFocus,
onBlur,
"data-testid": dataTestId || getTestId(ELEMENT_TYPES.BUTTON, id),
onMouseDown: onMouseDownClicked,
"aria-disabled": disabled,
"aria-labelledby": ariaLabeledBy,
Expand All @@ -188,23 +191,24 @@ const Button = forwardRef(
};
}, [
disabled,
mergedRef,
type,
classNames,
name,
onMouseUp,
style,
onButtonClicked,
id,
type,
onMouseDownClicked,
ariaLabel,
loading,
onFocus,
onBlur,
mergedRef,
dataTestId,
onMouseDownClicked,
ariaLabeledBy,
ariaControls,
ariaLabel,
loading,
ariaHasPopup,
ariaExpanded,
ariaHasPopup
ariaControls
]);

const leftIconSize = useMemo(() => {
Expand Down
1 change: 0 additions & 1 deletion src/components/Button/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@
@include theme-prop(background-color, disabled-background-color);
@include theme-prop(color, disabled-text-color);
cursor: not-allowed;
pointer-events: none;
sahariko marked this conversation as resolved.
Show resolved Hide resolved
opacity: 0.4;
}
}
Expand Down
7 changes: 4 additions & 3 deletions src/components/Button/__stories__/button.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,9 @@ export const buttonTemplate = createComponentTemplate(Button);
- [Feedback](#feedback)

## Overview
Buttons allow users take actions with a single click.
They should be clear indications that they triggering an action, buttons should be easy to find among other UI.
Buttons allow users to trigger an action or event with a single click.
For example, you can use a button for allowing the functionality of submitting a form, opening a dialog, canceling an action,
or performing a delete operation.

<Canvas>
<Story name="Overview"
Expand All @@ -60,7 +61,7 @@ They should be clear indications that they triggering an action, buttons should
"Use only one primary button, and any remaining calls to action should be represented as lower emphasis buttons"
]}/>

<Tip>If you need to use icon as button with no text, check out <Link href="/?path=/docs/buttons-iconbutton--overview" size={Link.sizes.SMALL} withoutSpacing>Icon button</Link> component</Tip>
<Tip>If you need to use icon as button with no text, check out <Link href="/?path=/docs/buttons-icon-button--overview" size={Link.sizes.SMALL} withoutSpacing>Icon button</Link> component</Tip>

## Variants
### Button kinds
Expand Down
20 changes: 20 additions & 0 deletions src/components/Button/__tests__/__snapshots__/button-snapshot-tests.jest.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ exports[`Button renders correctly a11y renders correctly with a11y props (false)
aria-label="text"
aria-labelledby="id"
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -30,6 +31,7 @@ exports[`Button renders correctly a11y renders correctly with a11y props (true)
aria-label="text"
aria-labelledby="id"
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -46,6 +48,7 @@ exports[`Button renders correctly renders Button color- negative 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-negative"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -62,6 +65,7 @@ exports[`Button renders correctly renders Button color- on-inverted-background 1
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-on-inverted-background"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -78,6 +82,7 @@ exports[`Button renders correctly renders Button color- on-primary-color 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-on-primary-color"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -94,6 +99,7 @@ exports[`Button renders correctly renders Button color- positive 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-positive"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -110,6 +116,7 @@ exports[`Button renders correctly renders Button color- primary 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -126,6 +133,7 @@ exports[`Button renders correctly renders Button kind- primary 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -142,6 +150,7 @@ exports[`Button renders correctly renders Button kind- secondary 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-secondary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -158,6 +167,7 @@ exports[`Button renders correctly renders Button kind- tertiary 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-tertiary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -174,6 +184,7 @@ exports[`Button renders correctly renders Button size- large 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-large monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -190,6 +201,7 @@ exports[`Button renders correctly renders Button size- medium 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -206,6 +218,7 @@ exports[`Button renders correctly renders Button size- small 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-small monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -222,6 +235,7 @@ exports[`Button renders correctly renders correctly with callbacks 1`] = `
<button
aria-disabled={false}
className="test monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -238,6 +252,7 @@ exports[`Button renders correctly renders correctly with className 1`] = `
<button
aria-disabled={false}
className="test monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -254,6 +269,7 @@ exports[`Button renders correctly renders correctly with empty props 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -270,6 +286,7 @@ exports[`Button renders correctly renders correctly with id 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button_test"
disabled={false}
id="test"
onBlur={[Function]}
Expand All @@ -287,6 +304,7 @@ exports[`Button renders correctly renders correctly with leftIcon 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -306,6 +324,7 @@ exports[`Button renders correctly renders correctly with props change ui 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary monday-style-button--color-primary-active monday-style-button--margin-right monday-style-button--margin-left monday-style-button--right-flat monday-style-button--left-flat monday-style-button--no-side-padding"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand All @@ -322,6 +341,7 @@ exports[`Button renders correctly renders correctly with rightIcon 1`] = `
<button
aria-disabled={false}
className="monday-style-button monday-style-button--size-medium monday-style-button--kind-primary monday-style-button--color-primary"
data-testid="button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down
Loading