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

Button: Added Special Button and Updated Button documentation sections #2737

Merged
merged 3 commits into from
Aug 5, 2024
Merged

Button: Added Special Button and Updated Button documentation sections #2737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3065a18
Add yellow button and update docs
ElishaSamPeterPrabhu Jul 30, 2024
0eb6577
format code , update options
ElishaSamPeterPrabhu Jul 30, 2024
44e12b8
Fix spacing in button property types column
cjwinsor Aug 5, 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
18 changes: 9 additions & 9 deletions stencil-workspace/src/components/modus-button-group/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@

## Properties

| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | -------------------------------------------------- | ---------------------------------------------------- | ------------------------ |
| `ariaDisabled` | `aria-disabled` | (optional) The button group's aria-disabled state. | `string` | `undefined` |
| `ariaLabel` | `aria-label` | (optional) The button group's aria-label. | `string` | `undefined` |
| `buttonStyle` | `button-style` | (optional) The style of the buttons in the group | `"borderless" \| "fill" \| "outline"` | `'outline'` |
| `color` | `color` | (optional) The color of the buttons in the group | `"danger" \| "primary" \| "secondary" \| "tertiary"` | `'primary'` |
| `disabled` | `disabled` | (optional) Disables the button group. | `boolean` | `undefined` |
| `selectionType` | `selection-type` | (optional) The selection type of buttons | `"multiple" \| "none" \| "single"` | `DEFAULT_SELECTION_TYPE` |
| `size` | `size` | (optional) The size of the buttons | `"large" \| "medium" \| "small"` | `'medium'` |
| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | -------------------------------------------------- | ----------------------------------------------------------------- | ------------------------ |
| `ariaDisabled` | `aria-disabled` | (optional) The button group's aria-disabled state. | `string` | `undefined` |
| `ariaLabel` | `aria-label` | (optional) The button group's aria-label. | `string` | `undefined` |
| `buttonStyle` | `button-style` | (optional) The style of the buttons in the group | `"borderless" \| "fill" \| "outline"` | `'outline'` |
| `color` | `color` | (optional) The color of the buttons in the group | `"danger" \| "primary" \| "secondary" \| "special" \| "tertiary"` | `'primary'` |
| `disabled` | `disabled` | (optional) Disables the button group. | `boolean` | `undefined` |
| `selectionType` | `selection-type` | (optional) The selection type of buttons | `"multiple" \| "none" \| "single"` | `DEFAULT_SELECTION_TYPE` |
| `size` | `size` | (optional) The size of the buttons | `"large" \| "medium" \| "small"` | `'medium'` |


## Events
Expand Down
2 changes: 1 addition & 1 deletion stencil-workspace/src/components/modus-button/modus-button.models.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export type ButtonStyle = 'borderless' | 'fill' | 'outline';
export type ButtonColor = 'danger' | 'primary' | 'secondary' | 'tertiary';
export type ButtonColor = 'danger' | 'primary' | 'secondary' | 'tertiary' | 'special';
export type ButtonSize = 'small' | 'medium' | 'large';
export type ButtonType = 'button' | 'reset' | 'submit' | 'toggle';
16 changes: 13 additions & 3 deletions stencil-workspace/src/components/modus-button/modus-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,14 +302,24 @@ button {
&.style-fill {
@each $color, $value in $btn-theme-colors {
$default-text-color: $white;
$border-color: $value;
$hover-border-color: map-get($btn-hover-colors, $color);
$active-border-color: map-get($btn-active-colors, $color);

@if $color == 'tertiary' {
$default-text-color: $col_trimble_gray;
}

@if $color == 'special' {
$default-text-color: $col_trimble_gray;
$border-color: $col_trimble_red;
$hover-border-color: $col_trimble_red;
$active-border-color: $col_trimble_red;
}

&.color-#{$color} {
background-color: var(--modus-btn-#{$color}-bg, $value);
border-color: var(--modus-btn-#{$color}-border-color, $value);
border-color: var(--modus-btn-#{$color}-border-color, $border-color);
color: var(--modus-btn-#{$color}-color, $default-text-color);

svg path {
Expand All @@ -320,13 +330,13 @@ button {
// Hover state
&.color-#{$color}:hover:not([disabled]) {
background-color: var(--modus-btn-#{$color}-hover-bg, map-get($btn-hover-colors, $color));
border-color: var(--modus-btn-#{$color}-hover-bg, map-get($btn-hover-colors, $color));
border-color: var(--modus-btn-#{$color}-hover-bg, $hover-border-color);
}

// Active state
&.color-#{$color}:active:not([disabled]) {
background-color: var(--modus-btn-#{$color}-active-bg, map-get($btn-active-colors, $color));
border-color: var(--modus-btn-#{$color}-active-bg, map-get($btn-active-colors, $color));
border-color: var(--modus-btn-#{$color}-active-bg, $active-border-color);
}
}
}
Expand Down
1 change: 1 addition & 0 deletions stencil-workspace/src/components/modus-button/modus-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export class ModusButton {
['secondary', 'color-secondary'],
['tertiary', 'color-tertiary'],
['dark', 'color-dark'],
['special', 'color-special'],
]);

classBySize: Map<string, string> = new Map([
Expand Down
3 changes: 3 additions & 0 deletions stencil-workspace/src/components/modus-button/modus-button.vars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,21 @@ $btn-theme-colors: (
'secondary': #6a6e79,
'tertiary': #cbcdd6,
'danger': #da212c,
'special': #fbad26,
);
$btn-hover-colors: (
'primary': #0082d6,
'secondary': #838793,
'tertiary': #e8e8ec,
'danger': #e44a53,
'special': #fec157,
);
$btn-active-colors: (
'primary': #00548a,
'secondary': #5e626b,
'tertiary': #bdbfcb,
'danger': #c41e28,
'special': #e49325,
);

// Default Outline
Expand Down
26 changes: 13 additions & 13 deletions stencil-workspace/src/components/modus-button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------- | ----------- |
| `ariaDisabled` | `aria-disabled` | (optional) The button's aria-disabled state. | `string` | `undefined` |
| `ariaLabel` | `aria-label` | (optional) The button's aria-label. | `string` | `undefined` |
| `buttonStyle` | `button-style` | (optional) The style of the button | `"borderless" \| "fill" \| "outline"` | `'fill'` |
| `color` | `color` | (optional) The color of the button | `"danger" \| "primary" \| "secondary" \| "tertiary"` | `'primary'` |
| `disabled` | `disabled` | (optional) Disables the button. | `boolean` | `undefined` |
| `iconOnly` | `icon-only` | (optional) Takes the icon name and renders an icon-only button. | `string` | `undefined` |
| `leftIcon` | `left-icon` | (optional) Takes the icon name and shows the icon aligned to the left of the button text. | `string` | `undefined` |
| `rightIcon` | `right-icon` | (optional) Takes the icon name and shows the icon aligned to the right of the button text. | `string` | `undefined` |
| `showCaret` | `show-caret` | (optional) Shows a caret icon right side of the button. | `boolean` | `undefined` |
| `size` | `size` | (optional) The size of the button. | `"large" \| "medium" \| "small"` | `'medium'` |
| `type` | `type` | (Optional) Button types | `"button" \| "reset" \| "submit" \| "toggle"` | `'button'` |
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | ----------- |
| `ariaDisabled` | `aria-disabled` | (optional) The button's aria-disabled state. | `string` | `undefined` |
| `ariaLabel` | `aria-label` | (optional) The button's aria-label. | `string` | `undefined` |
| `buttonStyle` | `button-style` | (optional) The style of the button | `"borderless" \| "fill" \| "outline"` | `'fill'` |
| `color` | `color` | (optional) The color of the button | `"danger" \| "primary" \| "secondary" \| "special" \| "tertiary"` | `'primary'` |
| `disabled` | `disabled` | (optional) Disables the button. | `boolean` | `undefined` |
| `iconOnly` | `icon-only` | (optional) Takes the icon name and renders an icon-only button. | `string` | `undefined` |
| `leftIcon` | `left-icon` | (optional) Takes the icon name and shows the icon aligned to the left of the button text. | `string` | `undefined` |
| `rightIcon` | `right-icon` | (optional) Takes the icon name and shows the icon aligned to the right of the button text. | `string` | `undefined` |
| `showCaret` | `show-caret` | (optional) Shows a caret icon right side of the button. | `boolean` | `undefined` |
| `size` | `size` | (optional) The size of the button. | `"large" \| "medium" \| "small"` | `'medium'` |
| `type` | `type` | (Optional) Button types | `"button" \| "reset" \| "submit" \| "toggle"` | `'button'` |


## Events
Expand Down
58 changes: 35 additions & 23 deletions ...space/storybook/stories/components/modus-button/modus-button-storybook-docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ For Text Buttons and Icon with Text Buttons,

For Icon only Buttons,

- Solid buttons supports all the given colors except `danger`.
- Outline buttons only support `primary` and `secondary` colors.
- Borderless buttons supports all the given colors except `danger`.

<Anchor storyId="components-button--default" />

Expand All @@ -29,9 +27,6 @@ For Icon only Buttons,
<modus-button color="secondary">Secondary</modus-button>
<modus-button color="tertiary">Tertiary</modus-button>

<modus-button color="danger">Danger</modus-button>
<modus-button disabled color="danger">Disabled</modus-button>

<modus-button size="small" color="primary">Small</modus-button>
<modus-button size="large" color="primary">Large</modus-button>

Expand Down Expand Up @@ -60,9 +55,6 @@ For Icon only Buttons,
<modus-button color="secondary">Secondary</modus-button>
<modus-button color="tertiary">Tertiary</modus-button>

<modus-button color="danger">Danger</modus-button>
<modus-button disabled color="danger">Disabled</modus-button>

<modus-button size="small" color="primary">Small</modus-button>
<modus-button size="large" color="primary">Large</modus-button>

Expand All @@ -84,7 +76,6 @@ For Icon only Buttons,
<modus-button size="small" left-icon="notifications">Primary</modus-button>
<modus-button color="secondary" right-icon="notifications">Secondary</modus-button>
<modus-button size="large" left-icon="notifications" color="tertiary" right-icon="notifications">Tertiary</modus-button>
<modus-button size="large" left-icon="add" color="danger" right-icon="remove">Danger</modus-button>

<Anchor storyId="components-button--icon-only" />

Expand Down Expand Up @@ -112,7 +103,6 @@ For Icon only Buttons,
<modus-button size="small" left-icon="notifications">Primary</modus-button>
<modus-button color="secondary" right-icon="notifications">Secondary</modus-button>
<modus-button size="large" left-icon="notifications" color="tertiary" right-icon="notifications">Tertiary</modus-button>
<modus-button size="large" left-icon="add" color="danger" right-icon="remove">Danger</modus-button>

<!-- Icon only Buttons - Default(Fill) -->
<modus-button size="small" color="primary" icon-only="notifications" aria-label="Notifications"></modus-button>
Expand Down Expand Up @@ -147,21 +137,43 @@ Users can choose to show a caret icon at the right side of the button using `sho
<modus-button color="secondary" button-style="borderless" icon-only="notifications" show-caret="true"></modus-button>
```

### Special Button

Only use in special cases and sparingly within an otherwise blue/gray UI in order to bring more attention to a particular action. It should not be used with primary or danger buttons. It does not support borderless or outline variants.

<modus-button color="special" >Button</modus-button>
<modus-button disabled color="special">Disabled</modus-button>

```html
<modus-button color="special">Button</modus-button> <modus-button disabled color="special">Disabled</modus-button>
```

### Danger Button

The danger color variant is used for alerting or critical actions. It does not support borderless or outline variants.

<modus-button color="danger" >Button</modus-button>
<modus-button disabled color="danger">Disabled</modus-button>

```html
<modus-button color="danger">Button</modus-button> <modus-button disabled color="danger">Disabled</modus-button>
```

### Properties

| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------ | ----------- |
| `ariaDisabled` | `aria-disabled` | (optional) The button's `aria-disabled` state. | `string` | `undefined` |
| `ariaLabel` | `aria-label` | (optional) The button's aria-label. | `string` | `undefined` |
| `buttonStyle` | `button-style` | (optional) The style of the button | `"borderless" , "fill" , "outline"` | `'fill'` |
| `color` | `color` | (optional) The color of the button | `"danger" ,"primary" , "secondary" , "tertiary"` | `'primary'` |
| `disabled` | `disabled` | (optional) Disables the button. | `boolean` | `undefined` |
| `iconOnly` | `icon-only` | (optional) Takes the icon name and renders an icon-only button. | `string` | `undefined` |
| `leftIcon` | `left-icon` | (optional) Takes the icon name and shows the icon aligned to the left of the button text. | `string` | `undefined` |
| `rightIcon` | `right-icon` | (optional) Takes the icon name and shows the icon aligned to the right of the button text. | `string` | `undefined` |
| `showCaret` | `show-caret` | (optional) Shows a caret icon right side of the button. | `boolean` | `undefined` |
| `size` | `size` | (optional) The size of the button. | `"large" ,"medium" , "small"` | `'medium'` |
| `type` | `type` | (optional) The type of the button. | `"button" , "reset" , "submit"` | `'button'` |
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
| `ariaDisabled` | `aria-disabled` | (optional) The button's `aria-disabled` state. | `string` | `undefined` |
| `ariaLabel` | `aria-label` | (optional) The button's aria-label. | `string` | `undefined` |
| `buttonStyle` | `button-style` | (optional) The style of the button | `"borderless", "fill", "outline"` | `'fill'` |
| `color` | `color` | (optional) The color of the button | `"danger", "primary", "secondary", "tertiary", "special"` | `'primary'` |
| `disabled` | `disabled` | (optional) Disables the button. | `boolean` | `undefined` |
| `iconOnly` | `icon-only` | (optional) Takes the icon name and renders an icon-only button. | `string` | `undefined` |
| `leftIcon` | `left-icon` | (optional) Takes the icon name and shows the icon aligned to the left of the button text. | `string` | `undefined` |
| `rightIcon` | `right-icon` | (optional) Takes the icon name and shows the icon aligned to the right of the button text. | `string` | `undefined` |
| `showCaret` | `show-caret` | (optional) Shows a caret icon right side of the button. | `boolean` | `undefined` |
| `size` | `size` | (optional) The size of the button. | `"large", "medium", "small"` | `'medium'` |
| `type` | `type` | (optional) The type of the button. | `"button", "reset", "submit"` | `'button'` |

### DOM Events

Expand Down
Loading