n8design / htwoo Goto Github PK
View Code? Open in Web Editor NEWhTWOo - a better Fluent UI framework.
Home Page: http://my.n8d.at/hTWOo
License: MIT License
hTWOo - a better Fluent UI framework.
Home Page: http://my.n8d.at/hTWOo
License: MIT License
Describe the bug
Longer title causes the card to expand beyond its intended size
To Reproduce
<div class="hoo-doccard">
<div class="hoo-cardimage i01DRMMVCVXY2OIVW2225HINW7ZWVKUDJ2L"><img
src="blob:http://localhost:8080/9d9fe997-d0b5-451b-bd48-2493f225f2b4" width="320" height="180" alt=""></div>
<div class="hoo-cardlocation i01DRMMVCVXY2OIVW2225HINW7ZWVKUDJ2L">Documents</div>
<div class="hoo-cardtitle">Electronics Store Trends in International Markets.pptx</div>
<div class="hoo-cardfooter">
<div class="hoo-avatar i01DRMMVCVXY2OIVW2225HINW7ZWVKUDJ2L"><img
src="blob:http://localhost:8080/7851ec35-2ffa-4684-a595-e012ecb45a18" alt="" class="hoo-avatar-img"
loading="lazy"></div>
<div class="hoo-cardfooter-data">
<div class="hoo-cardfooter-name">Miriam Graham</div>
<div class="hoo-cardfooter-modified">07/02/2021, 10:27:20</div>
</div>
</div>
</div>
Expected behavior
Longer title either wraps or is cut with an ellipsis.
Screenshots
Intended (above) vs. long title (below)
Desktop (please complete the following information):
Describe the bug
In flyout menus, all items will take up all the available width in the menu, as per .hoo-buttonflyout-item
. This is not applied to .hoo-buttoncmd
that is been moved into a overflow menu.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Full width should be clickable and should have background on hover.
Desktop (please complete the following information):
Is your feature request related to a problem? Please describe.
The vertical nav widget looks great but does not allow for nested lists.
Describe the solution you'd like
If hoo-nav-listsub
are nested they should be indented, like they are in Fluent React.
Describe alternatives you've considered
Tried doing this with DevTools in Pattern Lab but did not succeed. It is of course also possible that I did it wrong there is just a missing example and not something missing in the framework.
Describe the bug
Menu items in cmdbar are a list of div
tags. If they are replaced with <li>
tags the style is broken with visible list bullets.
To Reproduce
Steps to reproduce the behavior:
<div>
tags under the <menu>
tag with <li>
tags using DevTools.Expected behavior
As per MDN, menu should be treated similarily to <ul>
, and thus should contain <li>
tags.
Desktop (please complete the following information):
Additional context
Another alternative is to use ARIA role="list"
, which is the implicit role for <menu>
, along with role="listitem"
.
With that said, I realize the specc is not always the right way from the users perspective. If this was a concious decision, please let me know and why if possible.
Is your feature request related to a problem? Please describe.
Currently Simmers are not supported.
Describe the solution you'd like
Shimmer Like Fluent UI provides https://developer.microsoft.com/en-us/fluentui#/controls/web/shimmer
Additional style classes are needed to position sidebars correctly.
.hoo-mdldialog-outer{
box-sizing: border-box;
border: 0;
}
Fluent 2 is out but not yet feature complete from what I can tell. SharePoint is till Fluent 1 but the newer Viva apps have the Fluent 2 style.
I like the idea of a plain CSS framework and can understand not wanting to move to Fluent 2 before SharePoint has. Also, Microsoft’s implementation is still coupled with React.
Is this something on the project's radar? Is there a plan for a transition to Fluent 2?
@mikezimm there are some how-to available on the documentation page. Have you checked those out. Also, there is a sample repo that helps you get started.
Originally posted by @StfBauer in #11 (comment)
@StfBauer - I saw your reply above to @mikezimm about the sample repo. Have you written something up for us to follow to help build out those components? It may be the documentation link above is it, but I want to be sure. I'm game to try using the library soon.
Version 0.3.0
Describe the bug
The _base.scss file includes the following imports:
@import '../sass/00-base/atoms/loading/progress';
@import '../sass/00-base/atoms/loading/shimmer';
These paths are incorrect but also, I believe the imports should be included in the _style.scss file instead where they are already correctly referenced, so I believe the fix is to remove them. Currently when importing _base.scss you get a build error because it cannot resolve the paths.
Fix aria-expanded
Using the PivotBar with Overflow and CommandBar with Overflow as patterns add styling and control for FacePile with Overflow.
Is your feature request related to a problem? Please describe.
When using shimmers, at some point you'd want to replace them with the actual content. Right now, that requires DOM manipulation to replace the shimmer elements with the actual content.
Describe the solution you'd like
What if it shimmers were done using the :empty
CSS pseudo selector, so that shimmer is displayed when there is no content (eg. <div></div>
). When the content is retrieved and set, the shimmer would be replaced with the content. Such approach would remove the need to manipulate the DOM.
Describe alternatives you've considered
n/a
Describe the bug
Depending on DPI, zoom etc. the borders of the search box's icon and input are not always aligned
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The borders should always be aligned.
Desktop (please complete the following information):
Additional context
This seem to be a rounding error. The icon is always 32px in height, while the input is 31.44 in my case. A workaround is to use height: 2rem
for the input, rather than height: fit-content
.
Hi,
One of the biggest challenges I have with using Fluent UI in SPFx projects is lack of responsive design in the Pivot compnent.
https://lab.n8d.studio/htwoo/htwoo-core/?p=molecules-pivotbar
Here's an example of my current webpart which allows for a rather lengthy set of pivot buttons.
Also complicating my implementation is that I also need to have a "farRight" set of buttons that float to the right which are not part of the pivot but that's another issue altogether which I think could be implemented with a css grid.
Right now, if I load this on an ipad, I can't even get to my farRight buttons :(
Thanks!
Complete ToolTip implementation
Describe the bug
hoo-icon in a table aligns itself to 100% of the with of the column. In case the icon should get left aligned the following needs to change.
.hoo-icon {
justify-cotent: flex-start;
}
Describe the bug
<th>
does not have a defined font-weight
in htwoo-core. Compare Pattern Lab (700, in Edge's user agent style) with Fluent React (600).
Desktop (please complete the following information):
Describe the bug
htwoo-core is missing definition of hoo-checkbox-group which should be an extension of hoo-radiobutton-group
Describe the bug
72 and 100 px is not supported in HOOAvatar but is supported in HOOPersona
Describe the bug
Many, specifically the dropdown item has an internal id, allow for overriding the id in the component properties to allow for liking to labels.
Is your feature request related to a problem? Please describe.
Unlike, Fluent UI, htwoo allows for tab navigation between cmdbar buttons. There is however no styling indicating that a button has focus.
Describe the solution you'd like
Maybe a border like on flyout menu items.
Additional context
I am by no means an expert on web accessibility. If this is "by design", please just let me know.
Describe the bug
In most cases, the whole row in the vertical nav is clickable. However, for items at the top level, that do not have children, only the label is clickable
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The whole row should be clickable, in all cases.
Desktop (please complete the following information):
Describe the bug
When using the hoo-mtag
component on a <button>
tag, the label is not aligned as expected.
To Reproduce
<a>
tag to <button>
tagExpected behavior
Label alignment should not move.
Desktop
Additional context
Not sure if hoo-mtag
is meant to support <button>
but I saw some button
selector when debugging this.
Research update to implement OptionList as a HTML fieldset.
Is your feature request related to a problem? Please describe.
Disabled button styling is only applied for the disabled
attribute.
Describe the solution you'd like
I wish that it was also applied for aria-disabled="true"
.
Additional context
While it is usually recommended to use native HTML attributes, the disabled attribute comes with some issues. One is that the element becomes not focusable. For a user using tab navigation this can be a problem, as when the button is disabled (i.e. during for submission), focus will jump to the next element in the tabindex, potentially disorienting the user. Imagine being asked to try again, but focus has changed away from the button!
Fabric React also seem to be using aria-disabled
over the native attribute.
Naturally it would be up to each developer to prevent double submission on buttons with aria-disabled="true"
.
I wrote about using React 17 in a previous issue on my work github, after some initial testing with React 18, htwoo appears to work on it too, with some warnings that it's not supported same reason I submitted the issue about React 17. I think it is because of the atom design system that things seem to work in React 18.
I will try out every single atom, molecule, organism and let you know what works and doesn't work. Should know the results tomorrow/Sunday.
I am using React 18's strict mode. I will collect info on what works/doesn't using strict mode and let you know.
I will submit the example, when I have it complete.
The contributing guidelines state I should submit an issue before contributing, to get feedback.
Describe the bug
The circle/square is filled when hovering over a disabled radio button or checkbox.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Nothing should happen, as in Fluent React.
Desktop (please complete the following information):
Additional context
You can fix it for radio buttons by adding the :disabled
condition to relevant selectors.
.hoo-radio:hover:not(:checked, :disabled) + label:after, .hoo-radio:checked + label:after {
transform: scale(1);
opacity: 1;
}
Checkboxes are a little more tricky since there's this magic box-shadow
used to implement the check icon.
.hoo-checkbox:not(:checked, :disabled):hover + label:after {
position: absolute;
top: 0.5rem;
left: 0.3125rem;
width: 0.125rem;
height: 0.125rem;
content: "";
transform: rotate(45deg);
background: var(--inputIcon);
background: var(--neutralSecondary);
box-shadow: 2px 0 0 var(--neutralSecondary), 4px 0 0 var(--neutralSecondary), 4px -2px 0 var(--neutralSecondary), 4px -4px 0 var(--neutralSecondary), 4px -6px 0 var(--neutralSecondary), 4px -8px 0 var(--neutralSecondary);
}
.hoo-checkbox:not(:checked, :disabled):hover + label:after, .hoo-checkbox:checked + label:after {
position: absolute;
top: 0.5rem;
left: 0.3125rem;
width: 0.125rem;
height: 0.125rem;
content: "";
transform: rotate(45deg);
background: var(--inputIcon);
box-shadow: 2px 0 0 var(--inputIcon), 4px 0 0 var(--inputIcon), 4px -2px 0 var(--inputIcon), 4px -4px 0 var(--inputIcon), 4px -6px 0 var(--inputIcon), 4px -8px 0 var(--inputIcon);
}
Describe the bug
When focusing a hoo-input-text
input it get slightly higher, pushing down content below.
To Reproduce
Steps to reproduce the behavior:
<p>
or something below the inputExpected behavior
Size of focused element should not change
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
You can workaround the bug by changing:
.hoo-input-text:focus {
line-height: calc(1.9rem - 2px);
}
to:
.hoo-input-text:focus {
/* Base line-height on same as .hoo-input-text (without focus) selector */
line-height: calc(1.875rem - 2px);
}
Is your feature request related to a problem? Please describe.
Find a way to specify number of columns for the option group using css/css variable? Also needs to be responsive.
Describe the bug
The accent color seem to be green in all the three Teams themes.
For the SharePoint themes it seem to match the primary color.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The accent color (i.e. link text and the right border for current page) should be purple I guess.
Desktop (please complete the following information):
Additional context
Just let me know if this is by design.
Describe the bug
This may have come back from a previous bug? #21
Creating a document card using the HooCardImage, HooCardLocation, HooCardTitle components has a styling issue when the Location/Title values are really long.
What happens is, the HooCardImage doesn't grow with the container when the card properties push the container width
To Reproduce
Given that no HooDocumentCard control exists yet, create a document card following the Pattern Lab documentation, but use the new htwoo-react components for the image/location/title
<div className={`hoo-doccard`}>
<HOOCardImage imageSource={<pathToImage>}/>
<HOOCardLocation location="https://northpoleindustries.sharepoint.com/sites/WorkshopTemplate"/>
<HOOCardTitle title="Workshop Template" />
</div>
Expected behavior
When loading a DocumentCard, the location/title fields should either wrap/ellipsis or the HooCardImage should grow the container as these properties get longer.
Desktop (please complete the following information):
Describe the bug
Tried to build htwoo-react and got the following error. May be related to #19?
ERROR in ./lib/index.js
Module not found: Error: Can't resolve './Base.css' in 'D:\code\htwoo\htwoo-react\lib'
@ ./lib/index.js 1:0-20
ERROR in ./lib/components/LQDButton/LQDButton.js
Module not found: Error: Can't resolve './LQDButton.css' in 'D:\code\htwoo\htwoo-react\lib\components\LQDButton'
@ ./lib/components/LQDButton/LQDButton.js 28:0-25
@ ./lib/components/LQDButton/index.js
@ ./lib/LQDButton.js
@ ./lib/index.js
ERROR in ./lib/components/LQDWebPartTitle/LQDWebPartTitle.js
Module not found: Error: Can't resolve './LQDWebPartTitle.css' in 'D:\code\htwoo\htwoo-react\lib\components\LQDWebPartTitle'
@ ./lib/components/LQDWebPartTitle/LQDWebPartTitle.js 28:0-31
@ ./lib/components/LQDWebPartTitle/index.js
@ ./lib/LQDWebPartTitle.js
@ ./lib/index.js
To Reproduce
npm -i
Expected behavior
Build succeeds
Desktop (please complete the following information):
Describe the bug
The height of the command bar is 46px or 48px, with .has-overflow
.
To Reproduce
Steps to reproduce the behavior:
.hoo-cmdbar
Expected behavior
As in Fluent React, where it always is 44px.
Desktop (please complete the following information):
Additional context
.hoo-cmdbar has a 1px border transparent border, increasing the height to 46px. With .has-overflow
, a slightly bigger min-height
is also set, increasing the hight to 48px.
Handling max-height 100vw on dialogs
I tried using this project as a non-spfx/teams project, since Fluent UI works on SPFx/Teams/Websites. It failed for me because the dependencies are 16.X. And downgrading my project just doesn't seem worth it since React 16 is so old.
I would like the React/React-DOM dependencies to be peer dependencies as shown:
{
"peerDependencies": {
"react": ">=16.14.0 <=17.0.2",
"react-dom": ">=16.11.0 <=17.0.2"
....
}
}
Additional context
React 16 & React 17 may be 2 different major versions, but React 17 should not be a breaking change for most projects. The difference is how event handlers occur within React. 16 used "document" level events, while React 17 uses scoped level events.
I checked the Dist folder/compiled output of the React package and it doesn't bundle React, which gives me confidence that switching to peer-dependencies is a non-breaking change for this project. It might cause TSC to fail, and to work around that would be @types/react and @types/react-dom.
Having the project be compatible with React 18 would be hard and requires time/effort, but it should be possible to cater for >=16.14 <=18.2
Any feedback would be greatly appreciated.
Describe the bug
I am pretty sure there used to be an example for error labels.
To Reproduce
Steps to reproduce the behavior:
Oh snap, a 404!
You might want to double-check to see if the page you're looking for has moved or if your URL is correct.Alternatively, click here to head back to the default Pattern Lab page!
Expected behavior
There should be an example for Error Label, like there is for Success Label.
Is your feature request related to a problem? Please describe.
The Spinner component from Fluent UI is missing.
Describe the solution you'd like
See Fluent React.
Additional context
This is my attempt to port Microsoft's CSS to fit better with hTWOo:
@keyframes hoo-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
* Animation from Fluent React
* MIT license: https://github.com/microsoft/fluentui/blob/master/packages/react/LICENSE
*/
.hoo-spinner {
display: block;
box-sizing: border-box;
border-radius: 50%;
border-width: 1.5px;
border-style: solid;
border-color: var(--themePrimary) var(--themeLight) var(--themeLight);
border-image: initial;
animation-name: hoo-spinner;
animation-duration: 1.3s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
}
.hoo-spinner,
.hoo-spinner.medium {
width: 1.25rem;
height: 1.25rem;
}
.hoo-spinner.xsmall {
width: 0.75rem;
height: 0.75rem;
}
.hoo-spinner.small {
width: 1rem;
height: 1rem;
}
.hoo-spinner.large {
width: 1.75rem;
height: 1.75rem;
}
Describe the bug
Some styles are not adapting in a good way when enabling the Teams Dark theme.
To Reproduce
Test in Pattern Lab:
Expected behavior
Look and feel should be more similar to the dark theme in New Teams. Though I realize it cannot match 100% until htwoo moves to Fluent 2.
Desktop (please complete the following information):
Additional context
Added the following CSS to my project which was a huge improvement
.hoo-input-text,
.hoo-input-search .hoo-icon,
.hoo-dlg,
.hoo-checkbox + label:before,
.hoo-radio:checked + label:before, .hoo-radio:not(:checked) + label:before {
background: var(--bodyBackground);
color: var(--bodyText);
}
.hoo-input-search .hoo-icon {
fill: var(--bodyText);
}
.hoo-input-text::placeholder {
color: var(--neutralSecondary);
}
Describe the bug
When clicking the toggle button for a flyout menu the sub menu will become visible or hidden. This does not work for the overflow button, that instead triggered by hovering.
To Reproduce
See Pattern Lab
Expected behavior
As in Fluent React, where both types of flyout menus are toggled by clicking.
Desktop (please complete the following information):
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.