Refactor

yuanqing · Dec 4, 2024 · bc7e40f · bc7e40f
1 parent 13b7be8
commit bc7e40f
Show file tree

Hide file tree

Showing 16 changed files with 90 additions and 69 deletions.
diff --git a/packages/ui/src/components/banner/banner.module.css b/packages/ui/src/components/banner/banner.module.css
@@ -1,5 +1,4 @@
 .banner {
-  position: relative;
   display: flex;
   padding: var(--space-8) var(--space-16) var(--space-8) var(--space-4);
   border-radius: var(--border-radius-6);

diff --git a/packages/ui/src/components/button/button.module.css b/packages/ui/src/components/button/button.module.css
@@ -8,6 +8,11 @@
   display: block;
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .button button {
   position: relative;
   display: inline-block;
@@ -17,10 +22,6 @@
   border-radius: var(--border-radius-6);
 }
 
-.disabled button {
-  cursor: not-allowed;
-}
-
 .fullWidth button {
   display: block;
   overflow: hidden;

diff --git a/packages/ui/src/components/checkbox/checkbox.module.css b/packages/ui/src/components/checkbox/checkbox.module.css
@@ -5,6 +5,11 @@
   gap: var(--space-8);
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .input {
   position: absolute;
   z-index: var(
@@ -16,9 +21,6 @@
   left: calc(-1 * var(--space-8));
   display: block;
 }
-.disabled .input {
-  cursor: not-allowed;
-}
 
 .box {
   position: relative;

diff --git a/packages/ui/src/components/disclosure/disclosure.module.css b/packages/ui/src/components/disclosure/disclosure.module.css
@@ -1,5 +1,6 @@
 .label {
   position: relative;
+  z-index: var(--z-index-1);
 }
 
 .input {

diff --git a/packages/ui/src/components/dropdown/dropdown.module.css b/packages/ui/src/components/dropdown/dropdown.module.css
@@ -4,30 +4,33 @@
   display: flex;
   width: 100%;
   min-width: 0; /* See https://css-tricks.com/flexbox-truncated-text/ */
-  height: 24px;
+  height: var(--space-24);
   align-items: center;
   border: var(--border-width-1) solid var(--figma-color-border);
   border-radius: var(--border-radius-4);
   color: var(--figma-color-text);
 }
+
+.dropdown:not(.disabled):focus-visible {
+  border-color: var(--figma-color-border-selected);
+}
 .dropdown:not(.disabled):focus-within {
   z-index: var(--z-index-2); /* stack `.dropdown` over its sibling elements */
   outline: 0;
 }
 
-.menu {
-  position: fixed;
+.disabled,
+.disabled * {
+  cursor: not-allowed;
 }
 
-.disabled {
-  cursor: not-allowed;
+.menu {
+  position: fixed;
 }
 
 .icon {
-  position: absolute;
-  top: calc(var(--space-4) - var(--border-width-1));
-  left: calc(var(--space-4) - var(--border-width-1));
-  min-width: var(--space-16);
+  flex: 0 0 var(--space-16);
+  padding-left: var(--space-4);
   color: var(--figma-color-icon-secondary);
   pointer-events: none;
   text-align: center;
@@ -42,23 +45,21 @@
   flex-grow: 1;
 }
 
-.value {
+.value,
+.placeholder {
   overflow: hidden;
   padding-left: calc(var(--space-8) - var(--border-width-1));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.disabled .value {
-  color: var(--figma-color-text-disabled);
-}
-.hasIcon .value {
-  padding-left: calc(var(--space-24) - var(--border-width-1));
-}
-
 .placeholder {
   color: var(--figma-color-text-tertiary);
 }
 
+.disabled .value {
+  color: var(--figma-color-text-disabled);
+}
+
 .chevronIcon {
   padding-right: calc(var(--space-8) - var(--border-width-1));
   color: var(--figma-color-icon);

diff --git a/packages/ui/src/components/icon-button/icon-button.module.css b/packages/ui/src/components/icon-button/icon-button.module.css
@@ -6,19 +6,19 @@
   border-radius: var(--border-radius-4);
 }
 
-.iconButton:not(:disabled) {
+.iconButton:not(.disabled) {
   color: var(--figma-color-icon);
 }
-.iconButton:not(:disabled):hover,
-.iconButton:not(:disabled):active {
+.iconButton:not(.disabled):hover,
+.iconButton:not(.disabled):active {
   background-color: var(--figma-color-bg-hover);
 }
-.iconButton:not(:disabled):focus-visible {
+.iconButton:not(.disabled):focus-visible {
   border-color: var(--figma-color-border-selected);
 }
 
-.iconButton:disabled {
-  color: var(--figma-color-icon-disabled);
+.disabled,
+.disabled * {
   cursor: not-allowed;
 }
 
@@ -28,3 +28,6 @@
   left: 50%;
   transform: translate(-50%, -50%);
 }
+.disabled .icon {
+  color: var(--figma-color-icon-disabled);
+}
diff --git a/packages/ui/src/components/icon-button/icon-button.tsx b/packages/ui/src/components/icon-button/icon-button.tsx
@@ -3,6 +3,7 @@ import { useCallback } from 'preact/hooks'
 
 import { Event, EventHandler } from '../../types/event-handler.js'
 import { FocusableComponentProps } from '../../types/focusable-component-props.js'
+import { createClassName } from '../../utilities/create-class-name.js'
 import { createComponent } from '../../utilities/create-component.js'
 import { noop } from '../../utilities/no-op.js'
 import styles from './icon-button.module.css'
@@ -43,7 +44,10 @@ export const IconButton = createComponent<HTMLButtonElement, IconButtonProps>(
       <button
         {...rest}
         ref={ref}
-        class={styles.iconButton}
+        class={createClassName([
+          styles.iconButton,
+          disabled === true ? styles.disabled : null
+        ])}
         disabled={disabled === true}
         onClick={onClick}
         onKeyDown={handleKeyDown}

diff --git a/packages/ui/src/components/icon-toggle-button/icon-toggle-button.module.css b/packages/ui/src/components/icon-toggle-button/icon-toggle-button.module.css
@@ -4,6 +4,11 @@
   height: var(--space-24);
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .input {
   position: absolute;
   z-index: var(--z-index-1); /* stack above .icon */
@@ -14,9 +19,6 @@
   display: block;
   width: 100%;
 }
-.disabled .input {
-  cursor: not-allowed;
-}
 
 .box {
   position: relative;

diff --git a/packages/ui/src/components/layer/layer.module.css b/packages/ui/src/components/layer/layer.module.css
@@ -3,6 +3,11 @@
   z-index: var(--z-index-1);
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .input {
   position: absolute;
   top: 0;
@@ -15,9 +20,6 @@
   z-index: var(--z-index-1); /* stack `.input` on top of everything else */
   display: block;
 }
-.disabled .input {
-  cursor: not-allowed;
-}
 
 .box {
   display: flex;

diff --git a/packages/ui/src/components/range-slider/range-slider.module.css b/packages/ui/src/components/range-slider/range-slider.module.css
@@ -4,6 +4,11 @@
   height: var(--space-16);
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .input {
   position: relative;
   z-index: var(
@@ -19,7 +24,6 @@
   --progress-track-color: var(--figma-color-bg-brand);
 }
 .disabled .input {
-  cursor: not-allowed;
   --progress-track-color: var(--figma-color-bg-disabled);
 }
 

diff --git a/packages/ui/src/components/selectable-item/selectable-item.module.css b/packages/ui/src/components/selectable-item/selectable-item.module.css
@@ -4,6 +4,11 @@
   padding: var(--space-4) var(--space-12);
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .input {
   position: absolute;
   top: 0;
@@ -16,9 +21,6 @@
   z-index: var(--z-index-1); /* stack `.input` on top of everything else */
   display: block;
 }
-.disabled .input {
-  cursor: not-allowed;
-}
 
 .box {
   display: flex;

diff --git a/packages/ui/src/components/textbox/textbox-color/textbox-color.module.css b/packages/ui/src/components/textbox/textbox-color/textbox-color.module.css
@@ -13,6 +13,11 @@
   ); /* Stack `.textboxColor` over its sibling elements */
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .fullWidth {
   width: 100%;
 }
@@ -44,9 +49,6 @@
   opacity: 0;
   transform: translate(0, -50%);
 }
-.disabled .hexColorSelector {
-  cursor: not-allowed;
-}
 
 .input {
   display: block;
@@ -55,10 +57,6 @@
   background-color: transparent;
   color: var(--figma-color-text);
 }
-.disabled .input {
-  color: var(--figma-color-text-disabled);
-  cursor: not-allowed;
-}
 
 .input::placeholder {
   color: var(--figma-color-text-tertiary);

diff --git a/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.module.css b/packages/ui/src/components/textbox/textbox-multiline/textbox-multiline.module.css
@@ -3,6 +3,11 @@
   z-index: var(--z-index-1);
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .grow {
   display: grid;
 }
@@ -35,7 +40,6 @@
   border-color: var(--figma-color-border-disabled);
   background-color: transparent;
   color: var(--figma-color-text-disabled);
-  cursor: not-allowed;
 }
 .grow .textarea {
   overflow: hidden;

diff --git a/packages/ui/src/components/textbox/textbox/textbox.module.css b/packages/ui/src/components/textbox/textbox/textbox.module.css
@@ -2,10 +2,16 @@
   position: relative;
   z-index: var(--z-index-1);
 }
+
 .textbox:focus-within {
   z-index: var(--z-index-2); /* Stack `.textbox` over its sibling elements */
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .input {
   display: block;
   width: 100%;
@@ -26,7 +32,6 @@
   border-color: var(--figma-color-border-disabled);
   background-color: transparent;
   color: var(--figma-color-text-disabled);
-  cursor: not-allowed;
 }
 .hasIcon .input {
   padding-left: calc(var(--space-24) - var(--border-width-1));

diff --git a/packages/ui/src/components/toggle/toggle.module.css b/packages/ui/src/components/toggle/toggle.module.css
@@ -5,6 +5,11 @@
   gap: var(--space-8);
 }
 
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
 .input {
   position: absolute;
   z-index: var(
@@ -16,9 +21,6 @@
   left: calc(-1 * var(--space-8));
   display: block;
 }
-.disabled .input {
-  cursor: not-allowed;
-}
 
 .box {
   position: relative;