[FRNT-396] Rewrite data selectors (#150)

* fix: rewrite data-selector, fix grammar * feat: write styleguide for data-attribute * update Styleguide Co-authored-by: Ira <i.aristova@opends.tech>
woly-ui · Jul 8, 2021 · 66ef498 · 66ef498
1 parent dd5a1e5
commit 66ef498
Show file tree

Hide file tree

Showing 16 changed files with 91 additions and 52 deletions.
diff --git a/src/styleguide/html/data-attribute/data-attribute.mdx b/src/styleguide/html/data-attribute/data-attribute.mdx
@@ -0,0 +1,36 @@
+# Styleguide for data-attributes
+
+Data-attributes allow us to store extra information on standard, semantic HTML elements.
+The data attribute can also be used for styling.
+You can access them from CSS to add styles to the tag that have specific data-attribute.
+
+It's simpler and cleaner to write data attributes as data-name, where a name is a concrete name of a data attribute.
+
+You **should not** write unnecessary data-block='name' or data-container='name' because data-attribute has only one definition and doesn't change.
+
+Bad code example:
+
+```html
+<div data-block="input"></div>
+```
+
+Good code example:
+
+```html
+<div data-input></div>
+```
+
+If you have several values of component states that you need to pass to a data attribute, make data attribute more unique with adding a name to data attribute.
+You can do it in this way:
+
+```html
+data-name="value"
+```
+
+For example:
+
+```html
+<div data-direction="horizontal">horizontal block</div>
+
+<div data-direction="vertical">vertical block</div>
+```
diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx
@@ -25,7 +25,7 @@ const ButtonIconBase: React.FC<Props & Priority> = ({
     type="button"
     {...p}
   >
-    <span data-icon>{icon}</span>
+    <span data-icon="button-icon">{icon}</span>
   </button>
 );
 
@@ -47,7 +47,7 @@ export const ButtonIcon = styled(ButtonIconBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-icon] {
+  [data-icon='button-icon'] {
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/src/woly/atoms/button/index.tsx b/src/woly/atoms/button/index.tsx
@@ -4,7 +4,7 @@ import styled, { StyledComponent } from 'styled-components';
 import { Priority } from 'lib/types';
 import { box } from 'ui/elements/box';
 
-export type Buttonprioritys =
+export type ButtonPriorities =
   | 'secondary'
   | 'primary'
   | 'default'
@@ -39,7 +39,7 @@ const ButtonBase: React.FC<ButtonProps & Priority> = ({
     data-priority={priority}
     {...p}
   >
-    {icon && <span data-icon="left">{icon}</span>}
+    {icon && <span data-icon="button">{icon}</span>}
     <span data-text>{text}</span>
   </button>
 );
@@ -76,11 +76,11 @@ export const Button = styled(ButtonBase)`
     }
   }
 
-  &[data-width='true'] {
+  &[data-full-width='true'] {
     width: 100%;
   }
 
-  [data-icon] {
+  [data-icon='button'] {
     --local-icon-size: var(--woly-line-height);
     display: flex;
     align-items: center;

diff --git a/src/woly/atoms/button/usage.mdx b/src/woly/atoms/button/usage.mdx
@@ -43,9 +43,9 @@ Button can span the entire width of the container or have a fixed width
   />
 </Playground>
 
-### prioritys
+### priorities
 
-Primary and danger prioritys are should be used to focus user attention.
+Primary and danger priorities are should be used to focus user attention.
 
 <Playground>
   <Button text="The main action on the page" priority="primary" />

diff --git a/src/woly/atoms/input/usage.mdx b/src/woly/atoms/input/usage.mdx
@@ -308,9 +308,9 @@ Icons can also be touch targets for nested components.
   </Form>
 </Playground>
 
-### prioritys
+### Priorities
 
-Primary and secondary prioritys are should be used to focus user attention.
+Primary and secondary priorities are should be used to focus user attention.
 
 <Playground direction="vertical">
   <Form autoComplete="false">

diff --git a/src/woly/atoms/label/usage.mdx b/src/woly/atoms/label/usage.mdx
@@ -18,7 +18,7 @@ This increased hit area provides an advantage to anyone trying to activate the i
   <Label priority="secondary">Base label</Label>
 </Playground>
 
-### prioritys
+### Priorities
 
 Error priority can be used to focus user attention on error.
 

diff --git a/src/woly/atoms/text/usage.mdx b/src/woly/atoms/text/usage.mdx
@@ -36,7 +36,7 @@ Text component is used as a simple text or a hint/error message for Input or Tex
   </Text>
 </Playground>
 
-### prioritys
+### Priorities
 
 Hint priority can be used to give user a hint or additional information.
 

diff --git a/src/woly/elements/input-container/index.tsx b/src/woly/elements/input-container/index.tsx
@@ -20,9 +20,9 @@ const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
   rightIcon,
 }) => (
   <div className={className} data-disabled={disabled} data-priority={priority}>
-    {leftIcon && <span data-icon="left">{leftIcon}</span>}
-    <div data-input="input">{children}</div>
-    {rightIcon && <span data-icon="right">{rightIcon}</span>}
+    {leftIcon && <span data-icon="input">{leftIcon}</span>}
+    <div data-input>{children}</div>
+    {rightIcon && <span data-icon="input">{rightIcon}</span>}
   </div>
 );
 
@@ -46,15 +46,15 @@ export const InputContainer = styled(InputContainerBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-input='input'] {
+  [data-input] {
     flex: 1;
 
     input {
       padding: 0;
     }
   }
 
-  [data-icon] {
+  [data-icon='input'] {
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/src/woly/molecules/checkbox/index.tsx b/src/woly/molecules/checkbox/index.tsx
@@ -51,15 +51,17 @@ const CheckboxBase: React.FC<CheckboxProps & Priority> = ({
       onKeyDown={onKeyDown}
       tabIndex={tabIndex}
     >
-      <span data-block="container" data-disabled={disabled} tabIndex={-1}>
-        <input type="checkbox" id={id} checked={checked} onChange={onChange} />
-        <span data-checkmark="unchecked" data-icon>
-          <IconFilledUnchecked />
+      <span data-container data-disabled={disabled} tabIndex={-1}>
+        <span data-icon="checkbox">
+          <input type="checkbox" id={id} checked={checked} onChange={onChange} />
+          <span data-unchecked>
+            <IconFilledUnchecked />
+          </span>
+          <span data-checked>
+            <IconCheckFilled />
+          </span>
         </span>
-        <span data-checkmark="checked" data-icon>
-          <IconCheckFilled />
-        </span>
-        {text && <span data-block="text">{text}</span>}
+        {text && <span data-text>{text}</span>}
       </span>
     </label>
   );
@@ -80,8 +82,6 @@ export const Checkbox = styled(CheckboxBase)`
   --local-text-color: var(--woly-canvas-text-default);
   --local-background-color: var(--woly-shape-default);
 
-  ${box}
-
   outline: none;
 
   user-select: none;
@@ -91,13 +91,15 @@ export const Checkbox = styled(CheckboxBase)`
     box-shadow: 0 0 0 var(--woly-border-width) var(--woly-focus);
   }
 
-  [data-block='container'] {
+  [data-container] {
+    ${box}
+
     display: flex;
     align-items: center;
 
     outline: none;
 
-    [data-block='text'] {
+    [data-text] {
       color: var(--local-text-color);
       font-size: var(--woly-font-size, 12px);
       line-height: var(--woly-line-height, 24px);
@@ -118,14 +120,14 @@ export const Checkbox = styled(CheckboxBase)`
       }
     }
 
-    [data-checkmark='unchecked'],
-    input:checked ~ [data-checkmark='checked'] {
+    [data-unchecked],
+    input:checked ~ [data-checked] {
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
-    input:checked ~ [data-checkmark='checked'] {
+    input:checked ~ [data-checked] {
       svg > rect {
         fill: var(--local-icon-fill);
       }
@@ -140,12 +142,12 @@ export const Checkbox = styled(CheckboxBase)`
       }
     }
 
-    [data-checkmark='checked'],
-    input:checked ~ [data-checkmark='unchecked'] {
+    [data-checked],
+    input:checked ~ [data-unchecked] {
       display: none;
     }
 
-    [data-checkmark='unchecked'] {
+    [data-unchecked] {
       &:hover {
         svg > rect {
           stroke: var(--local-icon-stroke);
@@ -168,12 +170,13 @@ export const Checkbox = styled(CheckboxBase)`
       --local-text-color: var(--woly-shape-disabled);
     }
 
-    [data-checkmark] > svg {
+    [data-unchecked] > svg,
+    [data-checked] > svg {
       box-shadow: none;
     }
 
-    [data-checkmark='unchecked'],
-    input:checked ~ [data-checkmark='checked'] {
+    [data-unchecked],
+    input:checked ~ [data-checked] {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -183,8 +186,8 @@ export const Checkbox = styled(CheckboxBase)`
       }
     }
 
-    [data-checkmark='checked'],
-    input:checked ~ [data-checkmark='unchecked'] {
+    [data-checked],
+    input:checked ~ [data-unchecked] {
       display: none;
     }
   }

diff --git a/src/woly/molecules/checkbox/usage.mdx b/src/woly/molecules/checkbox/usage.mdx
@@ -63,7 +63,7 @@ Size controlled by the `component-level` block property not from the props.
   </State>
 </Playground>
 
-### prioritys
+### Priorities
 
 Primary priority should be used to focus user attention. The disabled checkbox is unusable and un-clickable.
 

diff --git a/src/woly/molecules/field/index.tsx b/src/woly/molecules/field/index.tsx
@@ -18,9 +18,9 @@ const FieldBase: React.FC<FieldProps & Priority> = ({
   priority = 'secondary',
   row = false,
 }) => (
-  <Label data-field="label" className={className} data-row={row} data-priority={priority}>
+  <Label className={className} data-row={row} data-priority={priority} data-label>
     <span>{label}</span>
-    <div data-field="content">{children}</div>
+    <div data-content>{children}</div>
   </Label>
 );
 

diff --git a/src/woly/molecules/field/usage.mdx b/src/woly/molecules/field/usage.mdx
@@ -81,7 +81,7 @@ Labels and children component can be replaced in row
   </State>
 </Playground>
 
-or in column prioritys
+or in column priorities
 
 <Playground size="S">
   <Field label="Label of set">
@@ -98,7 +98,7 @@ or in column prioritys
   </State>
 </Playground>
 
-### prioritys
+### Priorities
 
 Error priority can be used to focus user attention on error.
 

diff --git a/src/woly/molecules/input-password/usage.mdx b/src/woly/molecules/input-password/usage.mdx
@@ -38,9 +38,9 @@ Disabled text fields are uneditable. They have less opacity so that they appear
   />
 </Playground>
 
-### prioritys
+### Priorities
 
-Primary and danger prioritys are should be used to focus user attention.
+Primary and danger priorities are should be used to focus user attention.
 
 <Playground direction="vertical">
   <State initial={false} change={(i) => !i}>

diff --git a/src/woly/molecules/radio-button/usage.mdx b/src/woly/molecules/radio-button/usage.mdx
@@ -49,9 +49,9 @@ Disabled radio button are uneditable. They have less opacity so that they appear
   </State>
 </Playground>
 
-### prioritys
+### Priorities
 
-Primary and danger prioritys are should be used to focus user attention.
+Primary and danger priorities are should be used to focus user attention.
 
 <Playground direction="vertical">
   <State initial="no" change={(i) => !i}>

diff --git a/src/woly/molecules/select/usage.mdx b/src/woly/molecules/select/usage.mdx
@@ -84,7 +84,7 @@ Disabled selects are uneditable. They have less opacity so that they appear less
   </div>
 </Playground>
 
-### prioritys
+### Priorities
 
 Secondary priority should be used as default priority.
 
@@ -109,7 +109,7 @@ Secondary priority should be used as default priority.
   </div>
 </Playground>
 
-Primary and dander prioritys should focus user attention.
+Primary and dander priorities should focus user attention.
 
 <Playground direction="vertical">
   <StateEvent initial="Cats" change={(event) => event?.target?.dataset.value}>

diff --git a/src/woly/molecules/switch/usage.mdx b/src/woly/molecules/switch/usage.mdx
@@ -56,7 +56,7 @@ Switch is used to choose between two different options.
   </State>
 </Playground>
 
-### prioritys
+### Priorities
 
 Error priority focus attention user on error