diff --git a/src/styleguide/html/data-attribute/data-attribute.mdx b/src/styleguide/html/data-attribute/data-attribute.mdx new file mode 100644 index 00000000..57c2ee26 --- /dev/null +++ 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 +
+``` + +Good code example: + +```html +
+``` + +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 +
horizontal block
+ +
vertical block
+``` diff --git a/src/woly/atoms/button-icon/index.tsx b/src/woly/atoms/button-icon/index.tsx index 1612ffc9..e47a021b 100644 --- a/src/woly/atoms/button-icon/index.tsx +++ b/src/woly/atoms/button-icon/index.tsx @@ -25,7 +25,7 @@ const ButtonIconBase: React.FC = ({ type="button" {...p} > - {icon} + {icon} ); @@ -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 index f9180ffc..0b5f630b 100644 --- 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' @@ -34,12 +34,12 @@ const ButtonBase: React.FC = ({ }) => ( ); @@ -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 index 8e464842..31e74c29 100644 --- 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 /> -### 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.