refs UIDEV-313
flag=none
Test plan:
Confirm the console errors currently visible on production
when you open /styleguide are gone.
The /styleguide page should now only feature the
the following basic HTML/CSS components:
- Borders
- Buttons
- Forms
- Grid
- Icons
- Spacing
- Tables
- Typography
In the header, there should be a clearer explanation that the CSS is
usable in the RCE, but not actively maintained. LTI app builders are
pointed to Instructure UI instead.
Change-Id: I86deee3dbf71c97bd150b71ab01e8af8de553ae5
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/236943
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Pam Hiett <phiett@instructure.com>
Product-Review: Pam Hiett <phiett@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
closes UIDEV-231
Test plan:
- start up Canvas and navigate to /styleguide
- you should see the deprecation notice as a warning style alert
- the link should open a new tab and go to the blog post about the
deprecation
Change-Id: Ic287939123b38178e3c49b699730e65ccf574b02
Reviewed-on: https://gerrit.instructure.com/172808
Product-Review: Arlo Guthrie <aguthrie@instructure.com>
Tested-by: Jenkins
Reviewed-by: Steve Jensen <sejensen@instructure.com>
QA-Review: Daniel Sasaki <dsasaki@instructure.com>
with the new css stuff, we don't actually use
jammit so jammit_css has been renamed to css_bundle.
we left an aliased jammit_css and marked it deprecated
so these all still worked but spit out a deprecation warning.
Change-Id: Ib74037711f559f64851d9379644479587c1f83f2
Reviewed-on: https://gerrit.instructure.com/55888
Reviewed-by: Jacob Fugal <jacob@instructure.com>
Tested-by: Jenkins
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
this does the following:
* renames some sass files to put a "_"
at the beginning of their filenames so they are
used as a sass partial.
* fixes some bad css syntax
* doesn't include all of "common" in the "styleguide"
bundle, and instead loads "common" seperately
on the styleguide page
* removes "canvas_icons" from conversations bundle
since it is already included in "common"
this is all to get ready for the new sass system
test plan:
nothing actually changes.
load /styleguide, make sure it looks right
load conversations, make sure it looks right
Change-Id: Ief7613b0b2edbb0ba63d961c20e250aafe695cdd
Reviewed-on: https://gerrit.instructure.com/54804
Tested-by: Jenkins
Reviewed-by: Ethan Vizitei <evizitei@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
fixes: CNVS-19415
This makes it so our styleguide nav doesn't have smooth scrolling
and the Tour link is no longer available in the sub-menu.
Test Plan:
- Go to /styleguide and click on something, you should be brought
directly to the section
- Go to Patterns. "Tour Popups" should no longer be in the sub-menu
Change-Id: Ie9396130655b5d6fab19c1a64f9a5625e6c19f22
Reviewed-on: https://gerrit.instructure.com/50660
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
Tested-by: Jenkins
QA-Review: Matt Fairbourn <mfairbourn@instructure.com>
on "Cogs"
fixes: CNVS-18169
Test Plan:
- Go to /styleguide
- Click on "Cogs" under Components; it should now scroll to the
correct place
Change-Id: If1f104fb84934a489a6df6783ccda85eeb1715e7
Reviewed-on: https://gerrit.instructure.com/48675
Tested-by: Jenkins
Reviewed-by: Chris Hart <chart@instructure.com>
QA-Review: Nathan Rogowski <nathan@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
Fixes: CNVS-15541
New forms CSS, built from scratch to make it easier
for Canvas developers to build responsive, accessible,
and beautifully laid-out form UIs.
The new forms CSS is:
- Responsive. Everything should scale down nicely for
smaller screen sizes.
- Accessibile out of the box. Revamped :focus styles
for the high-contrast UI.
- Browser tested on IE10/11, Firefox, Webkit and iOS
- Interoperable. All forms components should work
together in almost any configuration. Plenty of examples
are included for building all types of form UI.
- Backwards-compatible. The existing Bootstrap 2.x
forms are not affected by this commit. Everything is
scoped under new .ic- classes.
- Easy on the eye: new custom checkboxes and radio
buttons, as well as updated form message boxes for
warning, error, and success states.
QA Test Plan:
- Go to /styleguide and click on Forms CSS on the left
menu.
- Test each example.
- Please note that this work should not affect any current
forms in Canvas. Unless a form element has one of the new
.ic- classes, it won't inherit any of the new styles.
Change-Id: I9d9c2c13b6c8ce714433f47efe86343528738fbc
Reviewed-on: https://gerrit.instructure.com/46841
Tested-by: Jenkins
Reviewed-by: Colleen Palmer <colleen@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
QA-Review: Nathan Rogowski <nathan@instructure.com>
ref CNVS-16922
This adds a whole new look and feel to our Styleguide!
QA Test Plan:
- Go to /styleguide
- See all the new look and feel!
- I should look similar to this: http://invis.io/CT1QH2OHX
(small changes have been made from static to digital guide, ux
is aware of those changes)
- Make sure all navigation items in subnav go their proper places
- See notes
Notes:
- This only affects /styleguide and does not touch any canvas
styles.
- This is purely aesthetic - no functionality had changed
- Right now all the sections are being loaded onto one page; we
know this and plan on making improvements to hide/show per top nav
item in future iterations
- There is a 1px border when you shift between sections on Firefox,
ux is ok with this.
- We are aware that sometimes the automatic scrolling seems "fast"
but will change that in a future iteration
Change-Id: I0ef10c78d3fccc83bb1923970d6fc884298b6775
Reviewed-on: https://gerrit.instructure.com/47716
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
Tested-by: Jenkins
QA-Review: Derek Hansen <dhansen@instructure.com>
fixes CNVS-17517
This takes off the flag we had on the styleguide.
Test plan:
- with the flag off look at the styleguide, now turn the flag on and
you should see exactly the same thing :)
- note: a big indicator is the background color on the side nav, it
should consistently stay the light gray color from the original one
Change-Id: I95b1f0e8d86f53043fb64e8b62cd9fc76cc63fc5
Reviewed-on: https://gerrit.instructure.com/45825
Reviewed-by: Chris Hart <chart@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Matt Fairbourn <mfairbourn@instructure.com>
Towards: CNVS-15062
Test plan:
Code test -
- Review implementation of Flexbox Grid in Canvas
- Is the grid stylesheet ok in the /vendor directory, even
though it is slightly modified by us?
- Should we consider converting the grid classes to silent
classes that we extend with something more BEM-y? My
inclination is no, because I like how clear and universally
known the Bootstrp classes have become; but it is worth
a debate!
QA test -
- Go to /styleguide on supported browsers and make
sure there is a new Grid section
- Make sure each example works properly
Change-Id: Ia164297a88d3e2a22ae69422232c2e93889aab7d
Reviewed-on: https://gerrit.instructure.com/40069
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Colleen Palmer <colleen@instructure.com>
QA-Review: Matt Fairbourn <mfairbourn@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>
fixes CNVS-14529
What it does:
- Adds feature flags for new styleguide styles
- Strips out un-needed variable highcontrast (these will need to
be set per element, not on the main color variables)
- Changes gemfile to point to temporary dress_code repo: we need this
so the dress_code generator strips out the parent tag
Test plan:
- get new gem: bundle install
- get new styles: npm run compile-sass
- regenerate styleguide: rake css:styleguide
- Make sure new_styles is disabled. You can do this in rails console:
Account.find(1).disable_feature!(:new_styles)
- Go to /styleguide and it should look the same as it does now
- Now turn on the feature flag. In rails console:
Account.find(1).enable_feature!(:new_styles)
- Refresh /styleguide and you should see are base starter styles for
the new look and feel!
Note: The new styleguide components are a wip and this request just
adds in the layout and styles specifically for the /styleguide page
to use while we work through all the components. You will notice
some funky looking ui - that's normal. We will be attacking these
components piece by piece.
Change-Id: I952b36346df77f98ddb7bbc5e27ab9b45ab4d8ca
Reviewed-on: https://gerrit.instructure.com/39600
Reviewed-by: Chris Hart <chart@instructure.com>
Reviewed-by: Derek DeVries <ddevries@instructure.com>
Product-Review: Colleen Palmer <colleen@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Matt Fairbourn <mfairbourn@instructure.com>
also added styles to make .form-controls look
good in dialogs.
closes #CNVS-4302
Change-Id: Ibe54ee4046ac255b0b0ea83d32afc88e4a820464
Reviewed-on: https://gerrit.instructure.com/19331
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Jon Jensen <jon@instructure.com>
QA-Review: Ryan Florence <ryanf@instructure.com>
Product-Review: Ryan Florence <ryanf@instructure.com>
Chris Hart