Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.

[FRNT-327] Rewrite select styles #98

Merged
merged 6 commits into from
May 7, 2021
Merged

[FRNT-327] Rewrite select styles #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
99c91a1
rewrite select styles
Irinaristova Apr 26, 2021
e1c9454
fix value color
Irinaristova May 4, 2021
d3923b0
resolve conflicts
Irinaristova May 4, 2021
9a98b0b
rewrite styles
Irinaristova May 5, 2021
979016f
rewrite select styles
Irinaristova May 5, 2021
e9ec30f
small fixes
Irinaristova May 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 19 additions & 21 deletions src/lib/listHandlers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,31 @@
const LI_TAG = 'LI';

export const onKeyDown = (listNode: HTMLElement) => () => {
if (document.activeElement?.tagName === LI_TAG) {
(document.activeElement?.nextElementSibling as HTMLElement)?.focus();
} else {
(listNode?.firstChild as HTMLElement)?.focus();
}
if (document.activeElement?.tagName === LI_TAG) {
(document.activeElement?.nextElementSibling as HTMLElement)?.focus();
} else {
(listNode?.firstChild as HTMLElement)?.focus();
}
};

export const onKeyUp = (listNode: HTMLElement) => () => {
if (document.activeElement?.tagName === LI_TAG) {
(document?.activeElement?.previousElementSibling as HTMLElement)?.focus();
} else {
(listNode.lastChild as HTMLElement)?.focus();
}
if (document.activeElement?.tagName === LI_TAG) {
(document?.activeElement?.previousElementSibling as HTMLElement)?.focus();
} else {
(listNode.lastChild as HTMLElement)?.focus();
}
};

const onItemEnter = (listNode: HTMLElement) => () => {
if (document.activeElement?.tagName === LI_TAG) {
(document?.activeElement as HTMLElement).click();
} else {
(listNode?.lastChild as HTMLElement).focus();
}
if (document.activeElement?.tagName === LI_TAG) {
(document?.activeElement as HTMLElement).click();
} else {
(listNode?.lastChild as HTMLElement).focus();
}
};

export const keyHandlerList = ({
listNode,
}: any) => ({
arrowDown: onKeyDown(listNode),
arrowUp: onKeyUp(listNode),
enter: onItemEnter(listNode),
export const keyHandlerList = ({ listNode }: any) => ({
arrowDown: onKeyDown(listNode),
arrowUp: onKeyUp(listNode),
enter: onItemEnter(listNode),
});
2 changes: 1 addition & 1 deletion src/ui/atoms/button-floating/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { SearchIcon } from 'icons';
### Props

| Name | Type | Default | Description |
| --------- | -------------------------------------------- | --------------| -------------------------------------------------- |
| --------- | -------------------------------------------- | ------------- | -------------------------------------------------- |
| `icon` | `React.ReactNode` | | Set the icon component inside the button |
| `onClick` | `React.MouseEventHandler<HTMLButtonElement>` | | Callback when button clicked |
| `variant` | `string` | `'secondary'` | Variant prop to style ButtonFloating component |
Expand Down
2 changes: 1 addition & 1 deletion src/ui/atoms/button-icon/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ Secondary and error variant should be used to focus user attention.
### Props

| Name | Type | Default | Description |
| --------- | -------------------------------------------- | --------------| -------------------------------------------------- |
| --------- | -------------------------------------------- | ------------- | -------------------------------------------------- |
| `icon` | `React.ReactNode` | | Set the icon component inside the button |
| `onClick` | `React.MouseEventHandler<HTMLButtonElement>` | | Callback when button clicked |
| `variant` | `string` | `'secondary'` | Variant prop to style ButtonIcon component |
Expand Down
6 changes: 3 additions & 3 deletions src/ui/atoms/button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ export const Button = styled(ButtonBase)`
&[data-outlined='true'] {
background-color: transparent;
color: var(--local-shape-color);
svg > path {
fill: var(--local-shape-color);
}
svg > path {
fill: var(--local-shape-color);
}
}

[data-icon] {
Expand Down
69 changes: 35 additions & 34 deletions src/ui/atoms/list/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ It does not need to be a direct child of the List component.
list={[
{ id: 0, text: 'Red' },
{ id: 1, text: 'Green' },
{ id: 2, text: 'Blue', onClick: change},
{ id: 2, text: 'Blue', onClick: change },
]}
/>
)}
Expand Down Expand Up @@ -73,42 +73,43 @@ List items can consist icon on the left side or the right. Use icons on the both
/>
</Playground>

List items can be clickable
List items can be clickable

<Playground size="L">
<StateEvent initial={null} change={(event) => alert('Item clicked')}>
<StateEvent initial={null} change={(event) => alert('Item clicked')}>
{(value, change) => (
<List
variant="primary"
list={[
{
left: <InfoIcon />,
id: 0,
text: 'Red',
right: <Check />,
onClick: change,
},
{
left: <InfoIcon />,
id: 1,
text: 'Green',
right: <Check />,
onClick: change,
},
{
left: <InfoIcon />,
id: 2,
text: 'Blue',
right: <Check />,
onClick: change,
},
]}
/>
<List
variant="primary"
list={[
{
left: <InfoIcon />,
id: 0,
text: 'Red',
right: <Check />,
onClick: change,
},
{
left: <InfoIcon />,
id: 1,
text: 'Green',
right: <Check />,
onClick: change,
},
{
left: <InfoIcon />,
id: 2,
text: 'Blue',
right: <Check />,
onClick: change,
},
]}
/>
)}
</StateEvent>
</Playground>

or not

<Playground size="L">
<List
variant="primary"
Expand Down Expand Up @@ -229,8 +230,8 @@ Size controlled by the `component-level` block property not from the props.

### Props

| Name | Type | Default | Description |
| --------- | ------------------------ | ----------- | ------------------------------------ |
| `list` | `Array<React.ReactNode>` | | An array of List items |
| `variant` | `string` | `'default'` | Variant prop to style List component |
| `disabled`| `boolean` | | Disable list |
| Name | Type | Default | Description |
| ---------- | ------------------------ | ----------- | ------------------------------------ |
| `list` | `Array<React.ReactNode>` | | An array of List items |
| `variant` | `string` | `'default'` | Variant prop to style List component |
| `disabled` | `boolean` | | Disable list |
10 changes: 5 additions & 5 deletions src/ui/atoms/text/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ Error variant can be used to focus user attention on error.

### Props

| Name | Type | Default | Description |
| --------- | --------------------------------------------- | -------------- | ------------------------------------ |
| `type` | `'L' ӏ 'S' ӏ 'XS' ӏ 'M'ӏ 'subtitle' ӏ 'hint'` | `'subtitle'` | Type of text |
| `variant` | `string` | `'secondary'` | Variant prop to style Text component |
| `weight` | `'medium' ӏ 'regular' ӏ 'light'` | `'regular'` | Font weight of text |
| Name | Type | Default | Description |
| --------- | --------------------------------------------- | ------------- | ------------------------------------ |
| `type` | `'L' ӏ 'S' ӏ 'XS' ӏ 'M'ӏ 'subtitle' ӏ 'hint'` | `'subtitle'` | Type of text |
| `variant` | `string` | `'secondary'` | Variant prop to style Text component |
| `weight` | `'medium' ӏ 'regular' ӏ 'light'` | `'regular'` | Font weight of text |
2 changes: 1 addition & 1 deletion src/ui/molecules/checkbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export const Checkbox = styled(CheckboxBase)`
[data-checkmark] > svg {
box-shadow: none;
}

[data-checkmark='unchecked'],
input:checked ~ [data-checkmark='checked'] {
display: flex;
Expand Down
20 changes: 10 additions & 10 deletions src/ui/molecules/input-password/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,13 +195,13 @@ Inputs can be placed inside the container. Input width is equal to container siz

### Props

| Name | Type | Default | Description |
| -------------- | -------------------------------------------- | ------------- | ----------------------------------------------------------- |
| `disabled` | `boolean` | `null` | HTML disabled attribute |
| `name` | `string` | | HTML name attribute |
| `onChange` | `React.ChangeEventHandler<HTMLInputElement>` | | Callback when input is changed |
| `value` | `HTMLInputElement['value']` | `null` | HTML value attribute |
| `variant` | `string` | `'secondary'` | Variant prop to style InputPassword component |
| `placeholder` | `string` | | CSS pseudo-element represents the placeholder text |
| `rightIcon` | `React.ReactNode` | | Component to show on the right side of the text (ex.: Icon) |
| `...` | `HTMLInputElement` | `{}` | Other props are inherited from `HTMLInputElement` |
| Name | Type | Default | Description |
| ------------- | -------------------------------------------- | ------------- | ----------------------------------------------------------- |
| `disabled` | `boolean` | `null` | HTML disabled attribute |
| `name` | `string` | | HTML name attribute |
| `onChange` | `React.ChangeEventHandler<HTMLInputElement>` | | Callback when input is changed |
| `value` | `HTMLInputElement['value']` | `null` | HTML value attribute |
| `variant` | `string` | `'secondary'` | Variant prop to style InputPassword component |
| `placeholder` | `string` | | CSS pseudo-element represents the placeholder text |
| `rightIcon` | `React.ReactNode` | | Component to show on the right side of the text (ex.: Icon) |
| `...` | `HTMLInputElement` | `{}` | Other props are inherited from `HTMLInputElement` |
Loading