[FRNT-603] Refactor data-attributes

CONTRIBUTING.md

@@ -13,8 +13,8 @@ Woly это система компонентов, основной целью 
 
 ```jsx
 <>
-<Button variant="primary" />
-<Button variant="custom" />
+  <Button variant="primary" />
+  <Button variant="custom" />
 </>
 ```
 
@@ -102,25 +102,25 @@ const Container = styled.div`
 ```jsx
 const CompoundBase = (props) => (
   <div className={props.className}>
-    <div data-title>{props.title}</div>
-    <div data-content>{props.content}</div>
-    {props.error ? <div data-error>{props.error}</div> : null}
+    <div data-element="title">{props.title}</div>
+    <div data-element="content">{props.content}</div>
+    {props.error ? <div data-element="error">{props.error}</div> : null}
   </div>
 )
 
 export const Compound = styled(CompoundBase)`
   display: grid;
   width: ${p => p.size === 'wide' ? '100%' : 'auto'};
 
-  [data-title] {
+  [data-element='title'] {
     grid-column: span 2;
   }
 
-  [data-content] {
+  [data-element='content'] {
     grid-row: 1 / 2;
   }
 
-  [data-error] {
+  [data-element='error'] {
     padding-top: 1rem;
   }
 `
@@ -137,9 +137,9 @@ export const Compound = styled(CompoundBase)`
 ```jsx
 const CompoundBase = (props) => (
   <div className={props.className} data-size={props.size}>
-    <div data-title>{props.title}</div>
-    <div data-content>{props.content}</div>
-    {props.error ? <div data-error>{props.error}</div> : null}
+    <div data-element="title">{props.title}</div>
+    <div data-element="content">{props.content}</div>
+    {props.error ? <div data-element="error">{props.error}</div> : null}
   </div>
 )
 
@@ -151,15 +151,15 @@ export const Compound = styled(CompoundBase)`
     width: 100%;
   }
 
-  [data-title] {
+  [data-element='title'] {
     grid-column: span 2;
   }
 
-  [data-content] {
+  [data-element='content'] {
     grid-row: 1 / 2;
   }
 
-  [data-error] {
+  [data-element='error'] {
     padding-top: 1rem;
   }
 `

src/styleguide/html/data-attribute/data-attribute.mdx

@@ -6,18 +6,10 @@ You can access them from CSS to add styles to the tag that have specific data-at
 
 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:
+Use `data-element` attribute for styling (it is semantic and consistent):
 
 ```html
-<div data-input></div>
+<div data-element="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.

src/upload/elements/upload-area/index.tsx

@@ -18,10 +18,10 @@ const UploadAreaBase: React.FC<UploadAreaProps & Priority> = ({
   priority = 'default',
 }) => (
   <div className={className} data-priority={priority} data-focus={focus}>
-    <div data-content data-position-center={center}>
+    <div data-element="content" data-position-center={center}>
       {content}
     </div>
-    <div data-overlay />
+    <div data-element="overlay" />
   </div>
 );
 
@@ -51,7 +51,7 @@ export const UploadArea = styled(UploadAreaBase)`
 
     outline: none;
 
-    [data-overlay] {
+    [data-element='overlay'] {
       position: absolute;
       top: 50%;
       left: 50%;

src/upload/molecules/button-uploader/index.tsx

@@ -48,15 +48,15 @@ export const ButtonUploaderBase: React.FC<ButtonUploaderProps & Priority> = ({
   return (
     <div className={className} {...getRootProps()}>
       <Button text={text} disabled={disabled} icon={icon} outlined={outlined} priority={priority} />
-      <input data-file {...getInputProps()} />
+      <input data-element="file" {...getInputProps()} />
     </div>
   );
 };
 
 export const ButtonUploader = styled(ButtonUploaderBase)`
   outline: none;
 
-  input[data-file] {
+  input[data-element='file'] {
     display: none;
   }
 `;

src/upload/molecules/drag-uploader/index.tsx

@@ -53,7 +53,7 @@ export const DragUploaderBase: React.FC<DragUploaderProps & Priority> = ({
       onBlur={() => setFocus(false)}
     >
       <UploadArea center={center} content={content} focus={focus} priority={priority} />
-      <input data-file {...getInputProps()} />
+      <input data-element="file" {...getInputProps()} />
     </div>
   );
 };
@@ -64,7 +64,7 @@ export const DragUploader = styled(DragUploaderBase)`
 
   outline: none;
 
-  input[data-file] {
+  input[data-element='file'] {
     display: none;
   }
 `;

src/woly/atoms/button-icon/index.tsx

@@ -71,10 +71,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
     background: var(--local-shape-color);
     border-color: var(--local-shape-color);
 
-    [data-icon] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
     }
-    [data-icon] > svg > g {
+    [data-element='icon'] > svg > g {
       stroke: var(--local-icon-color);
     }
 
@@ -102,10 +102,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
     background: var(--local-shape-color);
     border-color: var(--local-icon-color);
 
-    [data-icon] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
     }
-    [data-icon] > svg > g {
+    [data-element='icon'] > svg > g {
       stroke: var(--local-icon-color);
     }
 
@@ -138,10 +138,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
     border-color: var(--local-border-color);
     box-shadow: var(--local-shadow);
 
-    [data-icon] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
     }
-    [data-icon] > svg > g {
+    [data-element='icon'] > svg > g {
       stroke: var(--local-icon-color);
     }
 
@@ -172,10 +172,10 @@ export const ButtonIcon = styled(ButtonIconBase)`
     background: var(--local-shape-color);
     border-color: var(--local-border-color);
 
-    [data-icon] > svg > path {
+    [data-element='icon'] > svg > path {
       fill: var(--local-icon-color);
     }
-    [data-icon] > svg > g {
+    [data-element='icon'] > svg > g {
       stroke: var(--local-icon-color);
     }
 

src/woly/atoms/button/index.tsx

@@ -40,7 +40,7 @@ const ButtonBase: React.FC<ButtonProps & Priority> = ({
     {...p}
   >
     {icon && <span data-icon="button">{icon}</span>}
-    <span data-text>{text}</span>
+    <span data-element="text">{text}</span>
   </button>
 );
 

src/woly/atoms/chip/index.tsx

@@ -80,7 +80,7 @@ export const Chip = styled(ChipBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-text] {
+  [data-element='text'] {
     display: flex;
     flex: 1;
 

src/woly/atoms/icon-box/index.tsx

@@ -38,7 +38,7 @@ export const IconBox = styled(IconBoxBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-icon] {
+  [data-element='icon'] {
     display: flex;
     flex-shrink: 0;
     align-items: center;

src/woly/atoms/list/index.tsx

@@ -55,9 +55,9 @@ export const ListItem: React.FC<ListItemProps & ListElementsProps & Priority> =
     tabIndex={disabled ? -1 : tabIndex}
     priority={priority}
   >
-    {iconLeft && <span data-icon>{iconLeft}</span>}
+    {iconLeft && <span data-element="icon">{iconLeft}</span>}
     <span>{text}</span>
-    {iconRight && <span data-icon>{iconRight}</span>}
+    {iconRight && <span data-element="icon">{iconRight}</span>}
   </ListItemContainer>
 );
 

src/woly/atoms/loader/index.tsx

@@ -16,9 +16,9 @@ const LoaderBase = ({
 }: LoaderProps & Priority) => {
   return (
     <div className={className} data-priority={priority}>
-      <div data-loader>
-        <IconSpinner data-track />
-        <div data-description>{description}</div>
+      <div data-element="loader">
+        <IconSpinner data-element="track" />
+        <div data-element="description">{description}</div>
       </div>
     </div>
   );
@@ -71,13 +71,13 @@ export const Loader = styled(LoaderBase)`
   width: 100%;
   height: 100%;
 
-  [data-loader] {
+  [data-element='loader'] {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
 
-  [data-track] {
+  [data-element='track'] {
     width: var(--local-track-size);
     height: var(--local-track-size);
     margin-bottom: var(--local-vertical-gap);
@@ -89,7 +89,7 @@ export const Loader = styled(LoaderBase)`
     fill: transparent;
   }
 
-  [data-track] circle {
+  [data-element='track'] circle {
     transform-origin: 50% 50%;
 
     animation: 1.4s ease-in-out infinite both ${spinnerAnimation};
@@ -102,7 +102,7 @@ export const Loader = styled(LoaderBase)`
     stroke-dasharray: 283;
   }
 
-  [data-description] {
+  [data-element='description'] {
     color: var(--woly-canvas-text-default);
     font-size: 15px;
     line-height: 21px;

src/woly/atoms/separator/index.tsx

@@ -4,7 +4,7 @@ import { Priority } from 'lib/types';
 
 const SeparatorBase: React.FC<{ className: string } & Priority> = ({ className, priority }) => (
   <div className={className} data-priority={priority}>
-    <div data-line />
+    <div data-element="line" />
   </div>
 );
 
@@ -14,7 +14,7 @@ export const Separator = styled(SeparatorBase)`
   width: 100%;
   padding: calc(var(--local-padding) - (var(--woly-border-width) / 2)) 0;
 
-  [data-line] {
+  [data-element='line'] {
     height: var(--woly-border-width);
 
     background: var(--woly-canvas-disabled);

src/woly/elements/box/index.tsx

@@ -15,19 +15,19 @@ export const box = css`
     padding: var(--local-vertical) var(--local-horizontal);
   }
 
-  & > [data-icon]:only-child {
+  & > [data-element='icon']:only-child {
     padding: var(--local-vertical);
   }
 
-  & > [data-icon]:first-child:not(:only-child) {
+  & > [data-element='icon']:first-child:not(:only-child) {
     padding-right: 0;
     padding-left: var(--local-compensate);
   }
 
   & > :not(:first-child) {
     padding-left: var(--local-gap);
   }
-  & > [data-icon]:last-child:not(:only-child) {
+  & > [data-element='icon']:last-child:not(:only-child) {
     padding-right: var(--local-vertical);
     padding-left: 0;
   }

src/woly/elements/input-container/index.tsx

@@ -21,7 +21,7 @@ const InputContainerBase: React.FC<InputContainerProps & Priority> = ({
 }) => (
   <div className={className} data-disabled={disabled} data-priority={priority}>
     {leftIcon && <span data-icon="input">{leftIcon}</span>}
-    <div data-input>{children}</div>
+    <div data-element="input">{children}</div>
     {rightIcon && <span data-icon="input">{rightIcon}</span>}
   </div>
 );
@@ -46,7 +46,7 @@ export const InputContainer = styled(InputContainerBase)`
   border-radius: var(--woly-rounding);
   outline: none;
 
-  [data-input] {
+  [data-element='input'] {
     flex: 1;
 
     input {