- {icon &&
{icon}
}
+
+ {leftIcon && (
+
+ {leftIcon}
+
+ )}
+
{children}
- {action && (
- <>
-
-
-
- )}
+ {rightIcon &&
{rightIcon}
}
);
};
export const Chip = styled(ChipBase)`
- --woly-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
- --woly-horizontal: calc(
- var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--woly-vertical)
- );
- --woly-line-height: 24px;
-
- position: relative;
+ ${box}
+ --local-background: var(--woly-shape-default);
+ --local-icon-size: var(--woly-line-height);
+ --local-color: var(--woly-shape-text-default);
+ --local-border-color: var(--woly-shape-default);
box-sizing: border-box;
-
display: flex;
align-items: center;
-
- background-color: var(--woly-background, #b0a3f4);
- color: var(--woly-color, #ffffff);
-
- border-radius: var(--woly-rounding, 3px);
-
- [role] {
- width: 100%;
-
- display: flex;
- align-items: center;
- justify-content: center;
-
- font-size: var(--woly-font-size, 12px);
- line-height: var(--woly-line-height, 20px);
-
- border-radius: var(--woly-rounding, 3px);
-
- padding: 0 var(--woly-horizontal, 6px);
-
+ background-color: var(--local-background);
+ color: var(--local-color);
+ border-radius: var(--woly-rounding);
+ font-size: var(--woly-font-size);
+ outline: none;
+ border: var(--woly-border-width) solid var(--local-border-color);
+
+ [data-text] {
outline: none;
+ line-height: var(--woly-line-height);
}
- [role='button']:active {
- color: var(--woly-color-focus, #ffffff);
- background-color: var(--woly-background-focus, #9381f1);
- border-color: var(--woly-border-focus, transparent);
- }
+ &[role='button']:focus-within {
+ --local-background: var(--woly-focus);
+ --local-border-color: var(--woly-shape-active);
- [role='button']:focus {
- box-shadow: 0 0 0 var(--woly-border-width) var(--woly-border-focus, #9381f1);
+ box-shadow: 0 0 0 var(--woly-border-width) var(--woly-shape-default);
}
- [role='button']:hover {
- color: var(--woly-color-hover, #ffffff);
- background-color: var(--woly-background-hover, #9381f1);
- opacity: 0.5;
- border-color: var(--woly-border-hover, transparent);
- outline: none;
+ &[role='button']:hover {
+ --local-background: var(--woly-shape-hover);
+ --local-border-color: var(--woly-shape-hover);
}
&[data-disabled='true'] {
- color: var(--woly-color-disabled, #c0c0c0);
- background: var(--woly-background-disabled, #f5f5f5);
- border-color: var(--woly-background-disabled, transparent);
- pointer-events: none;
+ --local-background: var(--woly-shape-disabled);
+ --local-text: var(--woly-shape-text-disabled);
+ --local-border-color: var(--woly-shape-disabled);
- [data-icon] {
- svg > path {
- fill: var(--woly-color, #c0c0c0);
- }
- }
+ pointer-events: none;
}
- [data-icon],
- [data-type='stub'] {
+ [data-icon] {
+ --woly-component-level: 0;
display: flex;
- align-items: center;
- justify-content: center;
-
- width: var(--woly-line-height, 24px);
- height: var(--woly-line-height, 24px);
-
- background: var(--woly-background-disabled, transparent);
-
- border-color: var(--woly-border, transparent);
- border-style: solid;
- border-width: var(--woly-border-width);
- border-radius: var(--woly-rounding, 3px);
-
- outline: none;
-
- svg > path {
- fill: var(--woly-color, #ffffff);
- }
- }
-
- [data-type='stub'] {
- visibility: hidden;
- position: static;
- flex-shrink: 0;
- }
-
- [data-icon='right'] {
- position: absolute;
- right: 0;
- z-index: 1;
- top: 50%;
- transform: translateY(-50%);
-
- &:hover {
- background-color: var(--woly-background-hover, #9381f1);
- opacity: 0.5;
- }
-
- &:active {
- background-color: var(--woly-background-hover, #9381f1);
- }
-
- &:focus {
- box-shadow: 0 0 0 var(--woly-border-width) var(--woly-border-focus, #9381f1);
- }
}
` as StyledComponent<'div', Record
, ChipProps & Variant>;
diff --git a/src/ui/atoms/chip/usage.mdx b/src/ui/atoms/chip/usage.mdx
index ebd60fa0..3d28e135 100644
--- a/src/ui/atoms/chip/usage.mdx
+++ b/src/ui/atoms/chip/usage.mdx
@@ -6,7 +6,8 @@ package: 'woly'
import { Chip } from './index';
import { CloseIcon, PlusIcon } from 'icons';
-import { Playground } from 'box-styles'
+import { ButtonIcon } from 'ui'
+import { block, Playground } from 'box-styles'
`Chip` is used for categorizing or markup.
Chips allow users to enter information, make selections, filter content, or trigger actions.
@@ -27,7 +28,9 @@ As a standalone component, the most common use will be in some form of input, so
### Example
- Simple Chip
+
+ Simple Chip
+
### Clickable
@@ -39,25 +42,55 @@ In case when chip is clickable, it defined change appearance on focus, hover, an
If chip consists another clickable component (eg button), this property defined will display a component which changes appearance on hover.
- console.info('click')}>
- Cklicked Chip
-
- }
- onActionClick={() => console.info('ActionIcon clicked')}
- >
- Cklicked Icon
-
- console.info('click')}
- action={}
- onActionClick={() => console.info('ActionIcon clicked')}
- disabled
- >
- Disabled Chip
-
+
+ console.info('click')}
+ rightIcon={
+ }
+ onClick={() => console.info('CloseIcon clicked')}
+ variant="primary"
+ filled
+ />
+ }
+ >
+ Clicked Chip
+
+
+
+ console.info('click')}
+ variant="primary"
+ rightIcon={
+ }
+ onClick={() => console.info('CloseIcon clicked')}
+ variant="primary"
+ filled
+ />
+ }
+ >
+ Clicked Icon
+
+
+
+ }
+ onClick={() => console.info('CloseIcon clicked')}
+ variant="primary"
+ filled
+ disabled
+ />
+ }
+ >
+ Disabled Chip
+
+
### Icons/Buttons
@@ -67,31 +100,51 @@ Chip can be used with icon on the left side or button on the right side.
Even chip can be used with both options.
- }>
- Chip with Icon
-
- } onClick={() => console.info('click')}>
- Cklicked Chip
-
- }
- onClick={() => console.info('click')}
- action={}
- onActionClick={() => console.info('ActionIcon clicked')}
- >
- Cklicked Icon
-
- }
- onClick={() => console.info('click')}
- action={}
- onActionClick={() => console.info('ActionIcon clicked')}
- disabled
- >
- Disabled Chip
-
+
+ }>
+ Chip with Icon
+
+
+
+ } onClick={() => console.info('click')}>
+ Clicked Chip
+
+
+
+ }
+ onClick={() => console.info('click')}
+ rightIcon={
+ }
+ onClick={(event) => console.info('CloseIcon clicked')}
+ variant="primary"
+ filled
+ />
+ }
+ >
+ Clicked Icon
+
+
+
+ }
+ disabled
+ rightIcon={
+ }
+ onClick={(event) => console.info('CloseIcon clicked')}
+ variant="primary"
+ filled
+ disabled
+ />
+ }
+ >
+ Disabled Chip
+
+
### Kinds
@@ -102,11 +155,12 @@ Even chip can be used with both options.
### Props
-| Name | Type | Default | Description |
-| --------------- | ------------------------------------- | ------------- | -------------------------------------------------- |
-| `children` | `string` | | Text inside chip |
-| `action` | `React.ReactNode` | `null` | Icon to show on the right side of the text |
-| `onActionClick` | `React.MouseEvent` | `null` | Callback when chip is clicked |
-| `onClick` | `React.MouseEvent` | `null` | Callback when chip is clicked |
-| `variant` | `string` | `'secondary'` | Variant prop to style Chip component |
-| `...` | `HTMLButtonElement` | `{}` | Other props are inherited from `HTMLButtonElement` |
+| Name | Type | Default | Description |
+| ----------- | ---------------------------------- | ------------- | -------------------------------------------------- |
+| `children` | `string` | | Text inside chip |
+| `disabled` | `boolean` | | Attribute to disable chip |
+| `leftIcon` | `React.ReactNode` | `null` | Icon to show on the left side of the text |
+| `onClick` | `React.MouseEvent` | `null` | Callback when chip is clicked |
+| `rightIcon` | `React.ReactNode` | `null` | Icon to show on the right side of the text |
+| `variant` | `string` | `'secondary'` | Variant prop to style Chip component |
+| `...` | `HTMLButtonElement` | `{}` | Other props are inherited from `HTMLButtonElement` |
diff --git a/src/ui/elements/quarks/box/index.tsx b/src/ui/elements/quarks/box/index.tsx
index 9c998850..3fd851c1 100644
--- a/src/ui/elements/quarks/box/index.tsx
+++ b/src/ui/elements/quarks/box/index.tsx
@@ -10,22 +10,27 @@ export const box = css`
);
--local-gap: calc(1px * var(--woly-component-level) * var(--woly-main-level));
--local-compensate: var(--local-vertical);
+
& > * {
padding-top: var(--local-vertical);
padding-bottom: var(--local-vertical);
}
+
& > :first-child {
padding-left: var(--local-horizontal);
}
+
& > :last-child {
padding-right: var(--local-horizontal);
}
+
& > [data-icon]:first-child {
padding-left: var(--local-compensate);
}
& > [data-icon]:last-child {
padding-right: var(--local-compensate);
}
+
& > :not(:first-child) {
margin-left: var(--local-gap);
}