Skip to content

Commit

Permalink
feat(ld-button): add danger-secondary mode
Browse files Browse the repository at this point in the history
  • Loading branch information
borisdiakur authored and renet committed Jul 27, 2022
1 parent b6a84ee commit edc52ae
Show file tree
Hide file tree
Showing 221 changed files with 1,293 additions and 338 deletions.
1,490 changes: 1,161 additions & 329 deletions screenshot/builds/master.json

Large diffs are not rendered by default.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
83 changes: 77 additions & 6 deletions src/liquid/components/ld-button/ld-button.css
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,6 @@
}
}

/* TODO: check if this is necessary or can be removed / moved to ld-icon.css */
::slotted(ld-icon),
:where(ld-icon) {
line-height: 0;
}

::slotted(ld-icon),
::slotted(.ld-icon),
> ld-icon,
Expand Down Expand Up @@ -452,6 +446,7 @@
--ld-button-danger-bg-color-focus,
var(--ld-thm-error-focus)
);
color: var(--ld-button-danger-color-focus, var(--ld-thm-error-active));

.ld-button__progress::after {
background-color: var(
Expand Down Expand Up @@ -493,3 +488,79 @@
}
}
}

.ld-button--danger-secondary {
background-color: var(
--ld-button-danger-secondary-bg-color,
var(--ld-col-wht)
);
color: var(--ld-button-danger-secondary-text-color, var(--ld-thm-error));

&:not(.ld-button--brand-color) {
box-shadow: inset 0px 0px 0px 2px;
}

.ld-button__progress::after {
background-color: var(
--ld-button-danger-secondary-progress-color,
var(--ld-thm-error)
);
}

&:where(:not(:disabled):not([aria-disabled='true'])) {
&:where(:focus:focus-visible) {
background-color: var(
--ld-button-danger-secondary-bg-color-focus,
var(--ld-col-wht)
);
color: var(
--ld-button-danger-secondary-color-focus,
var(--ld-thm-error-focus)
);

.ld-button__progress::after {
background-color: var(
--ld-button-danger-secondary-progress-color,
var(--ld-thm-error-focus)
);
}
}
@media (hover: hover) {
&:where(:hover) {
background-color: var(
--ld-button-danger-secondary-bg-color-hover,
var(--ld-col-wht)
);
color: var(
--ld-button-danger-secondary-text-color-hover,
var(--ld-thm-error-hover)
);

.ld-button__progress::after {
background-color: var(
--ld-button-danger-secondary-progress-color,
var(--ld-thm-error-hover)
);
}
}
}
&:where(:active),
&:where(:active:focus-visible) {
background-color: var(
--ld-button-danger-secondary-bg-color-active,
var(--ld-col-wht)
);
color: var(
--ld-button-danger-secondary-text-color-active,
var(--ld-thm-error-active)
);

.ld-button__progress::after {
background-color: var(
--ld-button-danger-secondary-progress-color,
var(--ld-thm-error-active)
);
}
}
}
}
7 changes: 6 additions & 1 deletion src/liquid/components/ld-button/ld-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,12 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
@Prop() ldTabindex: number | undefined

/** Display mode. */
@Prop() mode?: 'highlight' | 'secondary' | 'ghost' | 'danger'
@Prop() mode?:
| 'highlight'
| 'secondary'
| 'ghost'
| 'danger'
| 'danger-secondary'

/** Used to specify the name of the control. */
@Prop() name?: string
Expand Down
23 changes: 22 additions & 1 deletion src/liquid/components/ld-button/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,20 @@ Although `aria-disabled="true"` is not necessary on a `button` element (or any o
<button class="ld-button ld-button--danger" disabled>Text</button>
{% endexample %}

### Danger secondary

{% example %}
<ld-button mode="danger-secondary">Text</ld-button>

<ld-button mode="danger-secondary" disabled>Text</ld-button>

<!-- CSS component -->

<button class="ld-button ld-button--danger-secondary">Text</button>

<button class="ld-button ld-button--danger-secondary" disabled>Text</button>
{% endexample %}

### Size

{% example %}
Expand Down Expand Up @@ -451,6 +465,8 @@ You can align the text inside the button using the `align-text` propperty.

<ld-button progress="pending" mode="secondary">Text</ld-button>

<ld-button progress="pending" mode="danger-secondary">Text</ld-button>

<ld-button progress="pending" mode="ghost">Text</ld-button>

<!-- CSS component -->
Expand Down Expand Up @@ -480,6 +496,11 @@ You can align the text inside the button using the `align-text` propperty.
<span class="ld-button__progress ld-button__progress--pending"></span>
</button>

<button class="ld-button ld-button--danger-secondary" aria-busy="true" aria-live="polite">
Text
<span class="ld-button__progress ld-button__progress--pending"></span>
</button>

<button class="ld-button ld-button--ghost" aria-busy="true" aria-live="polite">
Text
<span class="ld-button__progress ld-button__progress--pending"></span>
Expand Down Expand Up @@ -507,7 +528,7 @@ You can align the text inside the button using the `align-text` propperty.
| `justifyContent` | `justify-content` | Justify content. | `"between" \| "end" \| "start"` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `ldTabindex` | `ld-tabindex` | Tab index of the button. | `number` | `undefined` |
| `mode` | `mode` | Display mode. | `"danger" \| "ghost" \| "highlight" \| "secondary"` | `undefined` |
| `mode` | `mode` | Display mode. | `"danger" \| "danger-secondary" \| "ghost" \| "highlight" \| "secondary"` | `undefined` |
| `name` | `name` | Used to specify the name of the control. | `string` | `undefined` |
| `progress` | `progress` | Displays a progress bar at the bottom of the button. | `"pending" \| number` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,17 @@ exports[`ld-button danger 1`] = `
</ld-button>
`;

exports[`ld-button danger-secondary 1`] = `
<ld-button mode="danger-secondary">
<mock:shadow-root>
<button aria-live="polite" class="ld-button ld-button--danger-secondary" part="button focusable">
<slot></slot>
</button>
</mock:shadow-root>
Text
</ld-button>
`;

exports[`ld-button disabled 1`] = `
<ld-button disabled="">
<mock:shadow-root>
Expand Down
9 changes: 8 additions & 1 deletion src/liquid/components/ld-button/test/ld-button.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,14 @@ import {
import { LdIcon } from '../../ld-icon/ld-icon'
import { LdButton } from '../ld-button'

const modes = ['', 'highlight', 'secondary', 'ghost', 'danger']
const modes = [
'',
'highlight',
'secondary',
'ghost',
'danger',
'danger-secondary',
]
const attributes = ['', 'brand-color']

const cssIconComponent = `
Expand Down
8 changes: 8 additions & 0 deletions src/liquid/components/ld-button/test/ld-button.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,14 @@ describe('ld-button', () => {
expect(page.root).toMatchSnapshot()
})

it('danger-secondary', async () => {
const page = await newSpecPage({
components: [LdButton],
html: `<ld-button mode="danger-secondary">Text</ld-button>`,
})
expect(page.root).toMatchSnapshot()
})

it('icon only', async () => {
const page = await newSpecPage({
components: [LdButton],
Expand Down

0 comments on commit edc52ae

Please sign in to comment.