@ably/ui 14.1.0-dev.f3a3c90 → 14.1.1-dev.7e7c662

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.
Files changed (6) hide show
  1. package/core/styles/dropdowns.css +45 -0
  2. package/core/styles/forms.css +0 -32
  3. package/core/styles.components.css +1 -0
  4. package/package.json +2 -2
  5. package/tailwind.config.js +1 -1
  6. package/tailwind.extend.js +7 -12
package/core/styles/dropdowns.css ADDED
@@ -0,0 +1,45 @@
1
+ @layer components {
2
+ .ui-dropdown-base {
3
+ @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 text-p2 flex font-medium bg-transparent;
4
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
5
+ background-repeat: no-repeat;
6
+ background-position: center right 16px;
7
+ }
8
+
9
+ .ui-dropdown-base option:disabled {
10
+ @apply text-neutral-800;
11
+ }
12
+
13
+ .ui-dropdown {
14
+ @apply ui-dropdown-base py-12;
15
+ }
16
+
17
+ .ui-dropdown-small {
18
+ @apply ui-dropdown-base py-[10px] text-[14px];
19
+ }
20
+
21
+ /* Special wrapper styles for overriding default Select2 functionality */
22
+ .ui-dropdown-select2-wrapper .select2 {
23
+ @apply !w-full;
24
+ }
25
+
26
+ .ui-dropdown-select2-wrapper .select2-selection {
27
+ @apply ui-dropdown-small;
28
+ }
29
+
30
+ .ui-dropdown-select2-wrapper .select2-selection--single {
31
+ @apply !h-auto;
32
+ }
33
+
34
+ .ui-dropdown-select2-wrapper .select2-selection__rendered {
35
+ @apply !leading-relaxed !px-0;
36
+ }
37
+
38
+ .ui-dropdown-select2-wrapper .select2-selection__arrow {
39
+ @apply hidden;
40
+ }
41
+
42
+ .ui-dropdown-dark {
43
+ @apply text-white;
44
+ }
45
+ }
package/core/styles/forms.css CHANGED
@@ -61,36 +61,4 @@
61
61
  /* color: var(--text-dark-grey); */
62
62
  color: #76767c;
63
63
  }
64
-
65
- .ui-dropdown-base {
66
- @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 text-p2 flex;
67
- background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
68
- background-repeat: no-repeat;
69
- background-position: center right 16px;
70
- }
71
-
72
- .ui-dropdown-base option:disabled {
73
- @apply text-neutral-800;
74
- }
75
-
76
- .ui-dropdown {
77
- @apply ui-dropdown-base py-12;
78
- }
79
-
80
- .ui-dropdown-small {
81
- @apply ui-dropdown-base py-[10px] text-[14px];
82
- }
83
-
84
- /* Special wrapper styles for overriding default Select2 functionality */
85
- .ui-dropdown-select2-wrapper .select2 {
86
- @apply w-full;
87
- }
88
-
89
- .ui-dropdown-select2-wrapper .select2-selection {
90
- @apply ui-dropdown-small;
91
- }
92
-
93
- .ui-dropdown-select2-wrapper .select2-selection__arrow {
94
- @apply hidden;
95
- }
96
64
  }
package/core/styles.components.css CHANGED
@@ -3,6 +3,7 @@
3
3
  @import "./styles/text.css";
4
4
  @import "./styles/forms.css";
5
5
  @import "./styles/toggles.css";
6
+ @import "./styles/dropdowns.css";
6
7
 
7
8
  @layer components {
8
9
  .ui-input {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "14.1.0-dev.f3a3c90",
3
+ "version": "14.1.1-dev.7e7c662",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -24,7 +24,7 @@
24
24
  "@storybook/test": "^8.1.7",
25
25
  "@swc/cli": "^0.3.10",
26
26
  "@swc/core": "^1.4.11",
27
- "@typescript-eslint/eslint-plugin": "^6.21.0",
27
+ "@typescript-eslint/eslint-plugin": "^7.0.0",
28
28
  "@typescript-eslint/parser": "^6.21.0",
29
29
  "@vitejs/plugin-react": "^4.2.1",
30
30
  "autoprefixer": "^10.0.2",
package/tailwind.config.js CHANGED
@@ -1,5 +1,5 @@
1
1
  module.exports = {
2
- content: ["./src/**/*.{js,json,css,ts,tsx,mdx}"],
2
+ content: ["./src/**/*.{js,ts,tsx,mdx}"],
3
3
  safelist: [
4
4
  "w-1/2",
5
5
  "w-1/3",
package/tailwind.extend.js CHANGED
@@ -3,22 +3,17 @@ const path = require("path");
3
3
 
4
4
  const ablyUiConfigPath = path.dirname(require.resolve("./tailwind.config.js"));
5
5
 
6
- const ablyUItailwindConfig = (extend) => {
7
- // Create absolute paths to templates in AblyUI
8
- const addPurgeContentPaths = () => {
9
- const paths = ["*.html.erb", "*", "*.js", "*.json"].map((fileGlob) =>
10
- path.join(ablyUiConfigPath, "src", "**", fileGlob),
11
- );
12
-
13
- return paths;
14
- };
15
-
6
+ const ablyUITailwindConfig = (extend) => {
7
+ // Create absolute paths to built assets (core, reset) in AblyUI, set as content source
16
8
  const configWithPlugin = {
17
9
  ...ablyUIConfig,
18
- content: addPurgeContentPaths(),
10
+ content: [
11
+ path.join(ablyUiConfigPath, "core", "**", "*.js"),
12
+ path.join(ablyUiConfigPath, "reset", "**", "*.js"),
13
+ ],
19
14
  };
20
15
 
21
16
  return extend(configWithPlugin);
22
17
  };
23
18
 
24
- module.exports = ablyUItailwindConfig;
19
+ module.exports = ablyUITailwindConfig;