@justeattakeaway/pie-icon-button 0.18.0 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -65
- package/dist/index.d.ts +1 -1
- package/dist/index.js +47 -39
- package/dist/react.d.ts +1 -1
- package/package.json +2 -2
- package/src/defs.ts +2 -1
- package/src/iconButton.scss +51 -42
package/README.md
CHANGED
|
@@ -14,15 +14,12 @@
|
|
|
14
14
|
2. [Installation](#installation)
|
|
15
15
|
3. [Importing the component](#importing-the-component)
|
|
16
16
|
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [
|
|
18
|
-
6. [
|
|
19
|
-
7. [Events](#events)
|
|
17
|
+
5. [Props](#props)
|
|
18
|
+
6. [Events](#events)
|
|
20
19
|
- [HTML example](#html)
|
|
21
20
|
- [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
|
|
22
21
|
- [React example (using Next 13)](#react-templates-using-next-13)
|
|
23
|
-
|
|
24
|
-
- [Browser Tests](#browser-tests)
|
|
25
|
-
- [Visual Tests](#visual-tests)
|
|
22
|
+
7. [Contributing](#contributing)
|
|
26
23
|
|
|
27
24
|
|
|
28
25
|
## `pie-icon-button`
|
|
@@ -65,32 +62,6 @@ import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
|
|
|
65
62
|
> [!IMPORTANT]
|
|
66
63
|
> When using `pie-icon-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
|
|
67
64
|
|
|
68
|
-
|
|
69
|
-
## Local development
|
|
70
|
-
|
|
71
|
-
Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
|
|
72
|
-
|
|
73
|
-
```bash
|
|
74
|
-
yarn
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
To build the `pie-icon-button` package, run the following command:
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
yarn build --filter=pie-icon-button
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
```bash
|
|
87
|
-
yarn watch --filter=pie-icon-button
|
|
88
|
-
|
|
89
|
-
# in a separate terminal tab, run
|
|
90
|
-
yarn dev --filter=pie-storybook
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
|
|
94
65
|
## Importing Icons
|
|
95
66
|
|
|
96
67
|
We recommend using the `pie-icon-button` component alongside the `pie-icons-webc` package. This package contains all of the PIE iconset as importable web components and are built to work alongside our other PIE components.
|
|
@@ -164,37 +135,6 @@ For example, to add a click handler in various templates:
|
|
|
164
135
|
|
|
165
136
|
```
|
|
166
137
|
|
|
138
|
+
## Contributing
|
|
167
139
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
### Browser tests
|
|
171
|
-
|
|
172
|
-
To run the browser tests, run the following command from the root of the monorepo:
|
|
173
|
-
|
|
174
|
-
```bash
|
|
175
|
-
yarn test:browsers --filter=pie-icon-button
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
### Visual tests
|
|
179
|
-
|
|
180
|
-
To run the visual regression tests, run the following command from the root of the monorepo:
|
|
181
|
-
|
|
182
|
-
```bash
|
|
183
|
-
yarn test:visual --filter=pie-icon-button
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
|
|
187
|
-
|
|
188
|
-
#### Setup via bash
|
|
189
|
-
|
|
190
|
-
```bash
|
|
191
|
-
export PERCY_TOKEN_PIE_ICON_BUTTON=abcde
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
#### Setup via package.json
|
|
195
|
-
|
|
196
|
-
Under scripts `test:visual` replace the environment variable with the below:
|
|
197
|
-
|
|
198
|
-
```bash
|
|
199
|
-
PERCY_TOKEN_PIE_ICON_BUTTON=abcde
|
|
200
|
-
```
|
|
140
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
package/dist/index.d.ts
CHANGED
|
@@ -33,6 +33,6 @@ export declare class PieIconButton extends LitElement implements IconButtonProps
|
|
|
33
33
|
|
|
34
34
|
export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
|
|
35
35
|
|
|
36
|
-
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
|
|
36
|
+
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse"];
|
|
37
37
|
|
|
38
38
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,67 +1,75 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
3
|
-
const b = (
|
|
4
|
-
const
|
|
5
|
-
Object.defineProperty(
|
|
1
|
+
import { unsafeCSS as f, LitElement as m, html as u } from "lit";
|
|
2
|
+
import { property as v } from "lit/decorators.js";
|
|
3
|
+
const b = (r, o, a) => function(t, e) {
|
|
4
|
+
const c = `#${e}`;
|
|
5
|
+
Object.defineProperty(t, e, {
|
|
6
6
|
get() {
|
|
7
|
-
return this[
|
|
7
|
+
return this[c];
|
|
8
8
|
},
|
|
9
9
|
set(l) {
|
|
10
|
-
const
|
|
11
|
-
o.includes(l) ? this[
|
|
12
|
-
`<${
|
|
10
|
+
const h = this[c];
|
|
11
|
+
o.includes(l) ? this[c] = l : (console.error(
|
|
12
|
+
`<${r}> Invalid value "${l}" provided for property "${e}".`,
|
|
13
13
|
`Must be one of: ${o.join(" | ")}.`,
|
|
14
|
-
`Falling back to default value: "${
|
|
15
|
-
), this[
|
|
14
|
+
`Falling back to default value: "${a}"`
|
|
15
|
+
), this[c] = a), this.requestUpdate(e, h);
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
18
|
};
|
|
19
|
-
function g(
|
|
20
|
-
customElements.get(
|
|
19
|
+
function g(r, o) {
|
|
20
|
+
customElements.get(r) ? console.warn(`PIE Web Component: "${r}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(r, o);
|
|
21
21
|
}
|
|
22
|
-
const
|
|
23
|
-
`, y = ["xsmall", "small", "medium", "large"],
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
22
|
+
const p = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);block-size:var(--btn-dimension);inline-size:var(--btn-dimension);border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn[variant=primary]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn[variant=secondary]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-iconBtn[variant=outline]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--hover-modifier)));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=outline]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--active-modifier)));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--hover-modifier)));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--active-modifier)));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--hover-modifier)));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-secondary]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), calc(var(--dt-color-black-l) + var(--active-modifier)));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn[variant=inverse]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-iconBtn[variant=ghost-inverse]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn[variant=ghost-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--hover-modifier)));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn[variant=ghost-inverse]:active:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + var(--active-modifier)));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not([variant=ghost],[variant=ghost-secondary],[variant=ghost-inverse]){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
|
|
23
|
+
`, y = ["xsmall", "small", "medium", "large"], k = [
|
|
24
|
+
"primary",
|
|
25
|
+
"secondary",
|
|
26
|
+
"outline",
|
|
27
|
+
"ghost",
|
|
28
|
+
"ghost-secondary",
|
|
29
|
+
"inverse",
|
|
30
|
+
"ghost-inverse"
|
|
31
|
+
];
|
|
32
|
+
var B = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (r, o, a, i) => {
|
|
33
|
+
for (var t = i > 1 ? void 0 : i ? x(o, a) : o, e = r.length - 1, c; e >= 0; e--)
|
|
34
|
+
(c = r[e]) && (t = (i ? c(o, a, t) : c(t)) || t);
|
|
35
|
+
return i && t && B(o, a, t), t;
|
|
28
36
|
};
|
|
29
|
-
const
|
|
30
|
-
class
|
|
37
|
+
const s = "pie-icon-button";
|
|
38
|
+
class n extends m {
|
|
31
39
|
constructor() {
|
|
32
40
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
|
|
33
41
|
}
|
|
34
42
|
render() {
|
|
35
43
|
const {
|
|
36
44
|
disabled: o,
|
|
37
|
-
size:
|
|
45
|
+
size: a,
|
|
38
46
|
variant: i
|
|
39
47
|
} = this;
|
|
40
|
-
return
|
|
48
|
+
return u`
|
|
41
49
|
<button
|
|
42
50
|
class="o-iconBtn"
|
|
43
|
-
size=${
|
|
51
|
+
size=${a}
|
|
44
52
|
variant=${i}
|
|
45
53
|
?disabled=${o}>
|
|
46
54
|
<slot></slot>
|
|
47
55
|
</button>`;
|
|
48
56
|
}
|
|
49
57
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
b(
|
|
54
|
-
],
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
b(
|
|
58
|
-
],
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
],
|
|
62
|
-
g(
|
|
58
|
+
n.styles = f(p);
|
|
59
|
+
d([
|
|
60
|
+
v(),
|
|
61
|
+
b(s, y, "medium")
|
|
62
|
+
], n.prototype, "size", 2);
|
|
63
|
+
d([
|
|
64
|
+
v(),
|
|
65
|
+
b(s, k, "primary")
|
|
66
|
+
], n.prototype, "variant", 2);
|
|
67
|
+
d([
|
|
68
|
+
v({ type: Boolean })
|
|
69
|
+
], n.prototype, "disabled", 2);
|
|
70
|
+
g(s, n);
|
|
63
71
|
export {
|
|
64
|
-
|
|
72
|
+
n as PieIconButton,
|
|
65
73
|
y as sizes,
|
|
66
|
-
|
|
74
|
+
k as variants
|
|
67
75
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -36,6 +36,6 @@ declare class PieIconButton_2 extends LitElement implements IconButtonProps {
|
|
|
36
36
|
|
|
37
37
|
export declare const sizes: readonly ["xsmall", "small", "medium", "large"];
|
|
38
38
|
|
|
39
|
-
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
|
|
39
|
+
export declare const variants: readonly ["primary", "secondary", "outline", "ghost", "ghost-secondary", "inverse", "ghost-inverse"];
|
|
40
40
|
|
|
41
41
|
export { }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.20.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@justeattakeaway/pie-icons-webc": "0.11.
|
|
29
|
+
"@justeattakeaway/pie-icons-webc": "0.11.1",
|
|
30
30
|
"@justeattakeaway/pie-webc-core": "0.11.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
package/src/defs.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export const sizes = ['xsmall', 'small', 'medium', 'large'] as const;
|
|
2
|
-
export const variants = ['primary', 'secondary', 'outline', 'ghost',
|
|
2
|
+
export const variants = ['primary', 'secondary', 'outline', 'ghost',
|
|
3
|
+
'ghost-secondary', 'inverse', 'ghost-inverse'] as const;
|
|
3
4
|
|
|
4
5
|
export interface IconButtonProps {
|
|
5
6
|
/**
|
package/src/iconButton.scss
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
2
|
|
|
3
|
-
@mixin button-interactive-states($bg-color) {
|
|
3
|
+
@mixin button-interactive-states($bg-color, $mode: 'default') {
|
|
4
4
|
&:hover:not(:disabled) {
|
|
5
|
-
|
|
5
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
6
|
+
--btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
|
|
7
|
+
|
|
8
|
+
// for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
|
|
9
|
+
@if $mode == 'transparent' {
|
|
10
|
+
--hover-modifier: var(--dt-color-hover-01);
|
|
11
|
+
--btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
|
|
12
|
+
}
|
|
6
13
|
}
|
|
7
14
|
|
|
8
15
|
&:active:not(:disabled) {
|
|
9
|
-
|
|
16
|
+
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
17
|
+
--btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
|
|
18
|
+
|
|
19
|
+
@if $mode == 'transparent' {
|
|
20
|
+
--active-modifier: var(--dt-color-active-01);
|
|
21
|
+
--btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
|
|
22
|
+
}
|
|
10
23
|
}
|
|
11
24
|
}
|
|
12
25
|
|
|
@@ -22,27 +35,20 @@
|
|
|
22
35
|
// Base button styles
|
|
23
36
|
.o-iconBtn {
|
|
24
37
|
--btn-border-radius: var(--dt-radius-rounded-e);
|
|
25
|
-
|
|
26
|
-
// The following values set to default background and color
|
|
27
|
-
// currently this sets the primary button styles
|
|
28
38
|
--btn-bg-color: var(--dt-color-interactive-brand);
|
|
29
39
|
--btn-icon-fill: var(--dt-color-content-interactive-primary);
|
|
30
|
-
--btn-focus: var(--dt-color-focus-outer);
|
|
31
|
-
|
|
32
|
-
min-block-size: var(--btn-dimension);
|
|
33
|
-
aspect-ratio: 1 / 1;
|
|
34
40
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
}
|
|
41
|
+
block-size: var(--btn-dimension);
|
|
42
|
+
inline-size: var(--btn-dimension);
|
|
38
43
|
|
|
39
|
-
border:
|
|
44
|
+
border-color: var(--btn-border-color);
|
|
40
45
|
border-radius: var(--btn-border-radius);
|
|
41
|
-
outline: none;
|
|
42
46
|
background-color: var(--btn-bg-color);
|
|
43
47
|
color: var(--btn-icon-fill);
|
|
44
48
|
cursor: pointer;
|
|
45
49
|
user-select: none;
|
|
50
|
+
outline: none;
|
|
51
|
+
border: none;
|
|
46
52
|
|
|
47
53
|
display: flex;
|
|
48
54
|
align-items: center;
|
|
@@ -58,6 +64,8 @@
|
|
|
58
64
|
}
|
|
59
65
|
|
|
60
66
|
&[variant='primary'] {
|
|
67
|
+
/* Same as default styles */
|
|
68
|
+
|
|
61
69
|
@include button-interactive-states('--dt-color-interactive-brand');
|
|
62
70
|
}
|
|
63
71
|
|
|
@@ -69,54 +77,55 @@
|
|
|
69
77
|
}
|
|
70
78
|
|
|
71
79
|
&[variant='outline'] {
|
|
72
|
-
--btn-bg-color:
|
|
80
|
+
--btn-bg-color: transparent;
|
|
73
81
|
--btn-icon-fill: var(--dt-color-content-interactive-brand);
|
|
74
82
|
|
|
75
|
-
|
|
76
|
-
border: 1px solid var(--dt-color-border-strong);
|
|
77
|
-
}
|
|
83
|
+
border: 1px solid var(--dt-color-border-strong);
|
|
78
84
|
|
|
79
|
-
@include button-interactive-states('--dt-color-
|
|
85
|
+
@include button-interactive-states('--dt-color-black', 'transparent');
|
|
80
86
|
}
|
|
81
87
|
|
|
82
88
|
&[variant='ghost'] {
|
|
83
|
-
--btn-bg-color:
|
|
89
|
+
--btn-bg-color: transparent;
|
|
84
90
|
--btn-icon-fill: var(--dt-color-content-interactive-brand);
|
|
85
91
|
|
|
86
|
-
@include button-interactive-states('--dt-color-
|
|
92
|
+
@include button-interactive-states('--dt-color-black', 'transparent');
|
|
87
93
|
}
|
|
88
94
|
|
|
89
95
|
&[variant='ghost-secondary'] {
|
|
90
|
-
--btn-bg-color:
|
|
96
|
+
--btn-bg-color: transparent;
|
|
91
97
|
--btn-icon-fill: var(--dt-color-content-interactive-secondary);
|
|
92
98
|
|
|
93
|
-
@include button-interactive-states('--dt-color-
|
|
99
|
+
@include button-interactive-states('--dt-color-black', 'transparent');
|
|
94
100
|
}
|
|
95
101
|
|
|
96
|
-
&[
|
|
97
|
-
--btn-bg-color: var(--dt-color-
|
|
98
|
-
--btn-icon-fill: var(--dt-color-content-
|
|
102
|
+
&[variant='inverse'] {
|
|
103
|
+
--btn-bg-color: var(--dt-color-interactive-inverse);
|
|
104
|
+
--btn-icon-fill: var(--dt-color-content-interactive-brand);
|
|
99
105
|
|
|
100
|
-
|
|
101
|
-
border: 1px solid var(--dt-color-disabled-01);
|
|
102
|
-
cursor: not-allowed;
|
|
103
|
-
}
|
|
106
|
+
@include button-interactive-states('--dt-color-interactive-inverse');
|
|
104
107
|
}
|
|
105
108
|
|
|
106
|
-
&[
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
109
|
+
&[variant='ghost-inverse'] {
|
|
110
|
+
--btn-bg-color: transparent;
|
|
111
|
+
--btn-icon-fill: var(--dt-color-content-inverse);
|
|
112
|
+
|
|
113
|
+
@include button-interactive-states('--dt-color-container-default', 'transparent');
|
|
110
114
|
}
|
|
111
115
|
|
|
112
|
-
&[disabled]
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
+
&[disabled] {
|
|
117
|
+
--btn-icon-fill: var(--dt-color-content-disabled);
|
|
118
|
+
|
|
119
|
+
cursor: not-allowed;
|
|
120
|
+
|
|
121
|
+
// For every variant (except ghost variants) set the disabled background color
|
|
122
|
+
&:not([variant='ghost'], [variant='ghost-secondary'], [variant='ghost-inverse']) {
|
|
123
|
+
--btn-bg-color: var(--dt-color-disabled-01);
|
|
124
|
+
}
|
|
116
125
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
border:
|
|
126
|
+
// For outline variants, set the border to the disabled color
|
|
127
|
+
&[variant='outline'] {
|
|
128
|
+
border-color: var(--dt-color-disabled-01);
|
|
120
129
|
}
|
|
121
130
|
}
|
|
122
131
|
|