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

PXWEB2-34 Added option for icon left and icon right. Added stories. #41

Merged
merged 17 commits into from
Mar 5, 2024
Merged

PXWEB2-34 Added option for icon left and icon right. Added stories. #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
fd7af6b
PXWEB2-34 Added option for icon left and icon right. Added stories.
PerIngeVaaje Feb 14, 2024
43a9136
PXWEB2-34 Changed alert message in stories
PerIngeVaaje Feb 15, 2024
be8ad6a
PXWEB2-34 changed icon for icon left and right on button in story
PerIngeVaaje Feb 15, 2024
1b96e24
PXWEB2-34
PerIngeVaaje Feb 21, 2024
6df5742
PXWEB2-34
PerIngeVaaje Feb 22, 2024
a20213a
PXWEB2-34
PerIngeVaaje Feb 22, 2024
4cd0c6f
PXWEB2-34 Set font-size to 14 px for small buttons
PerIngeVaaje Feb 27, 2024
cb4c8fe
PXWEB2-34 Ser line-height to 20px for small buttons
PerIngeVaaje Feb 27, 2024
c6a0d67
PXWEB2-34 Added option for icon left and icon right. Added stories.
PerIngeVaaje Feb 14, 2024
dacd6fa
PXWEB2-34 Changed alert message in stories
PerIngeVaaje Feb 15, 2024
188b0ed
PXWEB2-34 changed icon for icon left and right on button in story
PerIngeVaaje Feb 15, 2024
3382d2a
PXWEB2-34
PerIngeVaaje Feb 21, 2024
a4894a0
PXWEB2-34
PerIngeVaaje Feb 22, 2024
21b6a7f
PXWEB2-34
PerIngeVaaje Feb 22, 2024
0d90d4a
PXWEB2-34 Set font-size to 14 px for small buttons
PerIngeVaaje Feb 27, 2024
10e2806
PXWEB2-34 Ser line-height to 20px for small buttons
PerIngeVaaje Feb 27, 2024
0337ae5
Merge branch 'feature/PXWEB2-34-Button' of https://github.com/PxTools…
PerIngeVaaje Mar 4, 2024
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
42 changes: 23 additions & 19 deletions libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
font-style: normal;
font-weight: 500;
line-height: 1.5rem; /* 150% */
border: none;

&:disabled {
cursor: not-allowed;
Expand All @@ -24,16 +25,7 @@
color: var(--px-color-text-on-action);
border-radius: var(--px-border-radius-full);
background: var(--px-color-surface-action);

// Override browser default styles
border: none;
border-style: none;

&:hover {
border-radius: var(--px-border-radius-medium);
}
&:active {
border-radius: var(--px-border-radius-medium);
background: var(--px-color-surface-action-active);
}
&:disabled {
Expand All @@ -47,16 +39,14 @@

color: var(--px-color-text-action);
border-radius: var(--px-border-radius-full);
border: 1.5px solid var(--px-color-border-action);
box-shadow: 0 0 0 1.5px var(--px-color-border-action) inset;

&:hover {
color: var(--px-color-text-on-action-subtle);
border-radius: var(--px-border-radius-medium);
background: var(--px-color-surface-subtle-hover);
}
&:active {
color: var(--px-color-text-on-action);
border-radius: var(--px-border-radius-medium);
background: var(--px-color-surface-action-active);
}
&:disabled {
Expand All @@ -68,19 +58,16 @@
.tertiary {
// Override browser defaults styles
background-color: inherit;

color: var(--px-color-text-action);
border: none;
border-radius: var(--px-border-radius-full);

&:hover {
color: var(--px-color-text-on-action-subtle);
border-radius: var(--px-border-radius-medium);
background: var(--px-color-surface-subtle-hover);
}
&:active {
color: var(--px-color-text-on-action);
border-radius: var(--px-border-radius-medium);
background: var(--px-color-surface-action-active);
}
&:disabled {
Expand All @@ -90,14 +77,21 @@
}

.small {
display: flex;
width: 2rem;
display: inline-flex;
font-size: 0.875rem;
line-height: 1.25rem;
height: 2rem;
padding: 0.75rem;
padding: 0.375rem 0.75rem;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
&:hover {
border-radius: var(--px-border-radius-small);
}
&:active {
border-radius: var(--px-border-radius-small);
}
}

.medium {
Expand All @@ -107,8 +101,18 @@
justify-content: center;
align-items: center;
gap: 0.5rem;
&:hover {
border-radius: var(--px-border-radius-medium);
}
&:active {
border-radius: var(--px-border-radius-medium);
}
}

.iconOnly {
.iconOnlyMedium {
padding: 0.75rem;
}

.iconOnlySmall {
padding: 0.75rem 0.25rem;
}
20 changes: 19 additions & 1 deletion libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default meta;
type Story = StoryObj<typeof Button>;

function test() {
alert('test');
alert('Button clicked');
}

export const ButtonSettings: Story = {
Expand Down Expand Up @@ -127,6 +127,24 @@ export const Variants: StoryFn<typeof Button> = () => {
onClick={test}
aria-label={'Button with icon'}
></Button>
<br />
Primary icon left
<br />
<Button variant="primary" onClick={test} iconPosition="left" icon="Clock">
Button
</Button>
<br />
Primary icon right
<br />
<Button
variant="primary"
onClick={test}
icon="Clock"
iconPosition="right"
>
Button
</Button>
<br />
</>
);
};
23 changes: 19 additions & 4 deletions libs/pxweb2-ui/src/lib/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,40 @@ export interface ButtonProps
size?: 'small' | 'medium';
variant: 'primary' | 'secondary' | 'tertiary';
icon?: IconProps['iconName'];
iconPosition?: 'left' | 'right';
children?: string;
}

export function Button({
icon,
iconPosition = 'left',
variant,
size = 'medium',
children,
...rest
}: ButtonProps) {
return (
<button
className={cl(classes.button, classes[size], classes[variant], {
[classes.iconOnly]: !children && icon,
})}
className={cl(
classes.button,
classes[size],
classes[variant],
{
[classes.iconOnlyMedium]: !children && icon && size === 'medium',
},
{
[classes.iconOnlySmall]: !children && icon && size === 'small',
}
)}
{...rest}
>
{icon && <Icon iconName={icon}></Icon>}
{icon && iconPosition === 'left' && (
<Icon iconName={icon} className=""></Icon>
)}
{children}
{icon && iconPosition === 'right' && (
<Icon iconName={icon} className=""></Icon>
)}
</button>
);
}
Expand Down