Comments (10)
The issue is that it gets pretty long and it's extra typing that will not be necessary half the time.
Example:
import { OrbitButton, OrbitTypography, OrbitInput, OrbitTable } from '@kiwicom/orbit-components'
from orbit.
I would check with the devs whether they run into this issue or not, because if they are then the team leads should solve this knowledge issue.
from orbit.
I don't like this prefix, always when I I need to know which component is from where I can just look on the import. It is unnecessary verbose
from orbit.
We've got Typography
, should we rename it to Text
?
from orbit.
Yes, if it's possible. It will be synced not only with Orbit UI for Sketch but mostly with names of design tokens (colorTextPrimary, colorTextSecondary, etc.) If I am not mistaken, now Typography
covers all texts from body texts and headlines to any other text you can imagine.
I explained why we should have this separated in the original Dropbox Paper document, I am copying it here too:
Why have a specific component for text and a second one for the heading?
Because in the design system, they both have a totally different purpose (and as you can see in specifications, also very different possibilities of configuration).
Also, in the code, reading will be much easier, for example:
<Heading Element=”h1” Size=”Size 1”>Very important heading</Heading>
<Text>Loooong paragraphs of text</Text>
<Text>Another loooong paragraphs of text</Text>
<Heading Element=”h2” Size=”Size 2”>Not so important header</Heading>
<Text>Just another paragraph of text</Text>
Hope it make sense :)
from orbit.
Actually, I was thinking if we shouldn't have all the Orbit components prefixed with "Orbit", e.g. <OrbitText />
, <OrbitHeadline />
, <OrbitTable />
, <OrbitWhatever />
. If we do it, it will be totally clear which components in the code are from design system and which are specific for every project. It also probably solve the issue with component from old Kiwi repo and new from Orbit repo (not sure if that's even issue though).
What do you think about it? @jaroslav-kubicek @michalsanger @fallion @infi-pc
from orbit.
Does other component libraries have naming like this?
from orbit.
Developers know (or should know/ can ask their team leads) how to rename imports when using them in code.
I don't think it's a good practice to prefix stuff like this. You can already see it on the import level where the components are coming from.
Example:
import { Input } from 'frontendcomponents'
import { Input as OrbitInput } from '@kiwicom/orbit-components'
What the alternative would look like for everything else:
import { OrbitInput } from '@kiwicom/orbit-components'
I can't think of any library that does this.
from orbit.
Not majority but there are few, yes. For example Skyscanner with "Bpk" (Backpack) or Hubsport prefixes UI for every component. Others, that have component libraries based on SASS, prefix their classes with something (Salesforce with "slds", etc.)
My idea behind it was to make clear what's from Orbit and what's not. @fallion's example is solving this issue too, we just need to tell devs to rename imports when importing something. I believe that this can really help to have better clarity.
from orbit.
@jaroslav-kubicek Any final decision on this?
from orbit.
Related Issues (20)
- Media query hook not working on initial render. HOT 1
- docs: some Figma iframes require logging in HOT 9
- Prevent drawer overlay close HOT 7
- Padding right added to body when modal opened HOT 4
- Add option for select widget to have icon only
- Possibility to set timeline direction HOT 2
- available `icon list` is broken HOT 2
- ThemeProvider doesn't pass down dictionary prop properly HOT 1
- How to integrate using Rollup with orbit-components as the dependency? HOT 3
- Search shortcut (⌘ + K) doesn't work properly on FF HOT 4
- Accordion Component Broken in Latest Version
- Unable to remove white background on corners of Select component HOT 1
- Popover hijacks space keystroke events HOT 4
- Slider : show the histogram on desktop devices
- "TypeError: Cannot read properties of undefined (reading 'spaceXLarge')" when setting "content" on ItinerarySegmentDetail
- Reporting a vulnerability HOT 1
- align attribute not working in Heading component
- Allow different colored Tile Components HOT 2
- Custom Option filtering for InputSelect HOT 1
- Unexpected error when using OrbitProvider & `useId` prop HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from orbit.