Atomic Design - отделение компонентов реализации от компонентов Atomic UI

Question

Начиная строить новую библиотеку пользовательского интерфейса с использованием методологии атомарного проектирования, мы быстро столкнулись с проблемой при попытке классифицировать наименьшие строительные блоки пользовательского интерфейса как атомы. Примером здесь может быть компонент React, который может быть <SVGComponent />, Первоначально классифицированный как атом - быстро стало очевидно, что это не так. С точки зрения атомного дизайна это не соответствовало бы словарному запасу атома - это деталь реализации. Так что <Icon /> компонент может соответствовать проектной классификации атома, и реализация этого компонента может состоять из <SVGComponent />, Есть и другие примеры таких компонентов, например <Font/>,

Существует ли общий язык для описания и классификации таких компонентов наряду с атомарной библиотекой пользовательского интерфейса и где существует зависимость? Есть какие-нибудь мысли вообще по этому поводу?

Спасибо

Answer 1

Я не специалист по понятиям AD, но ссылаюсь на определение:

Атомы - это наименьшие возможные компоненты, такие как кнопки, заголовки, входные данные или цветные палитры событий, анимации и шрифты. Они могут быть применены к любому контексту, глобально или внутри других компонентов и шаблонов, помимо множества состояний, таких как пример кнопки: отключено, наведение, разные размеры и т. Д.

Итак, если я понял цель <SVGComponent /> Да, я не совсем согласен, что это не соответствует словарному запасу атома. Сравнивая это с <Button /> компонент (который является атомом), он может свободно получать реквизит, как 'width', 'height', 'viewBox', так далее.

Для <Icon /> компонент, не нужно составлять <SVGComponent /> внутри него. Вы можете попробовать передать что-то вроде 'src' опора для Icon, который может быть одним из различных типов (img src, необработанный svg-код и т. д.).

Просто мои два цента. Надеюсь, поможет.